Konwerter em/rem na piksele

Przelicz jednostki CSS: em, rem i piksele w obie strony. Ustaw bazowy font-size. Natychmiastowy wynik dla wszystkich wartości jednocześnie. Niezbędne przy responsywnym web designie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Kierunek

Jednostka

Wartość

Bazowy rozmiar (px)

Precyzja

Dołącz jednostkę Opcja narzędzia

Wynik

20,0000 px

1.25 × 16 = 20

Baza

16,00 px

bazowy rozmiar czcionki — dla rem zwykle root <html> 16px; pole w formularzu pozwala go zmienić

Wzór

px = value × base

z kodu silnika; precyzja 0–8 miejsc, nadmiarowe zera obcinane (rtrim)

Kierunek

em/rem → px

jednostka: rem

Pokaż pełne podsumowanie przeliczenia

20px

Ściąga: em/rem ↔ piksele — przykłady przeliczone silnikiem narzędzia

Wzór z kodu silnika: px = wartość × baza (kierunek to_px) oraz em/rem = px ÷ baza (to_unit); baza to bazowy rozmiar czcionki z formularza (dla rem zwykle 16 px). Kolumna Wynik i Obliczenie pochodzą 1:1 z wyjścia silnika, z dołączoną jednostką
Wejście	Kierunek	Baza (px)	Wynik	Obliczenie silnika
1.5 rem	em/rem → px	16	24px	1.5 × 16 = 24
1 rem	em/rem → px	16	16px	1 × 16 = 16
0.75 rem	em/rem → px	16	12px	0.75 × 16 = 12
1.5 em	em/rem → px	16	24px	1.5 × 16 = 24
2 rem	em/rem → px	18	36px	2 × 18 = 36
24 rem	px → em/rem	16	1.5rem	24 ÷ 16 = 1.5

Bazę można zmienić w formularzu (pole „Bazowy rozmiar px”) — przykładowo projekt z ustawieniem html { font-size: 62.5% } ma bazę 10 px, więc 1.5rem = 15 px, a baza 18 px daje 1.5rem = 27 px. Przecinek dziesiętny też działa: 1,5 przeliczy się jak 1.5. Precyzja wyniku to 0–8 miejsc, a nadmiarowe zera po przecinku silnik obcina.

Warto wiedzieć — em, rem i piksele

Wzór z kodu narzędzia

Konwersja do pikseli to proste mnożenie: px = wartość × baza, więc 1.5rem przy bazie 16 px = 24 px. W drugą stronę dzielenie: em/rem = px ÷ baza, więc 24 px przy bazie 16 = 1.5rem. Dokładnie te działania wykonuje silnik (metadata.formula i calculation z kodu), a wynik możesz pokazać z jednostką lub bez — opcja „Dołącz jednostkę”.

rem — zawsze root, domyślnie 16 px

rem odnosi się do rozmiaru czcionki elementu głównego <html>, który przeglądarki domyślnie ustawiają na 16 px — dlatego „rem zawsze root 16” to tylko konwencja, a nie prawo: narzędzie pozwala zmienić bazę (pole „Bazowy rozmiar px”), gdy projekt przeskaluje root, np. do 62.5% (10 px) albo 112.5% (18 px).

em — kaskadowe, liczone od rodzica

em odnosi się do font-size rodzica, więc kaskadowo się mnoży: kontener 1.2em w kontenerze 1.2em daje już 1.44em bazowe. Klasyczna pułapka to line-height w em — w elemencie o większej czcionce ta sama wartość urośnie (stąd zalecenie line-height: 1.5 bez jednostki). W rem wynik jest zawsze ten sam niezależnie od zagnieżdżenia — stabilny, przewidywalny, bezpieczny dla design systemów.

Kiedy co wybierać

rem: paddingi, marginesy, rozmiary tekstu, media queries — wszystko, co ma skalować się razem z ustawieniami użytkownika (dostępność!). em: odstępy, które mają rosnąć wraz z czcionką danego komponentu (np. odstęp przy ikonie w nagłówku). px: ramki 1 px, cienie i szczegóły, które nie mogą się skalować. Ten konwerter liczy w obie strony, więc łatwo porównać te trzy światy przy jednej bazie.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Konwerter em/rem na piksele – jednostki CSS bez rachunków

Praca z relatywnymi jednostkami CSS (em, rem) wymaga ciągłego przeliczania na piksele i z powrotem. Narzędzie oblicza przeliczenie w obie strony: em↔px i rem↔px, uwzględniając kontekst rodzica (dla em) oraz root font-size (dla rem). Wpisz jedną wartość – reszta przelicza się automatycznie.

konwerter em rem px przelicz em na piksele rem na px kalkulator jednostki CSS kalkulator

Różnica między em a rem

em: relatywny do font-size elementu rodzica. Dziedziczenie powoduje efekt kaskadowy (1.5em wewnątrz 1.5em = 2.25× bazowy). rem (root em): relatywny tylko do font-size elementu (domyślnie 16px). Przewidywalny i łatwiejszy w utrzymaniu – rem jest preferowany dla systemów projektowania.

Typowe wartości przeliczeniowe (baza 16px)

0.25rem = 4px, 0.5rem = 8px, 0.75rem = 12px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 1.75rem = 28px, 2rem = 32px, 2.5rem = 40px, 3rem = 48px, 4rem = 64px. Zmiana bazy (np. 10px przez html{font-size:62.5%}) upraszcza: 1rem=10px, 1.6rem=16px.

Kiedy używać px, em, rem, a kiedy vw/vh?

px: borders, box-shadow, granice, min-height. rem: font-size, spacing (padding/margin) – skalowalny z ustawieniami przeglądarki użytkownika. em: spacing proporcjonalne do rozmiaru tekstu w komponencie (button padding). vw/vh: rozmiary layoutu, hero sections, pełnoekranowe modale. %: szerokość kontenerów flex/grid.

Dostępność i skalowanie tekstu

Używanie rem dla font-size zamiast px respektuje preferencje użytkownika (ustawienia przeglądarki > rozmiar tekstu). Użytkownicy z niedowidzeniem ustawiają browser base font na 20-24px. px blokuje to skalowanie. WCAG 1.4.4 (AA): tekst musi być powiększalny do 200% bez utraty treści.

Jak działa przelicznik em/rem na piksele

Każde przeliczenie sprowadza się do jednego mnożenia. Wartość zapisaną w jednostce relatywnej mnożysz przez bazowy font-size wyrażony w pikselach: px = wartość × baza. Przy rem bazą jest font-size elementu html, czyli root. Przy em bazą jest font-size elementu nadrzędnego, w kontekście którego dany element faktycznie występuje.

W drugą stronę działanie jest odwrotne: wartość w pikselach dzielisz przez bazę i otrzymujesz wynik w jednostce relatywnej, czyli em = px / baza oraz rem = px / baza. Narzędzie wykonuje oba kierunki na jednym polu – wpisujesz liczbę, wskazujesz jednostkę źródłową, a ono podstawia właściwą bazę i zwraca wynik.

Wartość bazowa nie jest jednak stała. Jeśli w arkuszu stylów pojawi się html { font-size: 62.5% }, root font-size zmienia się z domyślnych 16px na 10px i wszystkie przeliczenia rem startują z tej liczby. Przy em sytuacja jest bardziej złożona, bo baza zmienia się na każdym poziomie drzewa dokumentu: element potomny dziedziczy obliczony rozmiar tekstu rodzica, a nie wartość zapisaną w deklaracji CSS. Dlatego pole kontekstu rodzica trzeba wypełnić świadomie – to nie jest stała globalna, lecz rozmiar tekstu najbliższego przodka.

Przykład krok po kroku: karta z paddingiem w em i rem

Ustal bazę główną. Domyślny root font-size to 16px, a jeśli w CSS jest html { font-size: 62.5% }, bazą jest 10px.
Karta ma zapis font-size: 1.25rem. Przeliczasz: 1,25 × 16px = 20px. Tyle wynosi rozmiar tekstu w karcie i jednocześnie baza dla wszystkich em wewnątrz niej.
Padding wewnątrz karty zapisano jako 0.75em. Ponieważ baza w tym kontekście to 20px, wynik to 0,75 × 20px = 15px.
Ten sam odstęp zapisany w rem da inny wynik: 0,75rem × 16px = 12px, bo rem ignoruje font-size karty i patrzy wyłącznie na root. Różnica 15px wobec 12px to bezpośredni skutek wyboru jednostki.
Przeliczenie w drugą stronę: projekt mówi padding 30px. Dzielisz przez bazę 16px i otrzymujesz 30 / 16 = 1,875rem. Liczone w em w kontekście karty o bazie 20px dałoby 30 / 20 = 1,5em.
Kontrola przy powiększonym tekście: gdy użytkownik podniesie bazę z 16px do 20px, wartość 1,875rem daje 37,5px. Karta ma wtedy font-size 1,25rem, czyli 25px, a 1,5em w jej wnętrzu to również 37,5px. Obie notacje zachowują się tak samo, dopóki em jest zakotwiczone na tej samej bazie.

Tabela przeliczeń rem na piksele dla dwóch typowych baz

Wartość w rem	Baza 16px	Baza 10px (62.5%)
0,25rem	4px	2,5px
0,5rem	8px	5px
0,75rem	12px	7,5px
1rem	16px	10px
1,25rem	20px	12,5px
1,5rem	24px	15px
2rem	32px	20px
3rem	48px	30px

Jak liczyć sprawnie i nie wprowadzać błędów

Najpierw ustal bazę, potem licz – sprawdź w narzędziach deweloperskich obliczony font-size elementu html. Wynik dla rem będzie poprawny tylko wtedy, gdy wpiszesz faktyczną bazę, a nie tę, którą zakładasz z przyzwyczajenia.
Dla em zawsze podaj kontekst rodzica – jedna i ta sama wartość 1,5em oznacza inne piksele w kontenerze o bazie 16px i inne w kontenerze, którego tekst ma 24px. Bez tej liczby kalkulator zwróci wynik dla domyślnej bazy, co często nie odpowiada rzeczywistości.
Nie mieszaj obu jednostek w jednym komponencie – jeśli spacing opierasz na rem, trzymaj się rem również w zagnieżdżonych elementach. Zamiana na em w środku struktury sprawia, że odstępy zaczynają zależeć od lokalnego rozmiaru tekstu i przestają być przewidywalne.
Zaokrąglaj dopiero na końcu – przeliczenia odwrotne, na przykład px na rem, dają ułamki typu 1,875rem. Zachowaj je w arkuszu w niezaokrąglonej formie, a dopiero wynik końcowy interpretuj w kontekście projektu.
Sprawdź wynik przy powiększonym tekście – ustaw w przeglądarce bazę większą niż domyślna i zobacz, czy układ nadal działa. Tekst musi być powiększany do 200% bez utraty treści, zgodnie z WCAG 1.4.4.

Czego kalkulator nie uwzględni

Nie odczyta Twojego arkusza stylów – narzędzie nie wie, jaki font-size ma rodzic ani jaki jest root font-size na Twojej stronie. Wszystkie wartości bazowe wpisujesz ręcznie, więc błędna baza oznacza błędny wynik.
Liczy jedną relację, nie całe drzewo – przy em każdy kolejny poziom zagnieżdżenia mnoży bazę przez własny font-size. Kalkulator pokaże wynik dla wskazanego kontekstu, ale nie prześledzi łańcucha dziedziczenia przez kilka elementów naraz.
Nie zna stylów dodawanych dynamicznie – font-size zmieniany skryptem, klasami narzędziowymi albo wewnątrz media queries nie pojawi się w obliczeniach. W takich przypadkach baza zależy od stanu strony i trzeba ją ustalić w przeglądarce.
Obsługuje wyłącznie px, em i rem – jednostki takie jak procenty, vw, vh czy punkty typograficzne nie są przeliczane, bo ich wartość zależy od kontekstu innego niż sam rozmiar tekstu.

Najczęstsze pytania

Dlaczego domyślny font-size przeglądarki to 16px?

Historycznie ustawiony przez Netscape w latach 90. jako czytelny rozmiar dla typowych monitorów 72-96 DPI. Utrzymany dla kompatybilności wstecznej. Użytkownik może zmienić w ustawieniach przeglądarki (Chrome: Ustawienia → Wygląd → Rozmiar czcionki).

Czy warto zmienić html font-size na 62.5%?

html { font-size: 62.5%; } → 1rem = 10px (łatwe przeliczanie). Kontrowersyjne: łamie ustawienia użytkownika (przeglądarka 20px → teraz 62.5% × 20px = 12.5px jako baza). Bezpieczniejsza alternatywa: calc() lub custom CSS properties: --base: 16px.

Jak działa em w zagnieżdżonych elementach?

Każde zagnieżdżenie mnoży: div {font-size: 1.2em} wewnątrz p {font-size: 1.2em} = 1.44× bazy. Problem "em creep": po 5 poziomach zagnieżdżenia tekst jest nieczytelnie duży. rem rozwiązuje ten problem.

Jakie jednostki CSS są najlepsze dla spacing (margin/padding)?

rem dla globalnych spacing (zachowuje proporcje przy zmianie base font). em dla spacing wewnątrz komponentów (button, badge – padding skaluje się z rozmiarem tekstu przycisku). px dla bardzo małych lub stałych spacing (1px border, 2px gap).

Czy media queries rozumieją em i rem?

Tak – i to ważne: media queries bazują na przeglądarki default font-size (16px), NIE na zmienionej html font-size. Więc @media (min-width: 48em) = 768px zawsze, niezależnie od html { font-size: 62.5% }. px w media queries są bezpieczniejsze i bardziej przewidywalne.

Ile to 1.5em w pikselach?

Zależy od kontekstu. Jeśli element nadrzędny ma font-size 16px, wynik to 24px. Jeśli rodzic ma 20px, ta sama wartość daje 30px. Dlatego przy em zawsze trzeba znać bazę najbliższego przodka.

Jak przeliczyć piksele na rem?

Podziel wartość w pikselach przez root font-size. Przy bazie 16px ze 32px otrzymasz 2rem, a z 24px – 1,5rem. Jeśli baza to 10px, wynik dzielenia zmienia się odpowiednio.

Czy em i rem to to samo?

Nie. Obie jednostki są relatywne, ale mają różne punkty odniesienia: rem odnosi się wyłącznie do font-size elementu html, a em do font-size elementu nadrzędnego. W praktyce rem daje powtarzalne wyniki w całym dokumencie, em jest zmienne i zależne od miejsca w strukturze.

Dlaczego mój wynik w em różni się od kalkulatora?

Najczęstszą przyczyną jest inna baza, niż założyłeś. Rodzic może mieć font-size ustawiony w rem, w procentach albo dziedziczony z wyższego poziomu. Sprawdź obliczoną wartość font-size w narzędziach deweloperskich i wpisz ją do kalkulatora.

Czy warto ustawiać html { font-size: 62.5% }?

To zabieg ułatwiający rachunki, bo przy standardowej bazie 16px daje 10px i pozwala liczyć w pamięci. Warto pamiętać, że ta wartość jest procentem bazy użytkownika, więc przy zmienionych ustawieniach przeglądarki root font-size nie wyniesie dokładnie 10px.

Powiązane narzędzia: piaskownica Flexbox, piaskownica CSS Grid i kalkulator proporcji CSS.