Przejdź do treści
🛠️
Whiz Tools

Konwerter PX na REM i EM – Darmowy Kalkulator Jednostek CSS

Natychmiastowa konwersja pikseli na jednostki REM i EM. Darmowy konwerter jednostek CSS do responsywnego projektowania stron internetowych. Obsługa niestandardowych rozmiarów czcionek i obliczeń w czasie rzeczywistym dla dokładnych wyników.

Konwerter jednostek PX, REM i EM

Konwertuj między pikselami (PX), root em (REM) i em (EM). Wprowadź wartość w dowolnym polu, aby zobaczyć odpowiednie wartości w pozostałych jednostkach.

px
px
px
rem
em
Wizualizacja niedostępna dla wartości ujemnych lub zerowych

Formuły konwersji

  • PX do REM: wartość w px ÷ rozmiar czcionki bazowej
  • PX do EM: wartość w px ÷ rozmiar czcionki elementu nadrzędnego
  • REM do PX: wartość w rem × rozmiar czcionki bazowej
  • EM do PX: wartość w em × rozmiar czcionki elementu nadrzędnego
Kalkulator załadunku...
📚

Dokumentacja

Konwerter jednostek px, rem i em

Konwerter px na rem i em przelicza długość CSS między pikselami (px), jednostką rem względem elementu głównego oraz em, używając rozmiaru czcionki elementu głównego i rozmiaru czcionki elementu nadrzędnego ustawionych przez użytkownika. Te trzy jednostki są najczęściej używanymi sposobami określania rozmiaru tekstu i odstępów w CSS, języku służącym do stylizowania stron internetowych.

Czym są px, rem i em?

Piksel (px) jest jednostką stałą. Szerokość pola ustawiona na 200px pozostaje równa 200 pikselom niezależnie od rozmiaru czcionki używanego na stronie.

Rem („root em”) to jednostka skalowana względem rozmiaru czcionki głównego elementu strony, zwykle znacznika <html>. Większość przeglądarek ustawia rozmiar czcionki tego elementu na 16 pikseli, chyba że strona go zmieni. Jeśli rozmiar czcionki elementu głównego wynosi 16 pikseli, to 1rem równa się 16 pikselom.

Em to jednostka skalowana względem rozmiaru czcionki elementu nadrzędnego, czyli elementu, który ją zawiera. Jeśli element nadrzędny ma ustawienie font-size: 20px, to 1em wewnątrz tego elementu równa się 20 pikselom.

Główna różnica między rem i em dotyczy tego, względem czego każda z tych jednostek jest mierzona. Rem zawsze odnosi się do elementu głównego. Em odnosi się do najbliższego elementu nadrzędnego, więc jego wartość może zmieniać się na każdym poziomie zagnieżdżenia.

Jak obliczać px na rem

Aby przeliczyć piksele na rem, należy podzielić wartość w pikselach przez rozmiar czcionki elementu głównego:

r=pRr = \frac{p}{R}

gdzie r oznacza długość w rem, p długość w pikselach, a R rozmiar czcionki elementu głównego w pikselach.

Przykład obliczeniowy

Przy domyślnym rozmiarze czcionki elementu głównego wynoszącym 16 pikseli wartość 24 pikseli przelicza się następująco:

24 ÷ 16 = 1,5 rem

Jeśli strona ustawia rozmiar czcionki elementu głównego na 10 pikseli (częsty zabieg polegający na ustawieniu html { font-size: 62.5%; }, ponieważ 62,5% z 16 pikseli to 10 pikseli), ta sama wartość 24 pikseli wynosi:

24 ÷ 10 = 2,4 rem

Jak obliczać rem na px

Aby wykonać przeliczenie w drugą stronę, należy pomnożyć wartość rem przez rozmiar czcionki elementu głównego:

p=r×Rp = r \times R

gdzie p oznacza długość w pikselach, r długość w rem, a R rozmiar czcionki elementu głównego.

Przy elemencie głównym o rozmiarze 16 pikseli wartość 1.5rem przelicza się z powrotem jako 1,5 × 16 = 24 piksele.

Jak obliczać px na em

Aby przeliczyć piksele na em, należy podzielić wartość w pikselach przez rozmiar czcionki elementu nadrzędnego:

e=pPe = \frac{p}{P}

gdzie e oznacza długość w em, a P rozmiar czcionki elementu nadrzędnego w pikselach.

Przykład obliczeniowy

Jeśli rozmiar czcionki elementu nadrzędnego wynosi 20 pikseli, wartość 24 pikseli przelicza się następująco:

24 ÷ 20 = 1,2 em

Jak obliczać em na px

Należy pomnożyć wartość em przez rozmiar czcionki elementu nadrzędnego:

p=e×Pp = e \times P

gdzie p oznacza długość w pikselach, e długość w em, a P rozmiar czcionki elementu nadrzędnego.

Przy elemencie nadrzędnym o rozmiarze 20 pikseli wartość 1.2em przelicza się z powrotem jako 1,2 × 20 = 24 piksele.

Jak obliczać rem na em i em na rem

Ponieważ rem i em są mierzone względem różnych rozmiarów czcionki, ich wzajemne przeliczanie wymaga zarówno rozmiaru czcionki elementu głównego, jak i elementu nadrzędnego:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

gdzie R oznacza rozmiar czcionki elementu głównego, a P rozmiar czcionki elementu nadrzędnego.

Przykład obliczeniowy

Przy bazowym rozmiarze czcionki 16 pikseli i rozmiarze czcionki elementu nadrzędnego 20 pikseli wartość 2rem wynosi:

2 × (16 ÷ 20) = 1,6 em

Jeśli rozmiary czcionki elementu głównego i nadrzędnego są równe, 1 rem zawsze równa się 1 em.

Kiedy warto używać poszczególnych jednostek

Piksele dobrze sprawdzają się w przypadku elementów, których rozmiar nie powinien się zmieniać, takich jak obramowanie o szerokości 1 piksela lub ikona o stałej szerokości.

Rem jest często używany do określania odstępów i typografii, które powinny pozostać spójne na całej stronie. Ponieważ zawsze odnosi się do rozmiaru czcionki elementu głównego, wartość rem nie zmienia się niezależnie od głębokości zagnieżdżenia elementu. Oznacza to również, że układy oparte na rem automatycznie dostosowują się, gdy użytkownik zwiększy domyślny rozmiar czcionki w przeglądarce, co ułatwia korzystanie ze strony osobom słabowidzącym.

Em dobrze sprawdza się wewnątrz pojedynczego, samodzielnego komponentu, takiego jak przycisk, gdy dopełnienie powinno skalować się wraz z rozmiarem czcionki tego przycisku. Częstym problemem z em jest kumulowanie się wartości: jeśli kilka zagnieżdżonych elementów używa ustawienia font-size: 1.2em, każdy poziom mnoży wartość z poprzedniego poziomu, więc rozmiary czcionek rosną szybciej, niż zamierzono.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Po trzech poziomach tekst urósł o około 73%, a nie o 20%, czego deweloper mógłby oczekiwać po pojedynczej regule 1.2em.

Korzystanie z przelicznika

  1. Wprowadź wartość w polu pikseli, rem lub em.
  2. Dwa pozostałe pola aktualizują się automatycznie, a wartości są zaokrąglane do czterech miejsc po przecinku.
  3. Ustaw rozmiar czcionki elementu głównego zgodnie z elementem <html> projektu. W większości przeglądarek domyślnie wynosi on 16 pikseli i wpływa tylko na rem.
  4. Ustaw rozmiar czcionki elementu nadrzędnego zgodnie z rozmiarem czcionki elementu, wewnątrz którego znajdowałaby się wartość em. Wpływa on tylko na em.
  5. Użyj przycisku kopiowania obok pola, aby skopiować jego wartość.

W obu polach rozmiaru czcionki można wprowadzać całkowite wartości w pikselach, a najmniejsza dozwolona wartość to 1 piksel. Przycisk resetowania usuwa wartość i przywraca oba rozmiary czcionki do 16 pikseli.

Pod polami narzędzie rysuje po jednym pasku dla każdej jednostki. Wszystkie trzy paski przedstawiają tę samą długość fizyczną, więc mają taką samą szerokość, co stanowi szybkie sprawdzenie, czy przeliczenie jest prawidłowe. Pasek jest rysowany z rzeczywistą długością w pikselach do 300 pikseli; dłuższe wartości są pomniejszane, aby się zmieścić, więc zarówno wartość 600 pikseli, jak i 900 pikseli kończą się na 300 pikselach. Paski pojawiają się tylko wtedy, gdy wartość w pikselach jest większa od zera.

Często zadawane pytania

Jaka jest różnica między rem i em? Rem zawsze odnosi się do rozmiaru czcionki elementu głównego. Em odnosi się do rozmiaru czcionki najbliższego elementu nadrzędnego. Wartość rem pozostaje taka sama w całej stronie, natomiast wartość em może się zmieniać zależnie od głębokości zagnieżdżenia elementu.

Dlaczego przeglądarki używają 16 pikseli jako domyślnego rozmiaru czcionki? 16 pikseli od dawna jest domyślnym rozmiarem tekstu w głównych przeglądarkach, ponieważ zapewnia komfort czytania na typowych ekranach bez dodatkowego stylizowania. Wytyczne dotyczące dostępności stron internetowych zalecają, aby rozmiar tekstu można było zwiększyć do 200% bez zaburzania układu strony, a 16 pikseli stanowi praktyczny punkt wyjścia.

Na czym polega zabieg 62,5%? Ustawienie html { font-size: 62.5%; } zmienia domyślny rozmiar czcionki elementu głównego z 16 pikseli na 10 pikseli, ponieważ 62,5% z 16 to 10. Upraszcza to obliczenia rem, ponieważ 1,6 rem równa się 16 pikselom, a 2,4 rem równa się 24 pikselom.

Czy wartości px, rem i em mogą być ujemne? Tak, w przypadku właściwości dopuszczających ujemne długości, takich jak marginesy lub przekształcenia CSS. Dopełnienie nie może być ujemne w CSS; przeglądarki ignorują ujemną wartość dopełnienia. Konwerter obsługuje wartości ujemne, ale nie rysuje dla nich pasków, ponieważ pasek nie może mieć ujemnej szerokości.

Czy każdą wartość w pikselach należy przeliczać na rem? Niekoniecznie. Obramowania i inne drobne elementy zwykle pozostawia się w pikselach, ponieważ rzadko muszą skalować się wraz z rozmiarem czcionki, a przy szerokościach mniejszych od piksela mogą wyglądać nierówno. Rem jest odpowiedni dla odstępów i typografii, które powinny skalować się zgodnie z preferowanym przez użytkownika rozmiarem czcionki.

Czy wybór jednostki wpływa na wydajność strony? Nie. Przeglądarki przeliczają każdą długość CSS na tę samą wartość wewnętrzną podczas układania strony, więc px, rem i em są renderowane równie szybko. Wybór między nimi wpływa na łatwość utrzymania kodu i dostępność, a nie na szybkość.