Konwerter jednostek CSS

Q: Czym różni się em od rem i kiedy stosować każdą z nich?

rem zawsze odnosi się do rozmiaru czcionki elementu głównego, więc 1,5rem znaczy to samo w każdym miejscu dokumentu. em odnosi się do rozmiaru czcionki elementu nadrzędnego (albo samego elementu we właściwościach takich jak padding i line-height), więc kumuluje się w zagnieżdżonym kodzie. Zwykła zasada: używaj rem dla rozmiarów czcionek i odstępów, aby wartości były przewidywalne i respektowały preferencje użytkownika; używaj em tam, gdzie chcesz, aby coś skalowało się wraz z lokalnym tekstem, np. padding przycisku.

Q: Ile pikseli to 1pt i jaka jest zależność między pt, px i calami?

CSS definiuje piksel odniesienia tak, że 1in = 96px = 72pt . Zatem 1pt to 96/72 ≈ 1.3333 px, a 1px to 0,75pt. Dlatego edytory tekstu i narzędzia do projektowania do druku, pracujące na punktach, pokazują inne liczby niż CSS: czcionka 12pt wyświetla się na ekranie jako 16px. Konwerter używa dokładnie tego stosunku w wynikach dla pt.

Q: Dlaczego moje wartości em nie zgadzają się z tym, co pokazuje przeglądarka?

Są dwie typowe przyczyny. Po pierwsze, em się kumuluje : jeśli element nadrzędny ma font-size 1,25em przy głównym elemencie 16px (czyli 20px), a element podrzędny ustawisz na 1,5em, będzie miał 30px, a nie 24px. Po drugie, we właściwościach takich jak padding, margin i line-height elementu em odnosi się do rozmiaru czcionki samego tego elementu , a nie nadrzędnego. W konwerterze wpisz w takich przypadkach obliczony rozmiar czcionki samego elementu jako rozmiar czcionki elementu nadrzędnego.

Q: Co jest lepsze dla dostępności: px czy rem?

Do rozmiarów czcionek zwykle poleca się rem , ponieważ skaluje się, gdy użytkownik zwiększy podstawowy rozmiar tekstu w przeglądarce, podczas gdy tekst w px pozostaje stały i może ignorować tę preferencję. Ma to znaczenie dla osób słabowidzących i jest wymagane przez wytyczne dostępności, takie jak WCAG. px nadaje się natomiast doskonale dla obramowań, cieni i cienkich linii, gdzie skalowanie jest niepożądane. Praktyczne podejście: rem dla typografii i odstępów, px dla detali dekoracyjnych, których rozmiar musi pozostać dokładny w pikselach, a clamp() z rem i vw dla płynnej typografii.

Zaktualizowano: 14 października 2026

Przelicz długość CSS między px, rem, em, vw, vh, pt i procentami. Wpisz wartość, wybierz jej jednostkę, ustaw rozmiar czcionki elementu głównego i nadrzędnego oraz wymiary viewportu — i od razu otrzymaj wszystkie przeliczone wartości.

Przeliczanie między px, rem, em, vw i vh

Wartość

Długość, którą chcesz przeliczyć. Dozwolone są wartości ujemne (np. ujemne marginesy).

Jednostka CSS

Rozmiar czcionki głównej

rem

Rozmiar czcionki elementu <html>. Domyślnie przeglądarki przyjmują 16 px; potrzebny do przeliczania rem.

Rozmiar czcionki rodzica

Wyliczony rozmiar czcionki elementu nadrzędnego; potrzebny do przeliczania em i %.

Szerokość viewportu

Szerokość viewportu przeglądarki; potrzebna do przeliczania vw.

Wysokość viewportu

Wysokość viewportu przeglądarki; potrzebna do przeliczania vh.

Obliczaj automatyczniePo włączeniu wynik aktualizuje się automatycznie po zmianie dowolnej wartości.

Przeliczone wartości

Pikselepx

Jednostki remrem

Jednostki em (rodzic)em

Jednostki szerokości viewportuvw

Jednostki wysokości viewportuvh

Punktypt

Podstawa przeliczeń

Wzór przeliczania jednostek CSS

Wzór

\[ px = v \times f(\text{jednostka}) \] \[ x_{\text{docelowa}} = \frac{px}{f(\text{jednostka docelowa})} \]

Oznaczenia:

\(v\) — wpisana długość w jej pierwotnej jednostce
\(f(\text{jednostka})\) — ile pikseli odpowiada jednej jednostce danego typu:
\(px\): 1 \(rem\): rozmiar czcionki głównego elementu (root) \(em\): rozmiar czcionki elementu nadrzędnego \(vw\): szerokość viewportu \(/ 100\) \(vh\): wysokość viewportu \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): rozmiar czcionki elementu nadrzędnego \(/ 100\)

Kalkulator najpierw przelicza wprowadzoną wartość na piksele, a potem dzieli ją przez liczbę pikseli przypadającą na każdą jednostkę docelową. Dzięki temu dwuetapowemu podejściu wszystkie siedem wyników jest ze sobą zgodne.

Jednostki CSS — przykład obliczeń

Przykład: przelicz 24px na rem, em, vw, vh i pt przy rozmiarze czcionki elementu głównego i nadrzędnego równym 16px oraz viewporcie 1920×1080 (wartości domyślne kalkulatora).

\[ px = 24 \times 1 = 24 \]

\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]

\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]

\[ pt = 24 \times \frac{72}{96} = 18 \]

Wynik: 24px = 1,5rem = 1,5em = 1,25vw = 2,2222vh = 18pt.

Jak korzystać z konwertera jednostek CSS

Wpisz długość w polu Wartość — na przykład 24. Działają też wartości ujemne, co przydaje się przy ujemnych marginesach.
Wybierz jednostkę tej wartości z listy rozwijanej Jednostka CSS (px, rem, em, vw, vh, pt lub %).
Ustaw rozmiar czcionki głównego elementu, czyli rozmiar czcionki elementu <html>. Przeglądarki domyślnie przyjmują 16px.
Ustaw rozmiar czcionki elementu nadrzędnego — obliczony rozmiar czcionki elementu nadrzędnego, potrzebny do przeliczeń na em i %.
Wpisz szerokość i wysokość viewportu okna przeglądarki w pikselach; od nich zależą wyniki dla vw i vh.
Odczytaj wszystkie przeliczone wartości naraz w sekcji Przeliczone wartości, wraz z podstawą przeliczenia pokazującą, ile pikseli odpowiada każdej jednostce w Twoich ustawieniach.

Czym są jednostki CSS i dlaczego mają znaczenie?

Długości w CSS dzielą się na dwie rodziny. Jednostki bezwzględne, takie jak px i pt, mają stały rozmiar: specyfikacja CSS definiuje piksel odniesienia tak, że 1in = 96px = 72pt. Jednostki względne zależą od kontekstu: rem odnosi się do rozmiaru czcionki elementu głównego, em do rozmiaru czcionki elementu nadrzędnego, vw i vh do 1% szerokości albo wysokości viewportu, a % (dla font-size) do rozmiaru czcionki elementu nadrzędnego.

Wybór jednostki decyduje o zachowaniu układu strony. Wartości w px pozostają stałe niezależnie od preferencji użytkownika, co czyni je przewidywalnymi dla obramowań i drobnych detali, ale sztywnymi dla typografii. Wartości w rem skalują się wraz z rozmiarem czcionki głównego elementu, więc gdy użytkownik powiększy podstawowy rozmiar tekstu w przeglądarce, wszystko rozmiarowane w rem proporcjonalnie urośnie — to kluczowy wymóg dostępności. Wartości w em kumulują się w zagnieżdżonych elementach, co przy głębokim zagnieżdżeniu może dawać zaskakujące wyniki.

Jednostki viewportu sprawiają, że typografia i odstępy reagują na rozmiar okna. Szerokość ustawiona na 50vw zawsze wypełnia połowę ekranu, dlatego sekcje hero i płynna typografia często łączą vw z rem za pomocą clamp(). Ponieważ vw i vh zmieniają się przy każdej zmianie rozmiaru okna, przeliczanie ich na px ma sens tylko dla jednego konkretnego rozmiaru viewportu — tego, który wpisujesz w kalkulatorze.

Interpretacja wyników jest prosta: każdy z nich to ta sama długość fizyczna wyrażona w innej jednostce. Jeśli migrujesz system projektowy z px na rem, kolumna rem podpowiada wartość tokena do wpisania; jeśli drukujesz albo porównujesz wyniki z narzędziami projektowymi pracującymi na punktach, kolumna pt daje bezpośredni odpowiednik.

Założenia, ograniczenia i praktyczne wskazówki

Konwerter zakłada standardowy piksel odniesienia CSS: 1in = 96px = 72pt. Fizyczny (drukowany) wynik może się nieznacznie różnić w zależności od urządzenia.
Procent traktowany jest jako względny wobec rozmiaru czcionki elementu nadrzędnego, co jest poprawne dla font-size. Dla width, height, margin i padding procent odnosi się natomiast do wymiarów elementu nadrzędnego, więc w tych przypadkach potrzebna jest inna wartość odniesienia.
em odnosi się do rozmiaru czcionki elementu nadrzędnego. Gdy jest używany we właściwościach samego elementu, np. w line-height czy padding, em odnosi się do rozmiaru czcionki tego elementu — odpowiednio dostosuj pole z rozmiarem czcionki elementu nadrzędnego.
Wyniki dla vw i vh są ważne wyłącznie dla wymiarów viewportu, które wpiszesz. Przetestuj kilka rozmiarów (np. 1920×1080, 1366×768, 390×844), aby zobaczyć, jak przeliczone wartości się zmieniają.
Przeglądarki w niektórych konfiguracjach stosują minimalny rozmiar czcionki, przez co bardzo mały tekst oparty na rem lub em może renderować się większy, niż wynika z obliczeń.
Przydatna reguła kciuka: przy domyślnym rozmiarze czcionki głównej 16px mamy 1rem = 16px, więc px ÷ 16 = rem. Jeśli ustawisz root na 10px, wartości rem będą odpowiadać px ÷ 10 — dlatego wiele systemów projektowych ustawia rozmiar czcionki głównego elementu na 10px.

Jeśli potrzebujesz też przeliczać jednostki miar lub inżynierskie, wypróbuj nasz Konwerter jednostek mocy, Konwerter szybkości transmisji danych albo ogólny Konwerter jednostek prędkości.

Najczęściej zadawane pytania

Jak przeliczyć px na rem ręcznie, bez kalkulatora?

Podziel wartość w pikselach przez rozmiar czcionki głównego elementu. Przy domyślnej przeglądarkowej wartości 16px wzór wygląda tak: \( rem = px \div 16 \). Zatem 24px = 1,5rem, 32px = 2rem, a 12px = 0,75rem. W drugą stronę mnożysz: \( px = rem \times 16 \). Jeśli projekt ustawia inny rozmiar głównego elementu, np. 10px w popularnym triku 62,5%, wystarczy zastąpić 16 tą wartością.

Czym różni się em od rem i kiedy stosować każdą z nich?

rem zawsze odnosi się do rozmiaru czcionki elementu głównego, więc 1,5rem znaczy to samo w każdym miejscu dokumentu. em odnosi się do rozmiaru czcionki elementu nadrzędnego (albo samego elementu we właściwościach takich jak padding i line-height), więc kumuluje się w zagnieżdżonym kodzie. Zwykła zasada: używaj rem dla rozmiarów czcionek i odstępów, aby wartości były przewidywalne i respektowały preferencje użytkownika; używaj em tam, gdzie chcesz, aby coś skalowało się wraz z lokalnym tekstem, np. padding przycisku.

Ile pikseli to 1pt i jaka jest zależność między pt, px i calami?

CSS definiuje piksel odniesienia tak, że \( 1\text{in} = 96\text{px} = 72\text{pt} \). Zatem 1pt to \( 96/72 \approx 1.3333 \)px, a 1px to 0,75pt. Dlatego edytory tekstu i narzędzia do projektowania do druku, pracujące na punktach, pokazują inne liczby niż CSS: czcionka 12pt wyświetla się na ekranie jako 16px. Konwerter używa dokładnie tego stosunku w wynikach dla pt.

Dlaczego moje wartości em nie zgadzają się z tym, co pokazuje przeglądarka?

Są dwie typowe przyczyny. Po pierwsze, em się kumuluje: jeśli element nadrzędny ma font-size 1,25em przy głównym elemencie 16px (czyli 20px), a element podrzędny ustawisz na 1,5em, będzie miał 30px, a nie 24px. Po drugie, we właściwościach takich jak padding, margin i line-height elementu em odnosi się do rozmiaru czcionki samego tego elementu, a nie nadrzędnego. W konwerterze wpisz w takich przypadkach obliczony rozmiar czcionki samego elementu jako rozmiar czcionki elementu nadrzędnego.

Czy wartości vw i vh są takie same na każdym ekranie?

Nie. 1vw to 1% bieżącej szerokości viewportu, więc ta sama wartość vw odpowiada różnej liczbie pikseli przy różnych rozmiarach okna. Na przykład 10vw to 192px na ekranie o szerokości 1920px, ale tylko 39px na telefonie o szerokości 390px. Przeliczaj vw/vh na px tylko dla konkretnego rozmiaru viewportu — wpisz w kalkulatorze dokładne wymiary, na których Ci zależy, i powtórz obliczenia dla pozostałych breakpointów.

Jak sprawdzić, jaki rozmiar czcionki głównego elementu faktycznie używa dana strona?

Otwórz narzędzia deweloperskie przeglądarki, zbadaj element <html> i sprawdź jego obliczony font-size w panelu Styles lub Computed. Jeśli żadna reguła CSS go nie nadpisuje, obowiązuje domyślna wartość przeglądarki, czyli 16px. Uwaga: niektóre strony stosują trik 62,5%, ustawiając główny element na 10px, tak by 1rem = 10px. Sprawdź też, czy jakieś rozszerzenie przeglądarki albo ustawienie minimalnego rozmiaru czcionki nie zmienia efektywnej wartości.

Co jest lepsze dla dostępności: px czy rem?

Do rozmiarów czcionek zwykle poleca się rem, ponieważ skaluje się, gdy użytkownik zwiększy podstawowy rozmiar tekstu w przeglądarce, podczas gdy tekst w px pozostaje stały i może ignorować tę preferencję. Ma to znaczenie dla osób słabowidzących i jest wymagane przez wytyczne dostępności, takie jak WCAG. px nadaje się natomiast doskonale dla obramowań, cieni i cienkich linii, gdzie skalowanie jest niepożądane. Praktyczne podejście: rem dla typografii i odstępów, px dla detali dekoracyjnych, których rozmiar musi pozostać dokładny w pikselach, a clamp() z rem i vw dla płynnej typografii.