Points de rupture
Les points de rupture sont les largeurs d’écran à partir desquelles la mise en page change. Cauri en définit six, du téléphone au grand écran, et les applique en mobile d’abord.
Cauri applique une approche mobile d’abord : une classe sans suffixe vaut pour toutes les largeurs, et une classe avec suffixe (md, lg…) s’applique à partir de cette largeur et au-delà. Pour obtenir deux colonnes sur tablette et une seule sur téléphone, écrivez donc col-12 col-md-6, et non l’inverse.
Le suffixe se place entre le nom de la classe et sa valeur : col-md-6, d-lg-none, p-xl-4, order-sm-first… Les mêmes six noms servent à la grille, aux conteneurs, à l’affichage et à la plupart des utilitaires.
Les six points de rupture
La largeur indiquée est un minimum : la règle s’applique dès que la fenêtre atteint cette valeur. Le premier palier (xs) n’a pas de suffixe.
| Nom | Suffixe | Largeur minimale | Appareil typique | Largeur du conteneur |
|---|---|---|---|---|
| Très petit | aucun (xs) | 0 | Téléphone en portrait | 100 % |
| Petit | sm | 576 px | Téléphone en paysage | 540 px |
| Moyen | md | 768 px | Tablette | 720 px |
| Grand | lg | 992 px | Petit ordinateur portable | 960 px |
| Très grand | xl | 1 200 px | Ordinateur de bureau | 1 140 px |
| Extra grand | xxl | 1 400 px | Grand écran | 1 320 px |
Une classe, plusieurs largeurs#
Chaque bloc ci-dessous change de largeur selon l’écran : pleine largeur sur téléphone, moitié dès sm, tiers dès md, quart dès lg. Redimensionnez la fenêtre pour voir la grille se réorganiser.
<div class="row g-3">
<div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="bg-body-secondary border p-3">Compte courant</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="bg-body-secondary border p-3">Compte épargne</div></div>
<div class="col-12 col-sm-6 col-md-4 col-lg-3"><div class="bg-body-secondary border p-3">Carte bancaire</div></div>
<div class="col-12 col-sm-6 col-md-12 col-lg-3"><div class="bg-body-secondary border p-3">Prêt en cours</div></div>
</div>Afficher ou masquer selon la largeur#
Les utilitaires d’affichage suivent les mêmes paliers. Voir aussi Affichage.
Écran étroit Ce message n'apparaît qu'en dessous de 768 px.
Écran large Ce message n'apparaît qu'à partir de 768 px.
Très large Celui-ci n'apparaît qu'à partir de 992 px.
<p class="d-md-none mb-2"><span class="badge text-bg-warning">Écran étroit</span> Ce message n'apparaît qu'en dessous de 768 px.</p>
<p class="d-none d-md-block mb-2"><span class="badge text-bg-success">Écran large</span> Ce message n'apparaît qu'à partir de 768 px.</p>
<p class="d-none d-lg-block mb-0"><span class="badge text-bg-primary">Très large</span> Celui-ci n'apparaît qu'à partir de 992 px.</p>Requêtes média en Sass#
Dans vos feuilles Sass, importez la configuration (@import "config") pour utiliser les mixins de Cauri. Ils lisent la liste $grid-breakpoints et évitent de recopier les valeurs.
// À partir de md (768 px) et au-delà
@include media-breakpoint-up(md) {
.resume-compte { display: flex; }
}
// Jusqu'à md exclu (au plus 767,98 px)
@include media-breakpoint-down(md) {
.resume-compte { display: block; }
}
// Uniquement entre md (inclus) et xl (exclu)
@include media-breakpoint-between(md, xl) {
.resume-compte { gap: 1rem; }
}
// Uniquement le palier md
@include media-breakpoint-only(md) {
.resume-compte { gap: 2rem; }
}Requêtes média en CSS#
Les requêtes média compilées utilisent min-width pour monter en gamme et max-width avec une décimale (767.98px) pour descendre, afin d’éviter qu’un palier chevauche le suivant sur les écrans à fraction de pixel.
/* Montée en gamme : md et au-delà */
@media (min-width: 768px) { … }
/* Descente : sous md */
@media (max-width: 767.98px) { … }
/* Uniquement md */
@media (min-width: 768px) and (max-width: 991.98px) { … }Variables et mixins
| Nom | Type | Rôle |
|---|---|---|
$grid-breakpoints | Variable Sass (liste) | Noms et largeurs minimales des six paliers (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1400px). |
--bs-breakpoint-xs à --bs-breakpoint-xxl | Variables CSS | Largeur de chaque palier, disponible dans :root. Utilisable en JavaScript ou dans calc(), mais pas à l’intérieur d’une requête média. |
media-breakpoint-up($nom) | Mixin | Applique le contenu à partir du palier indiqué. |
media-breakpoint-down($nom) | Mixin | Applique le contenu en dessous du palier indiqué (palier exclu). |
media-breakpoint-between($bas, $haut) | Mixin | Applique le contenu du palier $bas (inclus) jusqu’au palier $haut (exclu). |
media-breakpoint-only($nom) | Mixin | Applique le contenu uniquement dans le palier indiqué. |
Bonnes pratiques
À faire
- Concevez d’abord pour le téléphone, puis ajoutez des classes
md,lg… pour enrichir la mise en page. - Testez vos écrans aux largeurs limites : 575, 576, 767, 768, 991 et 992 px.
- Réutilisez les mixins Sass plutôt que de recopier les valeurs en pixels.
À éviter
- N’ajoutez pas une classe par palier quand une seule suffit :
col-12 col-md-6couvre déjàsm. - Ne masquez pas un contenu essentiel sur téléphone avec
d-none: réorganisez-le plutôt.
Accessibilité
- Un contenu masqué avec
d-noneest retiré aussi pour les lecteurs d’écran : ne l’utilisez que si l’information est disponible autrement. - Vérifiez que l’ordre de lecture reste logique quand les colonnes passent les unes sous les autres.