Konwerter Jednostek CSS

Dokumentacja

Jednostki CSS

CSS oferuje zarówno jednostki bezwzględne, jak i względne. Jednostki bezwzględne, takie jak px, są stałe niezależnie od kontekstu. Jednostki względne, takie jak rem, em i vw, skalują się na podstawie odniesienia — niezbędne dla responsywnych i dostępnych układów.

px, rem, em, vw

px (piksele) — jednostka bezwzględna. 1px to jeden piksel niezależny od urządzenia. Używaj do obramowań, cieni i elementów, które nie powinny skalować się wraz z rozmiarem czcionki.

rem (root em) — względny do rozmiaru czcionki elementu głównego (html). Domyślny rozmiar główny w przeglądarce to 16px. Preferowany dla rozmiarów czcionki i odstępów, ponieważ respektuje ustawienia przeglądarki użytkownika.

em — względny do rozmiaru czcionki elementu nadrzędnego. Może się kumulować w elementach zagnieżdżonych. Przydatny dla paddingów i marginesów, które powinny skalować się z własnym rozmiarem czcionki elementu.

vw (szerokość viewport) — 1vw = 1% szerokości viewport. Idealny dla płynnej typografii i układów pełnej szerokości dostosowujących się do rozmiaru ekranu.

Popularne konwersje px na rem

Przy domyślnej podstawie przeglądarki 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Dla jednostek viewport na projekcie 1440px: 14.4px = 1vw, 72px = 5vw.

Dlaczego rem jest preferowany dla dostępności

Używanie rem dla rozmiarów czcionek respektuje preferencje rozmiaru czcionki przeglądarki użytkownika. Gdy użytkownik ustawi przeglądarkę na 20px zamiast domyślnych 16px, layouty oparte na rem skalują się proporcjonalnie, podczas gdy layouty oparte na px pozostają stałe. WCAG 1.4.4 (Zmiana rozmiaru tekstu) wymaga, aby tekst mógł być powiększony do 200% bez utraty treści lub funkcjonalności — jednostki rem naturalnie spełniają ten wymóg.

Prywatność

Wszystkie konwersje działają 100% w twojej przeglądarce. Żadne dane nie są wysyłane na serwer.