Przelicz piksele na rem z właściwym rozmiarem czcionki elementu głównego

Aby przeliczyć piksele CSS na rem, podziel wartość w pikselach przez rozmiar czcionki elementu głównego: wartość w rem = wartość w px ÷ rozmiar bazowy w px. Przy rozmiarze bazowym 16 px wartość 24 px to 1,5 rem. Przy rozmiarze bazowym 20 px te same 24 px to 1,2 rem.

Narzędzie Konwerter PX na REM wykonuje to dzielenie. Pole rozmiaru bazowego ma początkowo wartość 16, ale narzędzie nie odczytuje Twojego arkusza stylów. Sprawdź podstawę przed przeliczeniem rozmiaru czcionki lub odstępu.

Sprawdź rozmiar czcionki elementu głównego strony

Jeden rem odnosi się do rozmiaru czcionki elementu głównego, zwykle html. Wartość 16 px jest częsta, ale nie uniwersalna: style witryny i preferencje przeglądarki mogą ją zmieniać. MDN wyjaśnia punkt odniesienia jednostki rem.

1. Otwórz stronę projektu w przeglądarce. Sprawdź element html w narzędziach dla programistów.
2. W panelu obliczonych stylów znajdź font-size i zanotuj jego wartość w pikselach. Nie używaj wartości dla body ani dla nagłówka, który chcesz przeliczyć.
3. Możesz też uruchomić getComputedStyle(document.documentElement).fontSize w konsoli na tej samej stronie. Wynik „20px” oznacza, że w przeliczniku należy użyć podstawy 20.
4. Sprawdź wartość ponownie, jeśli reguła responsywna lub ustawienie zmienia rozmiar bazowy. Pomiar opisuje stronę w jej aktualnym stanie.

Ta metoda korzysta z faktycznie zastosowanych stylów, co wyjaśnia Dokumentacja getComputedStyle.

Przelicz i zastosuj wartość

1. Wpisz 24 w polu „Wartość w pikselach CSS”, bez dopisywania px.
2. Wprowadź zmierzoną podstawę, na przykład 16. Musi ona być większa od zera; przeliczana wartość może wynosić zero, ale nie może być ujemna.
3. Uruchom przeliczenie. Narzędzie wyświetli „24px ÷ 16px = 1.5rem”. W deklaracji CSS użyj samego 1.5rem, na przykład „font-size: 1.5rem;”.
4. Sprawdź wynik na swojej stronie. Jeśli rozmiar czcionki elementu głównego wynosi 20 px, użyj wyniku 1.2rem, aby uzyskać 24 px. Pozostawienie 1.5rem dałoby 30 px.

CSS wymaga kropki dziesiętnej: wpisz 1.5rem, nie 1,5rem, nawet jeśli lokalny format liczb używa przecinka. Piksele w tym przeliczeniu to piksele CSS, a nie fizyczne piksele ekranu. Nie stosuj mnożnika zależnego od gęstości pikseli. MDN wyjaśnia tę różnicę.

Poznaj różnicę między rem a em

Jednostki rem pozwalają komponentom korzystać ze wspólnej podstawy. Jednostki em odnoszą się do rozmiaru czcionki elementu, a w deklaracji font-size do rozmiaru czcionki rodzica. Rozmiary tekstu w em mogą więc mnożyć się przy zagnieżdżaniu elementów. Wybierz em, jeśli potrzebujesz takiej zależności od komponentu, albo rem, jeśli potrzebujesz odniesienia do elementu głównego. Moduł CSS Values and Units definiuje te jednostki.

Unikaj błędów podstawy i precyzji

Nie zmieniaj rozmiaru czcionki elementu głównego tylko po to, by uzyskać wygodny wynik: zmienisz też istniejące wymiary wyrażone w rem. Zamiast tego popraw wprowadzoną wartość bazową i przelicz ponownie.

Wynik jest zaokrąglany do maksymalnie sześciu miejsc po przecinku. Na przykład 17 px przy rozmiarze czcionki elementu głównego 18 px daje 0.944444rem. Zbędne zera na końcu są pomijane.

Bardzo mała wartość może zniknąć z wyświetlanego wyniku: 0.000001 px ÷ 16 daje po zaokrągleniu 0rem. Nie oznacza to, że matematyczny iloraz wynosi zero. Sprawdź wynik przed zastąpieniem bardzo małej wartości w CSS. Liczby nieskończone i wyniki poza obsługiwanym zakresem liczbowym są odrzucane.

Sprawdź też zmianę rozmiaru tekstu

Używanie rem nie gwarantuje dostępności. Przetestuj powiększenie do 200%, a także zwiększenie tekstu i preferencje czcionek: nagłówki, przyciski i pola muszą pozostać czytelne i użyteczne. Zwróć uwagę na przycięty lub nakładający się tekst w kontenerach o stałych wymiarach. Wymiar w px nie jest automatycznie niedostępny: powiększenie całej strony również go skaluje. Kryterium WCAG 1.4.4 dotyczy zmiany rozmiaru bez utraty treści lub funkcjonalności, a nie obowiązkowego stosowania konkretnej jednostki.

Najczęstsze pytania

Ile rem to 16 px?

1rem przy rozmiarze czcionki elementu głównego 16 px; 0.8rem przy rozmiarze 20 px. Aby odpowiedzieć, trzeba znać podstawę.

Czy każdą wartość px należy zamienić na rem?

Nie. Wybierz jednostkę zgodnie z oczekiwanym zachowaniem: podążaniem za typografią elementu głównego, typografią komponentu lub zachowaniem długości CSS niezależnej od czcionki.

Dlaczego mój wynik różni się od wyniku przelicznika?

Sprawdź obliczony rozmiar czcionki elementu html, reguły CSS nadpisujące deklarację i zaokrąglenie. Konwerter oblicza wynik wyłącznie na podstawie dwóch podanych wartości.