Unitățile CSS se împart în absolute (fixe) și relative (se scalează cu ceva). Alegerea bună este esențială pentru layout-uri responsive și accesibile.
Absolute
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Folosește px pentru lucruri care nu ar trebui să se scaleze (margini, mici detalii fixe).
Relative — cele importante
font-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 */
rem vs em — distinția crucială
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 compune prin imbricare (un copil al unui copil se înmulțește), ceea ce poate spirala în mod neașteptat. rem întotdeauna face referință la rădăcină, deci este previzibil — opțiunea standard pentru dimensiuni de font și spațiere. Folosește em când vrei dimensionare relativă la fontul local (ex. padding pe un buton care se scalează cu textul acestuia).
De ce unitățile relative sunt importante pentru accesibilitate
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Folosirea rem pentru tip respectă utilizatorii care setează o dimensiune de font implicit mai mare — un câștig real de accesibilitate pe care px îl strică.
De ce conteaza
Unitatea corectă face layout-urile responsive și accesibile: rem pentru tip/spațiere (previzibil + respectă setările utilizatorului), %/vw/vh pentru layout fluid, px pentru detalii fixe, și em pentru dimensionare relativ local.
Unități viewport mai noi (dvh, svh) rezolvă și problemele cu înălțimea barei de adresă mobilă.