Breakpoints

Definition

Points de rupture dans les media queries où le layout change pour s'adapter à la taille de l'écran. Les breakpoints modernes sont basés sur le contenu plutôt que sur des appareils spécifiques.

Analogie

Comme les vitesses d'une boîte de transmission : on passe à la vitesse supérieure quand le régime l'exige.

Exemple de code

:root {
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
}
@media (min-width: 768px) {
  .sidebar { display: block; }
}

Cas d'usage

Adapter les layouts aux différentes tailles d'écran dans une approche mobile-first.

Anti-pattern

Termes lies