Kalkulator PX ↔ REM

Wpisz px albo rem i root. 16 px przy 16 daje 1 rem. 24 px przy 16 daje 1.5 rem. 1,5 rem przy 16 zostaje 1.5 rem. Wpisany root, nie CSS strony.

To rem = px / root z wpisanego font-size na html. Nie computed z CSS. Kolor HEX jest na kalkulatorze Kolor HEX ↔ RGB.

Dane

Przelicz z:
Szybki root:

px ÷ baza = rem, rem × baza = px. Preset tylko wypełnia pole root — wynik po Oblicz.

Opcje dodatkowe (opcjonalnie)

Wybierz kierunek (px lub rem), wpisz wartość i root font-size, a następnie kliknij Oblicz.

Wynik

Wybierz kierunek konwersji, wpisz wartość i root font-size, a następnie kliknij Oblicz.

Czym jest rem?

Ten kalkulator działa w obie strony: px → rem i rem → px. rem (root em) jest względne wobec font-size na html — nie wobec rodzica. Wynik zawsze zależy od wybranego root font-size (możesz wpisać własny albo użyć presetu 16px / 10px).

Jeśli root wynosi 16px, to 1rem = 16px i 1.5rem = 24px. Przy innym root te same rem oznaczają inne piksele.

Jak przeliczyć px na rem

rem = px ÷ root font-size

  • 16px przy root 16px → 1rem
  • 24px przy root 16px → 1.5rem
  • 18px przy root 10px → 1.8rem

W narzędziu: źródło px, wpisz wartość i root, kliknij Oblicz — skopiuj rem lub snippet CSS z wyniku.

Jak przeliczyć rem na px

px = rem × root font-size

  • 1.5rem przy root 16px → 24px
  • 1.25rem przy root 16px → 20px
  • 2rem przy root 10px → 20px

W narzędziu: źródło rem, wpisz wartość i root, kliknij Oblicz.

Kiedy px, rem, a kiedy em

  • rem — typografia, spacing, paddings, gapy i tokeny design systemu, które mają skalować się z root (dostępność, preferencje użytkownika).
  • px — bordery, hairline’y, cienie i detale, które mają zostać „sztywne”.
  • em — lokalne skalowanie względem fontu elementu; używaj świadomie, bo łatwo się kumuluje w zagnieżdżeniach.

Typowe wartości UI (root 16px)

Szybki podgląd przy domyślnym root 16px — przy innym root użyj kalkulatora.

pxrem
12px0.75rem
14px0.875rem
16px1rem
18px1.125rem
20px1.25rem
24px1.5rem
32px2rem
40px2.5rem
48px3rem

Przykład CSS

html { font-size: 16px; }

h1 { font-size: 2rem; }      /* 32px */
p { font-size: 1rem; }       /* 16px */
.small-text { font-size: 0.875rem; }  /* 14px */
.card { padding: 1.5rem; }   /* 24px */

Po każdym obliczeniu kalkulator generuje też gotowy snippet .text { font-size: … } z Twoim root — możesz go skopiować jednym kliknięciem.

Jak to działa?

Kalkulator PX ↔ REM w tym kalkulatorze dzieli piksele przez wpisany root. 16 px i root 16 dają 1 rem. 24 px i root 16 dają 1.5 rem. 1,5 rem i root 16 zostają 1.5 rem, bo trzeci przykład trzyma źródło rem. To nie computed z CSS strony.

Pola: px-val, rem-val, rem-base. Radio px-rem-source wybiera kierunek. rem = px / root. px = rem × root. Presety 16 i 10 tylko wypełniają root. Opcjonalny em-parent-px nie jest w tych trzech kartach.

1 rem nie jest computed z getComputedStyle. 1.5 rem nie schodzi z DevTools. Wpisujesz root sam. Kalkulator nie czyta html { font-size } z arkusza.

HEX ↔ RGB obok zamienia kolor. URL encode koduje spacje. Tu 16 px zostaje 1 rem przy root 16.

Wpisz 16, root 16, źródło px, potem Oblicz. Wynik to 1 rem. Przecinek w 1,5 działa. Zero root nie dzieli. To nie odczyt CSS.

16 px i 16 dają 1 rem. 24 px i 16 dają 1.5 rem. 1,5 rem i 16 zostają 1.5 rem. Inny root przy 16 zmienia 1 rem.

Wzór

rem = px / root; px = rem × root. Root z pola, nie computed z CSS.

Jak korzystać

  1. Wpisz 16 px i root 16, źródło px.
  2. Kliknij Oblicz. Wynik to 1 rem.
  3. 24 px przy 16 daje 1.5 rem. 1,5 rem przy 16 zostaje 1.5 rem.
  4. To wpisany root, nie computed z CSS.
  5. Kolor HEX licz na kalkulatorze Kolor HEX ↔ RGB.

16 px przy root 16 = 1 rem

rem = px / root. 16 px i 16 dają 1 rem. Wpisany root, nie CSS.

Kalkulator
Trzy pola i kierunek. 16 px zostawia 1 rem. Nie DevTools.
REM
px / root. 24 px przy 16 daje 1.5 rem. Root z pola.
root
Pole rem-base. 16 przy 16 px zostawia 1 rem. Nie computed.

Przykłady

Przykład 1

  • 16 px
  • root 16
  • źródło px

1 rem

Ile rem przy 16 px i root 16? 1 rem. Wpisany root, nie CSS.

Przykład 2

  • 24 px
  • root 16
  • źródło px

1.5 rem

Ile przy 24 px i root 16? 1.5 rem.

Przykład 3

  • 1,5 rem
  • root 16
  • źródło rem

1.5 rem

Ile przy 1,5 rem i root 16? 1.5 rem. Źródło rem zostaje rem.

Powiązane kalkulatory

Kalkulator Kolor HEX ↔ RGB

Kalkulator Kolor HEX ↔ RGB: HEX albo RGB.

Użyj kalkulatora →

URL encode / decode

URL encode / decode: tekst i tryb.

Użyj kalkulatora →

Rozmiar Base64

Rozmiar Base64: bajty i tryb.

Użyj kalkulatora →

ASCII / Unicode

Kod znaku ASCII/Unicode: znak albo krótki tekst.

Użyj kalkulatora →

Wszystkie kalkulatory IT

Najczęstsze pytania

Ile rem przy 16 px i root 16?

1 rem. 16 / 16. Wpisany root, nie CSS.

Ile przy 24 px i root 16?

1.5 rem. 24 / 16.

Ile przy 1,5 rem i root 16?

1.5 rem. Źródło rem, primary zostaje rem.

Czy 1 rem to zawsze 16 px?

Nie. Root wpisujesz sam. Inny rem-base zmienia 1 rem.

Czy kalkulator czyta CSS strony?

Nie. Nie ma getComputedStyle. Same trzy pola.

Czy presety 16 i 10 liczą same?

Nie. Tylko wypełniają root. Potem Oblicz.

Czy przecinek w 1,5 działa?

Tak. 1,5 rem przy root 16 zostaje 1.5 rem.

Gdzie liczysz HEX?

Na kalkulatorze Kolor HEX ↔ RGB. Tu zostaje 1 rem z 16 px.

Czy zero root liczy?

Nie. Root musi być dodatni. To nie puste html z arkusza.

Źródła wiedzy

Kalkulator liczy bity, bajty albo przepustowość z Twoich liczb. Poniżej definicje bitu i SI (GUM).

Strona zaktualizowana w 2026.