CSS-yksiköt jakautuvat absoluuttisiin (kiinteät) ja suhteellisiin (skaalautuvat johonkin). Oikean valinnan tekeminen on avain responsiivisille ja esteettömille asetteluille.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Käytä :ää asioille, joiden ei pitäisi skaalautua (reunat, pienet kiinteät yksityiskohdat).
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 kumuloituu sisäkkäisyyden kautta (lapsen lapsi kertoo arvon), mikä voi kehittyä odottamattomasti. rem viittaa aina juureen, joten se on ennustettava — paras vaihtoehto fonttikooille ja välistykselle. Käytä em:ää silloin, kun haluat koon olevan suhteessa paikalliseen fonttin kokoon (esim. painikkeen täyte, joka skaalautuu tekstin kanssa).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Suhteellisten yksiköiden, erityisesti rem:n, käyttö tekstille kunnioittaa käyttäjiä, jotka asettavat suuremman oletusfontin — oikea esteettömyyden voitto, jonka px rikkoo.
Oikea yksikkö tekee asettelusta responsiivisen ja esteettömän: rem tekstille/välistykselle (ennustettava + kunnioittaa käyttäjän asetuksia), %/vw/vh nestemäiselle asettelulle, px kiinteille yksityiskohdille ja em paikallisesti suhteelliselle mitoitukselle.
Uudemmat näkymäikkuna-yksiköt (dvh, svh) korjaavat myös mobiililaitteen osoiterivin korkeusongelmia.