Point de rupture
Un point de rupture est la largeur d'écran à laquelle la mise en page d'un site change pour s'adapter à l'écran. Les points de rupture sont les points d'ancrage du responsive design : en dessous ou au-dessus d'une largeur donnée, une media query applique des styles différents pour que la même page reste lisible sur un téléphone, une tablette et un ordinateur.
Comment fonctionne un point de rupture
Un point de rupture se définit dans une media query, le plus souvent sur la largeur du viewport, par exemple @media (min-width: 768px) { ... }. Le navigateur recalcule la mise en page à chaque franchissement d'un point de rupture, en réorganisant les colonnes, les tailles de police et les espacements.
Les points de rupture courants
La plupart des équipes utilisent un petit ensemble standard plutôt qu'un par appareil.
| Point de rupture | Largeur | S'applique à |
|---|---|---|
| Petit | 480px | Grands téléphones et plus |
| Moyen | 768px | Tablettes et plus |
| Grand | 992px | Ordinateurs portables et plus |
| Très grand | 1280px | Grands écrans |
Contenu d'abord ou appareil d'abord
Les points de rupture basés sur l'appareil ciblent des tailles d'écran connues. Les points de rupture basés sur le contenu sont ajoutés là où la mise en page commence à casser, quel que soit l'appareil. L'approche contenu d'abord vieillit mieux car elle ne court pas après une liste sans fin de nouveaux appareils.
Les points de rupture mobile-first
Une approche mobile-first écrit les styles de base pour les petits écrans, puis utilise des points de rupture min-width pour ajouter de la complexité à mesure que l'écran grandit. Elle produit un CSS plus léger et correspond à l'indexation mobile-first des moteurs, ce qui sert à la fois la performance et le SEO.
Point de rupture ou media query
Les deux sont liés mais différents : une media query est la règle CSS qui applique des styles sous une condition, et un point de rupture est la valeur de largeur précise à laquelle cette règle s'active. Les points de rupture vivent dans les media queries, et les requêtes de conteneur permettent désormais à un composant de définir ses propres points de rupture selon la largeur d'un parent.
Les points de rupture chez BeBranded
Chez BeBranded, nous plaçons les points de rupture là où le contenu en a besoin, pas autour d'appareils arbitraires, pour un site propre du mobile au grand écran. Cela fait partie du savoir-faire responsive de notre travail de design.
FAQ
Qu'est-ce qu'un point de rupture en CSS ?
Quels sont les points de rupture standard ?
De combien de points de rupture ai-je besoin ?
Qu'est-ce qu'un point de rupture basé sur le contenu ?
Quelle différence entre un point de rupture et une media query ?
Quels points de rupture utilise Webflow ?
Outils associés
