Przelicznik PX na REM

Przelicznik PX na REM zamienia wartości pikselowe na jednostki rem lub em — i odwrotnie — korzystając z bazowego rozmiaru czcionki używanego w projekcie. Wklej pojedynczą wartość albo całą skalę typograficzną, aby otrzymać przeliczone liczby, gotowy do skopiowania blok CSS z oryginalnymi wartościami pikselowymi zachowanymi w komentarzach, linijkę renderującą każdy rozmiar w rzeczywistej skali oraz podgląd reakcji wartości rem na zwiększenie rozmiaru czcionki w przeglądarce przez odwiedzającego.

Wzór przeliczania PX na REM

Przeliczanie między pikselami a rem wymaga tylko jednego dzielenia — jedyną rzeczą, którą trzeba znać, jest bazowy rozmiar czcionki dokumentu.

Przy domyślnym bazowym rozmiarze przeglądarki wynoszącym 16 px otrzymujemy 24px ÷ 16 = 1.5rem oraz 1.5rem × 16 = 24px. Jeśli arkusz stylów ustawia html { font-size: 62.5%; }, bazowy rozmiar wynosi 10 px, a te same 24 px to 2.4rem.

Tabela przeliczeń PX na REM (bazowy rozmiar 16px)

rem a em: dlaczego zagnieżdżanie zmienia wszystko

rem jest mierzony względem elementu głównego (html), więc oznacza to samo w każdym miejscu dokumentu. em jest mierzony względem obliczonego rozmiaru czcionki elementu nadrzędnego, dlatego identyczne wartości em kumulują się przy zagnieżdżaniu. Ten diagram pokazuje ten sam mnożnik 1.5 zastosowany na trzech poziomach zagnieżdżenia, zaczynając od bazowego rozmiaru 16 px:

Praktyczna zasada, którą stosuje większość zespołów: używaj rem dla rozmiarów czcionki, odstępów układu i punktów przełamania; używaj em świadomie dla elementów, które powinny skalować się wraz z własnym komponentem, takich jak padding wewnątrz przycisku lub rozmiar ikony umieszczonej obok tekstu.

Dlaczego używać rem zamiast px?

• Dostępność. Odwiedzający, który ustawi domyślny rozmiar czcionki przeglądarki na 20 px, zobaczy proporcjonalne powiększenie każdego rozmiaru opartego na rem. Rozmiary zapisane na sztywno w px całkowicie ignorują tę preferencję.
• Jedno pokrętło globalnego skalowania. Zmień bazowy rozmiar czcionki w zapytaniu medialnym, a cała skala typograficzna i rytm odstępów przesuną się razem — bez nadpisywania ustawień każdego komponentu.
• Spójny rytm odstępów. Wyrażanie paddingu i marginesów w rem wiąże pionowy rytm ze skalą typograficzną, zamiast pozwalać tym elementom się rozjeżdżać.
• Przyjazne tokenom projektowym. Nowoczesne systemy projektowe, a także domyślna skala Tailwind, publikują rozmiary w rem, więc przeliczenie istniejących wartości px ułatwia przekazanie projektu.

Sztuczka z bazowym rozmiarem czcionki 62.5%

Wiele zespołów dodaje tę regułę, aby 1rem równał się wygodnym 10 px, co upraszcza przeliczanie w pamięci:

html { font-size: 62.5%; }  /* 16px × 0.625 = 10px */
body { font-size: 1.6rem; } /* z powrotem do czytelnych 16px */

.card-title { font-size: 2.4rem; } /* 24px */
.card-body  { font-size: 1.4rem; } /* 14px */

Wartość 62.5% jest procentem domyślnego rozmiaru przeglądarki, a nie stałą liczbą pikseli, więc nadal uwzględnia preferencje odwiedzającego dotyczące rozmiaru czcionki. Należy tylko pamiętać o przywróceniu elementu body do około 1.6rem, ponieważ w przeciwnym razie domyślny tekst będzie miał 10 px. Ustaw pole bazowego rozmiaru czcionki powyżej na 10, aby przeliczać wartości zgodnie z tym ustawieniem.

rem w zapytaniach medialnych

W zapytaniu medialnym rem jest obliczany względem początkowego bazowego rozmiaru czcionki przeglądarki — nie względem rozmiaru czcionki elementu html ustawionego w CSS. Dlatego @media (min-width: 48rem) zawsze oznacza 768 px, nawet jeśli arkusz stylów deklaruje html { font-size: 10px }. Dzięki temu punkty przełamania w rem są bezpieczne i przewidywalne; jest to także jedno z niewielu miejsc, w których em i rem zachowują się identycznie.

Kiedy nadal używać px

• Bardzo cienkie obramowania i separatory — obramowanie 1 px powinno pozostać obramowaniem 1 px; skalowanie tworzy rozmyte linie subpikselowe.
• Zasoby o stałym rozmiarze — przesunięcia sprite’ów, precyzyjne przesunięcia cieni i obrazy o znanym rozmiarze naturalnym.
• Canvas i wydruk — gdy rzeczywiście chodzi o pomiar fizyczny lub pomiar w pikselach urządzenia.

Jak korzystać z tego przelicznika

1. Wybierz kierunek: px → rem, rem → px, px → em lub em → px.
2. Wprowadź wartości: jedną liczbę albo całą skalę oddzieloną przecinkami lub spacjami (maksymalnie 20 naraz). Końcowe jednostki, takie jak 24px, są akceptowane i ignorowane.
3. Ustaw bazowy rozmiar czcionki: pozostaw 16 dla domyślnych ustawień przeglądarki albo wybierz chip dla 10 (sztuczka 62.5%), 12, 14, 18 lub 20.
4. Kliknij Przelicz: odczytaj tabelę wyników, linijkę rozmiaru w rzeczywistej skali, podgląd dostępności i blok CSS.
5. Skopiuj CSS: jeden przycisk kopiuje każdą deklarację font-size z oryginalną wartością pikselową zachowaną w komentarzu.

Najczęściej zadawane pytania

Jak przeliczyć px na rem?

Podziel wartość w pikselach przez bazowy rozmiar czcionki. Przy domyślnym bazowym rozmiarze przeglądarki wynoszącym 16 px, 24 px ÷ 16 = 1.5rem. W drugą stronę pomnóż wartość rem przez bazowy rozmiar czcionki: 1.5rem × 16 = 24 px.

Ile px ma 1rem?

1rem jest równy bazowemu rozmiarowi czcionki strony. W każdej głównej przeglądarce domyślnie wynosi on 16 px, więc 1rem to 16 px, chyba że element html lub ustawienia przeglądarki odwiedzającego go zmienią.

Czym różnią się rem i em?

rem zawsze odnosi się do bazowego rozmiaru czcionki elementu html, dlatego 1.5rem ma taki sam rozmiar w dowolnym miejscu dokumentu. em odnosi się do rozmiaru czcionki własnego elementu nadrzędnego, więc w zagnieżdżonych elementach wartości się kumulują: 1.5em wewnątrz kolejnego 1.5em renderuje się jako 2.25-krotność rozmiaru bazowego.

Na czym polega sztuczka z bazowym rozmiarem czcionki 62.5 procent?

Ustawienie html { font-size: 62.5%; } zmienia bazowy rozmiar na 10 px zamiast 16 px, więc 1rem równa się 10 px, a obliczenia w pamięci stają się proste: 24 px to 2.4rem. Skalowanie nadal uwzględnia preferencje odwiedzającego dotyczące rozmiaru czcionki, ponieważ 62.5% jest wartością względną, a nie bezwzględną liczbą pikseli.

Czy do rozmiaru czcionki używać px czy rem?

Używaj rem dla rozmiarów czcionki, odstępów i zapytań medialnych, aby układ powiększał się, gdy odwiedzający zwiększy domyślny rozmiar czcionki w przeglądarce. Zarezerwuj px dla wartości, które nie powinny się skalować, takich jak bardzo cienkie obramowania, jedn pikselowe separatory i niektóre przesunięcia cieni.

Czy wartości rem muszą być zaokrąglone?

Nie. Przeglądarki bez problemu obsługują ułamkowe wartości rem i wewnętrznie obliczają rozmiary subpikselowe. Jeśli wolisz równe liczby, wybierz bazowy rozmiar czcionki, który dzieli skalę bez reszty, na przykład 10 px lub 8 px, albo użyj opcji precyzji dziesiętnej tego przelicznika.

Czy rem działa dla paddingu, marginesu i zapytań medialnych?

Tak. rem jest poprawną jednostką wszędzie tam, gdzie CSS akceptuje długość, także dla paddingu, marginesu, szerokości, gap i border-radius. W zapytaniach medialnych rem jest obliczany względem początkowego bazowego rozmiaru 16 px, a nie niestandardowego rozmiaru czcionki elementu html, więc punkt przełamania 48rem zawsze oznacza 768 px.

Dodatkowe materiały

• Jednostki długości CSS — MDN
• Długości względne względem czcionki — wartości CSS W3C