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

Direction

Jednostka

Wartość

Base px

Precyzja

Include unit Opcja narzędzia

Wynik

Ustaw parametry i kliknij „Przetwórz”, aby zobaczyć wynik.

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.

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.

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