Sans mécanisme conditionnel, une seule feuille de style s’appliquerait identiquement, que la page s’affiche sur un moniteur de bureau ou un téléphone tenu à la verticale. Cette règle introduit justement la possibilité de dire : « applique ce bloc de styles uniquement si telle condition sur l’écran est vraie ».
Une syntaxe simple, des caractéristiques nombreuses
La syntaxe de base combine un type de média, presque toujours screen aujourd’hui, avec une ou plusieurs caractéristiques entre parenthèses, le plus souvent min-width ou max-width. Depuis quelques années, la syntaxe dite « en plage » (@media (400px <= width < 800px)) simplifie l’écriture de conditions à double borne, en évitant l’accumulation de and.
D’autres caractéristiques restent précieuses en dehors de la simple largeur : prefers-color-scheme pour détecter un mode sombre, ou prefers-reduced-motion pour désactiver des animations chez les utilisateurs sensibles au mouvement.
Exemple
@media (max-width: 782px) {
.menu-lateral { display: none; }
}
@media (prefers-color-scheme: dark) {
body { background: #111; color: #eee; }
}
Pièges fréquents
- Le seuil de 782 pixels correspond justement au point où l’administration WordPress elle-même bascule son interface en version tactile simplifiée, une valeur héritée des versions historiques du responsive de wp-admin.
- Une media query ne réagit qu’à la taille de la fenêtre du navigateur, jamais à celle d’un conteneur parent : pour ce dernier cas, ce sont les conteneurs de requête qu’il faut utiliser.