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.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Folosește pentru lucruri care nu ar trebui să se scaleze (margini, mici detalii fixe).
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 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).
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ă.
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ă.
O bibliotecă de întrebări de interviu IT cu răspunsuri detaliate — de la Junior la Senior.
Donează