Tailles fluides
Donne à la surface une largeur fluide avec width, max-width et margin auto.
Objectifs de la leçon
- Combiner width et max-width
- Centrer un bloc avec les marges automatiques
- Éviter le débordement horizontal
Comprendre le principe
À la fin de cette leçon, tu sauras combiner width et max-width.
À la fin de cette leçon, tu sauras centrer un bloc avec les marges automatiques.
À la fin de cette leçon, tu sauras éviter le débordement horizontal.
Conteneur fluide
Le bloc conserve une marge sur petit écran et ne dépasse jamais 70rem.
La largeur fluide évite une valeur unique pour tous les écrans.
La limite protège la lisibilité.
Pourquoi éviter : Largeur rigide
Le bloc déborde sur tous les écrans plus étroits que 1100 pixels.
Une interface responsive commence par des dimensions flexibles, avant toute media query.
Vocabulaire lié
- taille fluide — Dimension qui s'adapte à l'espace disponible.
- max-width — Limite supérieure d'une largeur.
- margin-inline — Marges sur l'axe horizontal selon le sens d'écriture.
Validation
- Je peux expliquer : Une interface responsive commence par des dimensions flexibles, avant toute media query.
- Je peux combiner width et max-width.
- Je peux centrer un bloc avec les marges automatiques.