Examinons l'utilisation réelle de toute la fonctionnalité @media.

@media <media_type> <operator> (<media_feature>) {
 /* CSS rules */
}

<media_type>

La valeur la plus courante pour le type de média est screen, car en général, les pages web sont conçues pour des appareils dotés d'écrans. Voici comment l'utiliser :

@media screen and (min-width: 768px) {
  .container {
    background-color: purple;
  }
}

Grâce à cette règle, le navigateur applique la propriété container avec la valeur background-color à l'élément portant la classe purple si l'appareil de l'utilisateur possède un écran et que sa largeur est supérieure ou égale à 768px.

On spécifie la largeur d'écran pour laquelle certaines règles CSS doivent être appliquées. Voici quelques exemples :

/* 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, le navigateur applique la propriété color avec la valeur aliceblue à l'élément ayant la classe container pour tout appareil dont la largeur d'écran est inférieure ou égale à 1200px.

Dans le second exemple, le navigateur applique la propriété color avec la valeur gainsboro à l'élément portant la classe container si la largeur d'écran de l'appareil est supérieure ou égale à 1680px.

Les opérateurs sont facultatifs et sont spécifiés entre le type de média et la caractéristique du 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 possède un appareil avec un écran ET que la largeur de l’écran est supérieure ou égale à 380px ET que la largeur de l’écran est inférieure ou égale à 840px.

En utilisant l’opérateur ,, il est possible d’indiquer un groupe d’expressions dont la satisfaction de l’une d’elles déclenchera l’exécution d’une requête média.

@media screen and (min-width: 960px), (max-width: 540px) {
  .link {
    text-decoration: overline;
  }
}

Grâce à cette règle, nous indiquons 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 ou égale à 960px OU si la largeur de l’écran de l’utilisateur est inférieure ou égale à 540px.