A CSS egységek abszolút (fix) és relatív (valamivel skálázott) kategóriákra oszlanak. A helyes választás elengedhetetlen a reszponzív és akadálymentes elrendezéshez.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Use for things that shouldn't scale (borders, small fixed details). Használjon -et azokhoz, amelyek nem skálázódnak (szegélyek, kis rögzített részletek).
pxpxfont-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) */
Az em összeadódik a beágyazáson keresztül (egy gyermek gyermeke szorzódik), ami váratlanul nőhet. Az rem mindig a gyökérre hivatkozik, így kiszámítható — az alapértelmezett választás a betűméretre és a térközre. Használjon em-et, ha szeretné, hogy a méretezés a helyi betűtípushoz képest relatív legyen (pl. egy gomb kitöltése, amely a szövegével skálázódik).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
A rem használata a típushoz tiszteletben tartja azokat a felhasználókat, akik nagyobb alapértelmezett betűméretet állítottak be — valódi akadálymentesítési nyereség, amelyet a px megtöri.
A helyes egység reszponzívvá és akadálymentessé teszi az elrendezést: rem típus/térközre (kiszámítható + tiszteletben tartja a felhasználói beállításokat), %/vw/vh folyékony elrendezésre, px rögzített részletekre, és em helyi-relatív méretezésre.
Az újabb viewport egységek (dvh, svh) az okostelefon címsáv magasságával kapcsolatos problémákat is megoldják.