Jak używać
- Ustaw rozmiar czcionki bazowej, jeśli Twoja witryna go zmienia (na przykład html { font-size: 62.5% } ustawia go na 10px).
- Wpisz wartość w dowolnym polu, aby przeliczyć px na rem lub rem na px. Wybierz em, jeśli chcesz używać jednostki względnej względem elementu nadrzędnego.
- Skorzystaj z tabeli, aby szybko sprawdzić wartości, albo wklej fragment CSS, by jednocześnie przeliczyć wszystkie długości w px i skopiować wynik.
Jak to działa
rem = px ÷ bazowy rozmiar czcionki. Przy domyślnym rozmiarze bazowym 16px, 24px to 1.5rem, a 14px to 0.875rem. em korzysta z tego samego wzoru, ale odnosi się do rozmiaru czcionki elementu nadrzędnego, dlatego wartości em zagnieżdżonych elementów się mnożą. rem pozwala tego uniknąć, bo zawsze odnosi się do elementu głównego.
Stosowanie rem do rozmiarów czcionek i odstępów pozwala powiększać tekst, gdy użytkownik zwiększy domyślny rozmiar czcionki w ustawieniach przeglądarki, co ułatwia korzystanie z witryny osobom słabowidzącym. Wartości są zaokrąglane do czterech miejsc po przecinku.
Konwerter fragmentów kodu zamienia liczby, po których występuje px. Pomija komentarze, url(…) i ciągi ujęte w cudzysłowy, pozostawia wartości 1px, jeśli o to poprosisz (cienkie obramowania zwykle powinny pozostać 1px), zamienia 0px na 0, a domyślnie nie zmienia warunków @media i @container. W zapytaniach o media rem i em zawsze odnoszą się do początkowego rozmiaru czcionki przeglądarki, niezależnie od ustawionego rozmiaru bazowego. Konwerter nie analizuje znaczenia calc() poza zamianą znajdujących się w nim wartości px. Jest to poprawne, ponieważ każda długość jest przeliczana osobno.
Przykłady
Domyślny rozmiar bazowy
Przy rozmiarze bazowym 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Sztuczka z 62.5%
Jeśli w CSS ustawisz html { font-size: 62.5% }, rozmiar bazowy wyniesie 10px, więc 14px = 1.4rem, a 24px = 2.4rem. Ustaw pole rozmiaru czcionki bazowej na 10.
Konwersja komponentu
padding: 24px 16px; border: 1px solid #ddd; zmieni się w padding: 1.5rem 1rem; border: 1px solid #ddd; jeśli opcja „Zachowaj wartości 1px” jest włączona.
Często zadawane pytania
Używać rem czy em?
W większości przypadków używaj rem do rozmiarów czcionek, odstępów i układu, ponieważ działa przewidywalnie w każdym miejscu. Używaj em, gdy element ma skalować się wraz z rozmiarem własnego tekstu, na przykład do określenia odstępu wewnętrznego przycisku.
Dlaczego nie zamieniać wartości w zapytaniach o media na rem?
Możesz, ale w zapytaniu o media 1rem zawsze odpowiada domyślnemu rozmiarowi czcionki przeglądarki (zwykle 16px), a nie rozmiarowi czcionki ustawionemu dla html. Dlatego konwerter domyślnie pomija takie wartości. Wyłącz tę opcję, jeśli i tak dzielisz je przez 16.
Czy rem jest lepsze dla dostępności niż px?
W przypadku rozmiarów czcionek — tak: rem uwzględnia domyślny rozmiar czcionki ustawiony przez użytkownika, a wartości w px go pomijają. Powiększanie strony w przeglądarce działa z obiema jednostkami.
Prywatność
Konwersje i fragment CSS są przetwarzane w przeglądarce i nigdy nie są nigdzie wysyłane.