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.
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.
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.
| px | rem |
|---|---|
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 40px | 2.5rem |
| 48px | 3rem |
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 na tej karcie 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. Karta 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ć
- Wpisz 16 px i root 16, źródło px.
- Kliknij Oblicz. Wynik to 1 rem.
- 24 px przy 16 daje 1.5 rem. 1,5 rem przy 16 zostaje 1.5 rem.
- To wpisany root, nie computed z CSS.
- 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 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
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 karta 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.
FAQ — przykłady praktyczne
- Czy 1rem zawsze oznacza 16px?
- Nie.
remzależy odfont-sizenahtml. Domyśl przeglądarki często to 16px, ale jeśli ustawisz 18px albo 10px, 1rem zmieni znaczenie. Wpisz właściwy root (albo użyj presetu) i kliknij Oblicz. - Do czego służą presety 16px i 10px?
- Tylko wypełniają pole root font-size. Nie liczą wyniku automatycznie — nadal klikasz Oblicz. 16px to typowy domyśl przeglądarki; 10px odpowiada mentalnemu modelowi „1rem ≈ 10px” (często przez
html { font-size: 62.5%; }). - Jak skopiować wynik do CSS?
- Po Oblicz użyj przycisków Kopiuj przy rem/px albo Kopiuj CSS, żeby wziąć gotowy snippet z
htmlroot i.text { font-size: … }. - Kiedy lepiej rem niż px?
- Gdy typografia i spacing mają skalować się z root (design system, dostępność).
pxzostaw przy borderach, hairline’ach i cieniach. Większość UI łączy obie jednostki. - Czym różni się rem od em?
remzawsze względem roothtml.emwzględem fontu bieżącego elementu i może się mnożyć w zagnieżdżeniach. Opcjonalne pole „font rodzica” pokazuje przybliżoneemwzględem podanego rodzica — dopiero po Oblicz.- Czy wynik przelicza się podczas pisania?
- Nie. Kalkulator jest świadomie submit-only: wybierasz kierunek (px lub rem), wpisujesz dane i klikasz Oblicz. Zmiana kierunku albo presetu czyści poprzedni wynik, żeby nie zostawały nieaktualne wartości.