Les breakpoints sont les largeurs de zone d’affichage auxquelles une mise en page responsive change de structure. Un jeu courant et sûr : environ 640 px pour les grands téléphones, 768 px pour les tablettes, 1 024 px pour les petits portables et 1 280 px pour le desktop, écrits en requêtes min-width en rem. Mieux vaut toutefois prendre ce jeu comme point de départ et déplacer les breakpoints là où votre propre contenu commence à mal s’afficher, plutôt que de courir après les tailles d’appareils.
Les breakpoints courants en un coup d’œil
| Plage | Breakpoint typique | Ce qu’on y trouve |
|---|---|---|
| Petits téléphones | styles de base (sans requête) | Téléphones de 320–375 px de large |
| Grands téléphones | 480–640 px | Téléphones de 390–440 px en portrait, téléphones en paysage |
| Tablettes | 768 px | iPad mini et tablettes en portrait |
| Petits portables, tablettes en paysage | 1 024 px | iPad en paysage, portables 13 pouces avec zoom |
| Desktop | 1 280 px | La plupart des écrans de portables et d’ordinateurs de bureau |
| Grand desktop | 1 440–1 536 px | Grands moniteurs |
Écrivez-les en rem (40rem, 48rem, 64rem, 80rem) pour qu’ils suivent l’utilisateur qui agrandit sa taille de police par défaut.
Les breakpoints des frameworks populaires
| Framework | Breakpoints (min-width) |
|---|---|
| Tailwind CSS v4 | 640, 768, 1024, 1280, 1536 px |
| Bootstrap 5 | 576, 768, 992, 1200, 1400 px |
| Classes de taille de fenêtre Material Design 3 | compact < 600, medium 600–839, expanded 840–1199, large 1200–1599, extra-large ≥ 1600 (dp) |
Ils s’accordent globalement sur la forme : un passage tablette vers 600–768, un passage desktop vers 1 000–1 200, et une ou deux grandes tailles. Détails : breakpoints Tailwind et breakpoints Bootstrap.
Pourquoi les breakpoints calqués sur les appareils vieillissent mal
On est tenté de placer les breakpoints sur les largeurs exactes des appareils : 375 pour un iPhone, 390 pour un plus récent, 414 pour un modèle Plus. Le problème, c’est que les appareils changent chaque année. Les iPhone actuels à eux seuls vont de 375 à 440 pixels CSS de large (voir le tableau des tailles d’écran d’iPhone), les téléphones Android ajoutent bien d’autres largeurs, et les pliables comme les fenêtres en écran partagé tombent n’importe où.
Une mise en page qui ne fonctionne qu’à certaines largeurs d’appareils cassera entre elles. Les breakpoints doivent marquer les endroits où la mise en page doit changer, et elle doit rester fluide entre deux.
Choisir ses breakpoints à partir du contenu
- Construisez d’abord la mise en page la plus étroite, vers 320 px.
- Élargissez lentement la zone d’affichage dans le mode Responsive des DevTools de Chrome.
- Arrêtez-vous quand le design commence à se dégrader : lignes trop longues, cartes étirées, place pour une deuxième colonne, ou navigation qui tiendrait sur une ligne.
- Ajoutez un breakpoint à cette largeur, arrondi à une valeur en rem raisonnable.
- Recommencez jusqu’à la mise en page la plus large que vous prenez en charge.
On aboutit en général à trois à cinq breakpoints. Au-delà de six, certains corrigent sans doute des problèmes de composants qu’une container query ou une technique fluide réglerait mieux.
Moins de breakpoints grâce aux techniques fluides
Le CSS moderne rend beaucoup de breakpoints inutiles :
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr))ajoute et retire des colonnes automatiquement.flex-wrap: wrapavec unflex-basisfait passer les éléments à la ligne quand la place manque.clamp()fait varier tailles de police et espacements en douceur :font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem).width: min(100% - 2rem, 70rem)crée en une ligne un conteneur avec marges latérales et largeur maximale.
Gardez les breakpoints pour les changements de structure : style de navigation, nombre de colonnes de la page, position de la barre latérale.
Breakpoints et tablettes
C’est sur tablette que les choix de breakpoints se voient le plus. Un iPad en portrait mesure de 744 à 1 032 px de large selon le modèle : il peut donc tomber d’un côté ou de l’autre de 768 ou de 1 024. La rotation le fait ensuite franchir un autre breakpoint. Testez les tablettes dans les deux orientations, et rappelez-vous que Safari sur iPad demande généralement la version desktop. Plus d’informations dans comment afficher un site comme sur iPad dans Chrome.
Tester ses breakpoints
- Activez Show media queries dans la barre d’appareils des DevTools pour voir chaque breakpoint sous forme de barre ; cliquez sur une barre pour y aller.
- Testez chaque breakpoint à sa largeur exacte et 1 px en dessous.
- Vérifiez des téléphones et tablettes précis, pas seulement des largeurs. Mobile View Extension et ses préréglages d’appareils est le moyen le plus rapide de parcourir des pages à plusieurs tailles.
La méthode complète est dans comment tester un site responsive.
Questions fréquentes
Quels sont les breakpoints standard en responsive design ?
Il n’existe pas de standard officiel. Les valeurs courantes sont 640, 768, 1 024 et 1 280 px (Tailwind) ou 576, 768, 992, 1 200 et 1 400 px (Bootstrap). Choisissez un jeu et utilisez-le de façon cohérente.
Quel breakpoint utiliser pour le mobile ?
En CSS mobile first, les téléphones n’ont pas besoin de breakpoint : ils reçoivent les styles de base. Le premier breakpoint, généralement entre 480 et 640 px, marque l’endroit où la mise en page peut commencer à utiliser plus d’espace.
Combien de breakpoints un site doit-il avoir ?
Trois à cinq, en général. Utilisez des mises en page fluides entre eux, et n’ajoutez un breakpoint que là où le contenu a besoin d’un changement de structure.