Przelicznik PX na REM
Zamieniaj piksele CSS i rem, używając rozmiaru czcionki bazowej.
REM
REM: 1,5 rem
- Punkty
- 18 pt
- Procent rozmiaru bazowego
- 150 %
Jak to działa
Jeden rem to rozmiar czcionki elementu głównego html, w przeglądarkach domyślnie 16 px. Podzielenie wartości w pikselach przez rozmiar bazowy daje rem; pomnożenie rem przez rozmiar bazowy daje piksele.
Em działa podobnie, ale jest względny wobec rozmiaru czcionki elementu nadrzędnego, więc równa się rem tylko wtedy, gdy element nadrzędny używa rozmiaru bazowego.
W CSS 1 px jest zdefiniowany jako 1/96 cala, a 1 pt jako 1/72 cala, więc 1 px = 0.75 pt.
Wzór
rem = px ÷ rozmiar bazowy px = rem × rozmiar bazowy pt = px × 0.75
Przykład krok po kroku
Przy domyślnym rozmiarze bazowym 16 px, 24 px to 24 ÷ 16 = 1.5 rem, czyli 18 pt i 150% rozmiaru bazowego.
Najczęstsze pytania
Po co używać rem zamiast px?
Wartości w rem skalują się, gdy użytkownik zmienia domyślny rozmiar czcionki w przeglądarce, co wspiera dostępność.
Czym różni się rem od em?
Rem jest względny wobec elementu głównego; em jest względny wobec elementu nadrzędnego, więc zagnieżdżone wartości em się sumują.