CSS vienetai skirstomi į absoliučius (fiksuotus) ir santykinius (keičiamis kartu su kuo nors). Teisingas pasirinkimas yra svarbus tinklalapiams reaguojantiems ir prieinamiems.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Naudok dalykams, kurie neturėtų keistis (kraštinės, maži fiksuoti detalės).
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 susumuoja per lizdus (vaiko vaikas padaugina), o tai gali sukelti netikėtus rezultatus. rem visada sako šaknį, todėl jis nuspėjamas — standartinis pasirinkimas šriftų dydžiams ir tarpams. Naudok em kai norėtum dydžio santykinio su vietine šrifto dydžiu (pvz., mygtuko užpildas, kuris keičiasi su tekstu).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Naudodamas rem tekstui, tu gerbingas naudotojams, kurie nustato didesnę numatytąją šriftą — tikras prieinamumo privalumas, kurį px sugadina.
Teisingas vienetas daro maketus tinklalapiams reaguojančiais ir prieinamais: rem tekstui/tarpams (nuspėjamas + gerbia naudotojo nustatymus), %/vw/vh skysčiui maketui, px fiksuotiems detalėms, ir em vietiniam santykiam dydžiui.
Naujesni aprašymo vienetai (dvh, svh) taip pat taisą mobiliojo adreso juostos aukščio problemas.