@media Requête
Considérons l'utilisation réelle de toute la fonctionnalité @media
.
@media <media_type> <operator> (<media_feature>) {/* CSS rules */}
<media_type>
La valeur la plus typique du type de média est screen
, car généralement, nous créons des pages web pour des appareils avec des écrans. Voyons comment l'utiliser :
@media screen and (min-width: 768px) {.container {background-color: purple;}}
Avec l'aide de cette règle, nous avons indiqué au navigateur que si l'appareil de l'utilisateur a un écran et que sa largeur est de 768px ou plus, alors l'élément avec le nom de classe container
a la propriété background-color
avec la valeur purple
.
Nous spécifions la largeur de l'écran pour laquelle nous voulons définir certaines règles css. Considérons les exemples suivants :
/* 1st example */@media screen and (max-width: 1200px) {.container {color: aliceblue;}}/* 2nd example */@media screen and (min-width: 1680px) {.container {color: gainsboro;}}
Dans le premier exemple, nous avons indiqué au navigateur que pour tous les appareils avec une largeur d'écran inférieure ou égale à 1200px, appliquer la propriété color
avec la valeur aliceblue
à l'élément avec le nom de classe container
.
Dans le deuxième exemple, nous avons informé le navigateur que si la largeur de l'écran de tout appareil dépasse ou est égale à 1680px, la propriété color
avec la valeur gainsboro
doit être appliquée à l'élément avec le nom de classe container
.
Les opérateurs sont facultatifs et sont spécifiés entre le type de média et la caractéristique de média.
and
indique au navigateur que toutes les caractéristiques présentées doivent être satisfaites.
@media screen and (min-width: 380px) and (max-width: 840px) {.link {text-decoration: overline;}}
Cette règle indique au navigateur que l'élément avec le nom de classe link
doit avoir la propriété text-decoration
avec la valeur overline
uniquement si l'utilisateur a un appareil avec un écran ET que la largeur de l'écran est égale ou supérieure à 380px ET que la largeur de l'écran est égale ou inférieure à 840px.
En utilisant l'opérateur ,
, nous pouvons indiquer un groupe d'expressions qui, si l'une d'elles est satisfaite, déclenchera l'exécution d'une requête média.
@media screen and (min-width: 960px), (max-width: 540px) {.link {text-decoration: overline;}}
Avec l'aide de cette règle, nous avons indiqué au navigateur que l'élément avec le nom de classe link
doit avoir la propriété text-decoration
avec la valeur overline
si la largeur de l'écran de l'utilisateur est supérieure à 960px ou égale à 960px OU si la largeur de l'écran de l'utilisateur est inférieure à 540px ou égale à 540px.
Merci pour vos commentaires !