DevToolPal
PL

Konwerter PX na REM

Przelicza px na rem lub em (i z powrotem) przy dowolnym bazowym rozmiarze czcionki, pokazuje tabelę przeliczeń i od razu zamienia wszystkie wartości px we wklejonym CSS.

Działa lokalnie, nic nie jest wysyłane

Opcje

Kierunek
Jednostka

CSS lub wartości

0 znaków · 0 B

Rezultat

Tutaj pojawi się wynik

Co robi

To narzędzie przelicza długości CSS między pikselami a jednostkami względnymi rem i em. Wpisz jedną wartość, np. 24px, aby otrzymać 1.5rem, wypisz kilka wartości po jednej w wierszu, by przeliczyć je naraz, albo wklej cały arkusz stylów — każda wartość px zostanie zamieniona na miejscu. Tabela pokazuje typowe rozmiary od 1px do 128px dla Twojego rozmiaru bazowego. Nic nie opuszcza przeglądarki.

Jak używać

  1. Wklej CSS albo wpisz wartości po jednej w wierszu. Liczby bez jednostki są traktowane jako px (lub rem/em przy odwrotnym kierunku), a wartość zapisana w drugiej jednostce jest przeliczana w przeciwną stronę.
  2. Ustaw Bazowy rozmiar czcionki. Wszystkie przeglądarki domyślnie używają 16px; niektóre projekty piszą html { font-size: 62.5% }, by 1rem = 10px.
  3. Wybierz Kierunek (px → rem lub rem → px), Jednostkę (rem lub em) i liczbę Miejsc po przecinku.
  4. Opcjonalnie ustaw Zostaw w px wartości mniejsze niż, aby obramowania 1px i inne cienkie linie zostały w px.
  5. Skopiuj wynik przyciskiem nad nim.

Przykład

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Wartości inne niż px, np. procenty, kolory, nazwy plików w url() i klasy w rodzaju .mt-16px, pozostają bez zmian. 0px staje się 0.

px, rem i em

  • px to jednostka bezwzględna — ignoruje preferowany przez czytelnika rozmiar czcionki.
  • rem („root em”) to wielokrotność rozmiaru czcionki elementu html. Jeśli czytelnik ustawi w przeglądarce 20px, 1rem będzie równe 20px i cały układ się przeskaluje.
  • em to wielokrotność rozmiaru czcionki bieżącego elementu. Przydaje się do odstępów, które mają podążać za swoim tekstem, ale zagnieżdżone em się mnożą, dlatego rem jest bezpieczniejszym wyborem domyślnym.

Przeliczane są też zapytania o media: @media (min-width: 768px) zmienia się w 48rem (lub 48em), dzięki czemu punkty przełamania pozostają spójne, gdy czytelnik powiększa tekst. W zapytaniach o media rem i em odnoszą się do domyślnego rozmiaru czcionki przeglądarki, a nie do Twojej reguły html.

FAQ

› Jak przeliczyć px na rem?

Podziel wartość w pikselach przez rozmiar czcionki elementu głównego. Przy domyślnych w przeglądarkach 16px wychodzi 24px ÷ 16 = 1.5rem i 12px ÷ 16 = 0.75rem. W drugą stronę mnożysz: 2rem × 16 = 32px.

› Czym różni się rem od em?

rem odnosi się do rozmiaru czcionki elementu html, więc 1rem ma tę samą wielkość w całej stronie. em odnosi się do rozmiaru czcionki bieżącego elementu (a w samym font-size — rodzica), dlatego przy zagnieżdżaniu wartości się mnożą. Używaj rem do większości rozmiarów, a em tam, gdzie coś ma skalować się z własnym tekstem, np. dopełnienie przycisku.

› Dlaczego rem zamiast px?

Gdy czytelnik zwiększy domyślny rozmiar czcionki w ustawieniach przeglądarki, wymiary w rem rosną razem z nim, a px pozostają bez zmian. rem dba o dostępność układu i pozwala przeskalować cały projekt jedną wartością główną.

› Czy przeliczać obramowania 1px?

Zwykle nie. Linia 0.0625rem przy niektórych powiększeniach może się rozmyć lub zniknąć. Ustaw „Zostaw w px wartości mniejsze niż” na 2px, a obramowania i inne drobne wartości zostaną w px.