Unités relatives

Pour un design adaptable, préferer :

• rem
• %
• vw / vh

h1 { font-size: 2rem; }
.container { width: 90%; }
.hero { min-height: 70vh; }

Eviter de tout figer en pixels.

Les unités relatives permettent au layout de mieux s'adapter aux différentes tailles d'écran et aux préférences utilisateur.

A retenir

rem est souvent ideal pour la typographie, % pour des largeurs fluides, vh/vw pour certaines sections plein ecran.

Garde aussi une base en pixels pour quelques limites utiles (par exemple une bordure fine ou une largeur maximale).

Mini pratique

Convertis un bloc en pixels vers des unites relatives, puis observe la difference en redimensionnant la fenetre.

Compare ensuite avec un zoom navigateur a 125% ou 150% pour verifier la robustesse de ton choix d'unites.

Erreurs fréquentes

• appliquer des valeurs sans vérifier l'impact sur mobile
• surcharger la feuille de style au lieu de simplifier les sélecteurs
• corriger un symptôme visuel sans comprendre la cause (cascade, flux ou dimensions)

Checklist rapide

• la règle est-elle lisible et cohérente avec le reste du module ?
• le rendu reste-t-il correct sur petit écran ?
• la solution est-elle maintenable sans !important ?

Mini défi

Reprends l'exemple de cette leçon, retire une règle inutile, et conserve exactement le même rendu visuel.