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.