Les unités CSS se divisent en absolues (fixes) et relatives (évolutives en fonction de quelque chose). Bien choisir est essentiel pour des mises en page réactives et accessibles.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Utilisez pour les éléments qui ne doivent pas s'adapter (bordures, petits détails fixes).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em se cumule à travers l'imbrication (un enfant d'enfant se multiplie), ce qui peut devenir problématique. rem référence toujours la racine, donc c'est prévisible — l'option par défaut pour les tailles de police et les espacements. Utilisez em quand vous voulez une taille relative à la police locale (par ex. padding sur un bouton qui s'adapte à son texte).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Utiliser rem pour la typographie respecte les utilisateurs qui ont défini une police par défaut plus grande — un vrai gain en accessibilité que px compromet.
La bonne unité rend les mises en page réactives et accessibles : rem pour la typographie/espacements (prévisible + respecte les paramètres utilisateur), %/vw/vh pour une mise en page fluide, px pour les détails fixes, et em pour une taille relative locale.
Les unités viewport plus récentes (dvh, svh) corrigent aussi les problèmes de hauteur de barre d'adresse sur mobile.