Une CSS media query est l'outil responsive le plus fondamental qui soit : elle permet à votre design d'appliquer des styles différents selon la taille de l'écran, l'orientation ou les préférences de l'utilisateur. Un tableau qui déborde sur un téléphone, un bouton démesuré sur un grand écran, une section qui provoque une barre de défilement horizontale — presque tout cela vient de points de rupture absents ou mal pensés. Dans ce guide, je détaille la construction d'une stratégie de breakpoints mobile-first à partir de zéro, les erreurs les plus courantes et les alternatives modernes, avec des exemples concrets.
Comment fonctionne une media query ?
Une media query combine un type de média (généralement screen) et une ou plusieurs conditions. Si la condition est vraie, les règles à l'intérieur s'appliquent ; sinon elles sont ignorées. Les conditions les plus utilisées sont min-width et max-width.
/* S'applique aux écrans de 600px et plus */
@media (min-width: 600px) {
.carte {
display: grid;
grid-template-columns: 1fr 1fr;
}
}Le détail crucial : min-width: 600px signifie « si la largeur est de 600px ou plus ». max-width: 600px signifie « si la largeur est de 600px ou moins ». Confondre les deux est la cause numéro un des bugs responsive.
Pourquoi le mobile-first l'emporte
Il existe deux stratégies : ajouter des règles du petit vers le grand écran (mobile-first, avec min-width) ou écraser des règles du grand vers le petit (desktop-first, avec max-width). Plusieurs raisons concrètes plaident pour le mobile-first :
- Le style par défaut est le plus simple : vous écrivez les styles de base en une seule colonne et n'ajoutez de la complexité qu'à mesure que l'écran grandit.
- Moins de surcharges (overrides) : si vous commencez par
max-width, vous devez sans cesse annuler les styles des grands écrans, ce qui rend le CSS fragile. - Performance : un appareil mobile n'a pas à évaluer des règles desktop qui ne le concernent pas.
En pratique, écrivez votre style de base sans aucune media query, puis ajoutez des blocs min-width pour les écrans plus larges :
/* Mobile : défaut, une seule colonne */
.grille { display: grid; gap: 16px; }
/* Tablette et plus */
@media (min-width: 768px) {
.grille { grid-template-columns: repeat(2, 1fr); }
}
/* Ordinateur de bureau */
@media (min-width: 1024px) {
.grille { grid-template-columns: repeat(3, 1fr); }
}Où placer les points de rupture ?
Une idée fausse répandue consiste à définir les breakpoints selon la largeur en pixels des appareils populaires (iPhone, iPad, etc.). Les modèles changent sans arrêt ; le « standard » d'aujourd'hui est obsolète demain. La bonne approche est de placer un point de rupture là où le contenu casse. Élargissez lentement votre design ; quand les lignes deviennent trop longues à lire ou qu'une carte se comprime de façon disgracieuse, mettez-y un breakpoint.
Un point de départ reste utile. Dans la plupart des projets, ces trois ou quatre plages font l'affaire :
- ~480–600px : transition grand téléphone / petite tablette
- ~768px : tablette, passage d'une disposition empilée à plusieurs colonnes
- ~1024px : petit bureau / tablette en paysage
- ~1280px+ : large bureau, limitation de la largeur du contenu
Ne traitez pas ces valeurs comme sacrées ; ajustez-les selon le contenu réel de votre projet.
px, em, rem : choisir la bonne unité
Utiliser em plutôt que px dans les conditions d'une media query offre un avantage : quand l'utilisateur agrandit la taille de police du navigateur, les breakpoints se mettent aussi à l'échelle, ce qui améliore l'accessibilité. Un em dans une media query est calculé par rapport à la taille de police racine (généralement 16px) ; ainsi 37.5em ≈ 600px.
@media (min-width: 48em) { /* ~768px */
.barre-laterale { position: sticky; top: 0; }
}Règle générale : em est un choix cohérent pour les breakpoints de mise en page, mais px est tout à fait valable aussi. Choisissez un seul standard dans votre équipe et tenez-vous-y.
Les media queries au-delà de la largeur
Les media queries ne concernent pas que la largeur. Quelques usages puissants :
- Orientation :
@media (orientation: landscape)pour une disposition propre au mode paysage. - Mode sombre :
@media (prefers-color-scheme: dark)pour s'adapter au thème du système. - Mouvement réduit :
@media (prefers-reduced-motion: reduce)pour désactiver les animations ; c'est une exigence d'accessibilité. - Type de pointeur :
@media (hover: hover)pour n'appliquer les effets de survol que sur les appareils dotés d'une souris.
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; transition: none !important; }
}L'alternative moderne : les container queries
Les media queries regardent toujours la fenêtre d'affichage (viewport). Mais souvent, ce que vous voulez, c'est qu'un composant s'adapte à la largeur de son propre conteneur. C'est là qu'interviennent les requêtes @container, désormais prises en charge par tous les navigateurs actuels.
.liste { container-type: inline-size; }
@container (min-width: 400px) {
.carte { display: flex; gap: 12px; }
}Le même composant carte peut ainsi s'empiler verticalement dans une barre latérale étroite et s'aligner côte à côte dans une zone principale large — sans toucher aux breakpoints globaux. Les container queries ne remplacent pas les media queries, elles les complètent : media queries pour la mise en page de la page, container queries pour les composants réutilisables, voilà une bonne division du travail.
L'indispensable : la balise meta viewport
Pour que toutes vos media queries fonctionnent correctement sur mobile, la page doit inclure cette ligne dans son <head>. Sans elle, un téléphone rend la page à la largeur d'un bureau puis la réduit, et vos breakpoints ne se déclenchent pas :
<meta name="viewport" content="width=device-width, initial-scale=1">Questions fréquentes
Dois-je utiliser min-width ou max-width ?
Si vous travaillez en mobile-first, appuyez-vous sur min-width : le style de base est mobile et vous ajoutez à mesure que l'écran grandit. Tenez-vous-en à une seule stratégie ; mélanger les deux au hasard mène à des règles contradictoires et à un CSS difficile à déboguer.
Combien de breakpoints utiliser ?
Il n'y a pas de nombre fixe. La plupart des sites fonctionnent très bien avec trois ou quatre. Placez-les là où le contenu casse, pas selon le modèle d'appareil. Un breakpoint inutile ne fait que compliquer la maintenance.
Les container queries vont-elles remplacer les media queries ?
Non, les deux s'utilisent ensemble. Les media queries ont du sens pour la mise en page globale et les seuils généraux, tandis que les container queries conviennent aux composants qui s'adaptent à leur contexte.
Besoin d'une interface responsive ? Je conçois des sites impeccables sur chaque écran grâce à une architecture CSS mobile-first, propre et facile à maintenir. Pour parler de votre projet, contactez-moi.