# Media query

> Règle CSS conditionnelle qui applique un bloc de styles uniquement lorsque certaines caractéristiques de l'écran ou de l'appareil sont vérifiées.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/media-query/

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.