Breakpoints CSS
Les media queries ont montré comment @media s’active. Les images responsive ont montré comment les visuels remplissent les emplacements que ces queries créent. Les breakpoints, c’est le plan : une courte liste de largeurs où la stratégie de layout change — colonnes, navigation, espacements — nommée une fois et réutilisée pour que tout le site avance au même rythme.
Boîte à outils breakpoints
📊 Breakpoints en un coup d’œil
| Élément | Rôle au quotidien |
|---|---|
| Breakpoint | Largeur prévue où les règles de layout changent |
| Choix guidé par le contenu | Choisir là où le design se sent serré ou vide — pas les références de téléphones |
Paliers nommés (sm, md, lg…) |
Même token partout ; audits et travail d’équipe plus simples |
| Échelle mobile-first | Base = étroit ; les paliers min-width ajoutent des améliorations |
| Fluide entre les paliers | %, rem, Flex/Grid avant d’ajouter une nouvelle query |
| Jeu documenté | Une courte liste en commentaires ou tokens — pas vingt valeurs isolées |
Un breakpoint, ce n’est pas « l’iPhone ». C’est « quand cette barre latérale ne tient plus à côté de l’article » ou « quand la nav peut passer en ligne ». Mesurez le contenu, puis écrivez un palier partagé.
Le contenu d’abord — pas un catalogue d’appareils
Redimensionnez la fenêtre jusqu’à ce que quelque chose casse : lignes trop longues, cartes écrasées, menu hamburger alors qu’il y a de la place. Notez cette largeur en rem (ou em). Ce candidat vaut mieux qu’un tableau marketing de pixels de téléphones.
/* Break when article + sidebar need two columns (~48rem content width) */
@media (min-width: 48rem) {
.layout {
display: grid;
grid-template-columns: 1fr 16rem;
gap: 1.5rem;
}
}
Les listes pixel par pixel par appareil vieillissent mal — de nouveaux téléphones arrivent chaque année. Quelques paliers guidés par le contenu restent utiles plus longtemps et gardent la feuille de style lisible.
Nommer les paliers — réutiliser les mêmes largeurs
Deux à quatre paliers suffisent pour un site typique. Donnez-leur des noms courts en commentaires (ou des custom properties qui portent les valeurs de largeur). Chaque composant qui « démarre le layout large » doit utiliser le même nombre — pas 720px dans l’en-tête et 768px dans la grille.
:root {
--bp-md: 40rem;
--bp-lg: 64rem;
}
/* Usage still needs a literal in @media in classic CSS —
keep tokens and queries in sync, or use a preprocessor/build step. */
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
En CSS classique, @media ne peut pas lire les custom properties comme condition de query partout comme on le souhaiterait — traitez donc les tokens :root comme documentation et aide pour JS/outillage, et gardez les littéraux correspondants alignés. L’habitude qui compte : une échelle partagée, pas des largeurs au hasard par fichier.
Échelle mobile-first
Écrivez les défauts étroits sans queries. Chaque palier min-width ajoute des colonnes, une typo plus grande ou une nav horizontale. N’écrivez pas toute la page à chaque palier — changez une couche claire.
.nav {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.card-grid {
display: grid;
grid-template-columns: 1fr;
gap: 1rem;
}
@media (min-width: 40rem) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 64rem) {
.nav {
flex-direction: row;
align-items: center;
gap: 1.5rem;
}
.card-grid {
grid-template-columns: repeat(3, 1fr);
}
}
Resserrement desktop-first (quand on part du large)
Si le projet livre déjà un layout large, des queries max-width peuvent replier les colonnes sur les viewports plus petits. Restez cohérent : ne mélangez pas min-width et max-width au hasard pour le même composant sans raison.
.sidebar {
width: 18rem;
float: left;
margin-right: 1.5rem;
}
@media (max-width: 39.99rem) {
.sidebar {
float: none;
width: auto;
margin-right: 0;
}
}
Préférez une direction par projet. Media Queries a déjà couvert la syntaxe min-width vs max-width — ici la règle, c’est la stratégie : paliers partagés, même philosophie partout.
Un palier, plusieurs composants
Quand --bp-lg (ou 64rem) s’active, mettez à jour nav, grille et espacements ensemble s’ils appartiennent au même chapitre de layout. Des largeurs « presque pareilles » éparpillées créent des bugs : l’en-tête bascule avant la grille principale.
@media (min-width: 64rem) {
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.main {
display: grid;
grid-template-columns: minmax(0, 1fr) 18rem;
gap: 2rem;
}
}
Fluide d’abord — queries ensuite
Entre les breakpoints, Flex, Grid, % et rem doivent déjà absorber les petits changements de largeur. N’ajoutez une query que lorsqu’un changement structurel est nécessaire (nombre de colonnes, autre pattern de nav). Plus de queries ne signifie pas plus professionnel.
À vous de jouer
- Redimensionnez une page d’entraînement et notez deux largeurs où le layout doit vraiment changer.
- Convertissez ces largeurs en
remet nommez-les (md,lg). - Appliquez les mêmes deux valeurs
min-widthà la grille de cartes et à la nav. - Cherchez dans le CSS d’autres nombres
min-width/max-width— fusionnez les quasi-doublons. - Supprimez une query inutile en améliorant la base fluide (gap,
minmax, retour à la ligne).
Erreurs fréquentes
- Catalogue de chaque largeur de téléphone au lieu des points de tension du contenu
- Douze queries qui se chevauchent avec des pixels légèrement différents
- En-tête qui casse à
768px, main à800px, pied à720px - Sauter le CSS fluide et régler chaque ajustement avec un
@mediade plus - Réapprendre les accolades
@mediaousrcsetici au lieu de planifier l’échelle
Synthèse
- Les breakpoints sont des paliers de layout planifiés — nommez un court jeu et réutilisez-le
- Choisissez les largeurs là où le contenu est sous tension, pas dans les tableaux marketing d’appareils
- Préférez une échelle
min-widthmobile-first ; une direction par projet - Restez fluide entre les paliers ; query seulement pour des changements structurels
- Cela clôt le module Responsive — ensuite : Box Shadow dans Effects & Motion
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut