Jednostki CSS dzielą się na absolutne (stałe) i względne (skalowane razem z czymś). Właściwy wybór jest kluczowy dla responsywnych i dostępnych układów.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Używaj dla rzeczy, które nie powinny się skalować (obramowania, małe stałe szczegóły).
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 łączy się przez zagnieżdżanie (dziecko dziecka się mnoży), co może spiralować w nieoczekiwany sposób. rem zawsze odnosi się do root, więc jest przewidywalne — domyślny wybór dla rozmiarów czcionek i odległości. Używaj em gdy chcesz skalowanie względem lokalnej czcionki (np. padding przycisku, który skaluje się wraz z tekstem).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Używanie rem dla typografii szanuje użytkowników, którzy ustawili większy domyślny rozmiar czcionki — rzeczywisty zysk dostępności, który px psuje.
Właściwa jednostka sprawia, że układy są responsywne i dostępne: rem do typografii/odległości (przewidywalny + szanuje ustawienia użytkownika), %/vw/vh do płynnego układu, px do stałych szczegółów i em do skalowania względnego do lokalnego.
Nowsze jednostki viewport (dvh, svh) rozwiązują również problemy z wysokością paska adresu na urządzeniach mobilnych.