Un même fichier CSS doit habiller un téléphone tenu à la verticale et un moniteur de bureau, sans jamais savoir à l'avance lequel des deux affichera la page. C'est le problème que la media query a été inventée pour résoudre : elle laisse une partie du style s'activer ou se désactiver selon les caractéristiques de l'écran qui affiche la page, en premier lieu sa largeur.
Avant les media queries, un site avait le choix entre un unique gabarit imposé à toutes les tailles, ou plusieurs feuilles de style séparées à maintenir en parallèle. Une seule règle CSS a remplacé les deux : c'est le point de départ historique de tout ce qu'on appelle aujourd'hui le responsive design.
Définition
Une media query est une condition écrite avec la règle at-rule @media : le bloc de CSS qu'elle contient ne s'applique que si la condition est vraie. La condition la plus courante porte sur la largeur de la fenêtre, mais elle peut aussi porter sur l'orientation de l'écran, sa capacité à recevoir un survol de souris, ou la préférence de couleur choisie dans le système.
Syntaxe et opérateurs
La forme la plus utilisée compare la largeur de la fenêtre à un seuil avec min-width ou max-width. Plusieurs conditions se combinent avec and, et plusieurs media queries indépendantes se combinent avec une virgule, qui joue le rôle d'un or.
.carte {
display: block;
}
@media (min-width: 768px) {
.carte {
display: flex;
gap: 16px;
}
}
@media (min-width: 600px) and (max-width: 900px) {
.carte {
padding: 12px;
}
}Le style de base, écrit hors de toute media query, s'applique à tous les écrans. Le bloc placé dans @media (min-width: 768px) vient ensuite le compléter ou le remplacer, mais seulement à partir de 768 pixels de large : c'est la logique Mobile first, où l'on part du plus simple pour ajouter en montant en largeur plutôt que l'inverse.
Ce que les media queries peuvent tester
La largeur n'est que la première des conditions disponibles. Le tableau ci-dessous regroupe les media features les plus employées en pratique, avant même d'aller chercher des cas plus exotiques.
| Condition | Ce qu'elle détecte |
|---|---|
min-width / max-width | La largeur de la fenêtre, pour caler un Breakpoint |
orientation | Portrait ou paysage, utile sur tablette |
hover | Un pointeur capable de survoler existe ou non (souris contre doigt) |
prefers-color-scheme | Le mode sombre choisi dans le système |
print | La page est en cours d'impression plutôt qu'affichée à l'écran |
Le piège de l'unité et du chevauchement
Deux media queries qui se chevauchent, l'une avec min-width: 600px et l'autre avec min-width: 900px, s'appliquent toutes les deux au-delà de 900 pixels. Si les deux définissent la même propriété, c'est l'ordre d'écriture dans le fichier qui décide laquelle gagne, exactement comme pour deux règles CSS classiques : la spécificité d'une media query n'entre pas en jeu, seul l'ordre du fichier compte.
min-width: 1200px placée avant celle à min-width: 768px peut se faire écraser par cette dernière alors qu'elle semblait plus spécifique, simplement parce qu'elle arrive plus tôt dans le fichier.Media query et unités fluides
Les media queries restent indispensables, mais elles ne sont plus le seul outil du responsive design. Des propriétés comme clamp() font varier une taille en continu sans déclencher de saut brutal à un seuil précis, et la Container query permet de réagir à la largeur d'un bloc parent plutôt qu'à celle de la fenêtre entière. Les media queries restent le bon choix pour tout ce qui dépend réellement de l'écran : orientation, préférence de couleur, ou impression. Notre formation HTML et CSS construit une mise en page responsive complète étape par étape, du premier breakpoint jusqu'aux unités fluides.
Questions fréquentes
em dans une media query ?Les deux fonctionnent, mais em suit la taille de police que l'utilisateur a réglée dans son navigateur alors que px reste fixe. Une media query en em change de seuil si quelqu'un a agrandi le texte par défaut, ce qui rapproche le comportement du site de ce que cette personne attend réellement.
Oui, largement. L'orientation, la capacité de survol, la préférence de couleur ou même le fait d'être en cours d'impression sont des conditions tout aussi valables, chacune écrite avec sa propre media feature entre parenthèses après @media.
La cause la plus fréquente est l'absence de la balise meta viewport dans le HTML. Sans elle, un téléphone affiche la page à l'échelle d'un écran de bureau puis la réduit visuellement, si bien que les media queries basées sur la largeur ne se déclenchent jamais comme prévu.