L-unitajiet CSS jinqasmu f' assoluti (fissati) u relattivi (iskala b'xi ħaġa). L-għażla t-tajba hija essenzjali għal layouts responsivi u aċċessibbli.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Uża għal affarijiet li m'għandhomx iskala (konfini, dettalji żgħar fissati).
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 taqbil permezz ta' nested (tifel ta' tifel immultiplikat), li jista' jkun inopportun. rem dejjem tirreferi għall-għerq, għalhekk hija predibilita — il-għażla standard għal daqsijiet ta' font u spazjar. Uża em meta trid daqsa relattiva għall-font lokali (pereż. padding ta' buttuna li tiskala mat-test).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
L-użu ta' rem għat-tip jirrisspetta l-utenti li jistabbilixxu font default akbar — vantaġġ ta' aċċessibbiltà reali li px tkisser.
L-unitajiet it-tajba jagħmlu layouts responsivi u aċċessibbli: rem għat-tip/spazjar (prevedibilata + tirrisspetta s-settings tal-utent), %/vw/vh għal layout fluwidu, px għad-dettalji fissati, u em għal daqsa relattiva lokali.
L-unitajiet viewport aktar ġodda (dvh, svh) jissolvun ukoll il-problemi tal-altezza tal-bar tal-indirizz fuq il-mobile.