Jednostki w CSS określają rozmiar elementów, tekstu i odstępów. Dzielą się na bezwzględne, jak px, oraz względne, jak em, rem, %, vw i vh, które dopasowują się do kontekstu lub rozmiaru okna.
Najważniejsze jednostki
-
px: piksel, stały rozmiar, -
em: względem rozmiaru czcionki rodzica, -
rem: względem rozmiaru czcionki elementu głównego (domyślnie 16 px), -
%: względem rodzica, -
vwivh: 1% szerokości i wysokości okna, -
dvh: wysokość widoczna z uwzględnieniem paska przeglądarki na telefonie.
Kiedy której używać?
Rozmiary czcionek i odstępów najlepiej podawać w rem, bo szanują ustawienia użytkownika, który zwiększył tekst w przeglądarce. Piksele stosuj do cienkich ramek i detali, a vh ostrożnie: na telefonach pasek adresu zmienia wysokość okna, więc lepsze bywa dvh.
Dostępność a jednostki
Tekst zapisany w pikselach nie zawsze reaguje na zmianę rozmiaru czcionki w ustawieniach. Wytyczne WCAG wymagają, aby tekst dało się powiększyć do 200% bez utraty treści, więc jednostki względne to rozsądny wybór.