CSS enote se delijo na absolutne (fiksne) in relativne (spreminjajo se glede na kaj). Pravilna izbira je ključna za odzivne in dostopne postavitve.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Uporabite za stvari, ki se ne bi smele skalirati (robove, majhne fiksne podrobnosti).
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 množeči skozi gnezdenje (otrok otroka se pomnoži), kar se lahko nepričakovano spletiči. rem vedno sklic korena, zato je predvidljiv — standard za velikosti pisav in razporeditev. Uporabite em ko želite, da je velikost relativna glede na lokalno pisavo (npr. razmik gumba, ki se skalira s tekstom).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Uporaba rem za tip spoštuje uporabnike, ki nastavijo večjo privzeto pisavo — pravi dosežek dostopnosti, ki ga px prekine.
Pravilna enota naredi postavitve odzivne in dostopne: rem za tip/razporeditev (predvidljivo + spoštuje nastavitve uporabnika), %/vw/vh za tekoče postavitve, px za fiksne podrobnosti in em za lokalno-relativno velikost.
Novejše enote za viewport (dvh, svh) rešijo tudi težave z višino naslova mobilnega predlagatelja.