Lors de la conception d'un site Web réactif, le développeur Web souhaite modifier la structure de la disposition Web en fonction de l'appareil à l'aide. CSS permet à ses utilisateurs d'effectuer cette tâche en utilisant la règle @Media qui utilise des requêtes multimédias pour modifier l'apparence d'un site Web correspondant au type d'appareil. Afin de comprendre quelle est cette règle, lisez le message suivant. Les sujets mis en évidence dans le post sont les suivants.

1. Règle @media
2. Syntaxe de la règle @media
3. Types de médias CSS
4. Types de fonctionnalités médiatiques

Règle @media

Dans le but de modifier l'apparence d'une page Web basée sur l'appareil, ou les supports qui l'affichent, la règle @Media est utilisée. Cette règle utilise les requêtes multimédias pour effectuer la tâche susmentionnée. Cette règle s'avère très utile lors du développement d'un site Web réactif.

Syntaxe de la règle @media

Il a la syntaxe suivante.

Mots-clés expliqués

pas: Il inverse la sémantique d'une requête médiatique.

seul: Il empêche les anciennes versions d'un navigateur de mettre en œuvre la requête multimédia.

et: Il combine un type de support avec une certaine fonctionnalité médiatique.

Types CSS Media

Il y a un total de quatre types de médias que nous avons fournis ci-dessous.

tous

Il est applicable à toutes sortes de dispositifs multimédias.

imprimer

Cette requête est spécifiquement utilisée pour les imprimantes.

filtrer

Il est utilisé pour les écrans de différents types de périphériques tels que les ordinateurs, les ordinateurs portables, les téléphones portables, etc.

discours

Cette requête est particulièrement utilisée pour les lecteurs d'écran.

Types de fonctionnalités médiatiques

Nous avons décrit certaines des fonctionnalités des médias ici.

1. n'importe qui

Cette fonctionnalité a été incluse dans les requêtes multimédias niveau 4 et spécifie que si un mécanisme d'entrée donné permet à l'utilisateur de survoler les éléments.

tout-point

Cela a également été inclus dans les requêtes multimédias niveau 4 et indique que si un mécanisme d'entrée donné est un dispositif de pointe et si oui, alors c'est précis?

ratio d'aspect

Cette fonction définit le rapport de la largeur de la fenêtre et de sa hauteur.

couleur

Cette fonctionnalité spécifie les composants des couleurs des appareils de sortie.

Gamme de couleurs

Cela définit la gamme de couleurs qui seront prises en charge par les appareils de sortie.

index de couleur

Il indique le nombre de couleurs qu'un appareil donné peut afficher.

grille

La taille des colonnes et des lignes est spécifiée par la fonctionnalité de grille.

hauteur

Cela définit la hauteur de la fenêtre.

flotter

Pour permettre aux utilisateurs de survoler les éléments HTML, la fonction de survol est utilisé.

couleur inversée

Cela spécifie si le périphérique de sortie inverse ou non les couleurs.

niveau léger

Comme son nom l'indique, il définit le niveau de lumière.

max-aspect ratio

Le rapport maximum de largeur et de hauteur est spécifié par cette fonctionnalité.

couleur maximale

Le plus grand nombre de bits par unités de couleur des dispositifs de sortie est indiqué par cette fonctionnalité.

max-coulor-index

Cette fonctionnalité indique les couleurs maximales qu'un appareil peut afficher.

hauteur maximum

Cette fonction définit la hauteur maximale du navigateur.

max-monochrome

Le plus grand nombre de bits par unités de couleur d'un outil monochrome est indiqué par cette fonctionnalité.

résolution min

La résolution minimale du périphérique de sortie est spécifiée par la fonctionnalité Min-résolution.

largeur minuscule

Cette fonction définit la largeur minimale du navigateur.

monochrome

Cette fonctionnalité indique le nombre maximum de bits par composante couleur d'un appareil monochrome.

orientation

Il définit si l'orientation de la fenêtre est portrait ou paysage.

bloc de débordement

Il gère les scénarios où le contenu de la page Web déborde de la fenêtre.

débordement

Il gère les scénarios où le contenu de la page Web déborde de la fenêtre à travers l'axe en ligne.

aiguille

Un mécanisme d'entrée fondamental pour les dispositifs de pointage.

résolution

Il indique la résolution de l'appareil (en DPI ou DPCM)

analyse

Il scanne les dispositifs de sortie.

script

Il vérifie si des scripts tels que JavaScript sont disponibles ou non.

mise à jour

Il met à jour les périphériques de sortie rapidement.

largeur

La largeur de la fenêtre est définie par cette fonctionnalité.

Ci-dessous, nous vous avons présenté un exemple afin que vous puissiez comprendre la règle @Media d'une meilleure manière.

Exemple

L'exemple ci-dessous démontre la règle @Media.

Html

Règle CSS @Media

Dans le but de modifier l'apparence d'une page Web basée sur l'appareil, ou les supports qui l'affichent, la règle @Media est utilisée. Cette règle utilise les requêtes multimédias pour effectuer la tâche susmentionnée. Cette règle s'avère très utile lors du développement d'un site Web réactif.

Ici, nous avons défini deux éléments qui sont

et

. Nous appliquerons des règles médiatiques sur ces éléments.

CSS

H1, P
Font-Family: «Times New Roman», Times, Serif;
taille de police: 16px;
Style de police: normal;

Écran @Media et (Min-Width: 720px)
p
Font-Family: Verdana, Genève, Tahoma, Sans-Serif;
taille de police: 25px;
Style de police: italique;

Dans le code ci-dessus, nous avons spécifié que l'en-tête et le paragraphe auront la famille de polices Verdana, une taille de police de 25px et un style de police italique si la largeur d'écran minimale de l'appareil est de 720px ou plus large. Cependant, si la largeur de l'écran est inférieure à 720px, la famille des polices sera du temps nouveau, la taille de la police 16px et le style de police normale.

Sortir

Lorsque la largeur de l'écran est de 720px ou plus large.

Lorsque la largeur de l'écran est inférieure à 720px.

La règle @Media a été mise en œuvre avec succès.

Conclusion

La règle @media est utilisée pour modifier l'apparition d'une page Web basée sur l'appareil, ou un support qui l'affiche. La syntaxe de la règle indique que le type de support doit être défini avec certaines caractéristiques des médias et utiliser certains opérateurs. De plus, il existe quatre types; Tout, écran, imprimé et discours. De plus, il existe de nombreuses fonctionnalités médiatiques telles que la largeur, le monochrome, la hauteur, le bloc de débordement, etc. Ce message explique profondément la règle @Media, ainsi que sa syntaxe, ses types de médias et ses fonctionnalités de médias.