Konwerter PX na REM
Aby przeliczyć px na rem, podziel wartość w pikselach przez bazowy rozmiar czcionki elementu głównego: rem = px / baza. Przy domyślnej bazie przeglądarki 16px mamy 24px / 16 = 1.5rem. Zmień bazę poniżej – 14px dla Ant Design, 10px dla sztuczki z 62,5 % – a wartości rem i em pójdą za nią; wartość w punktach zależy natomiast od pikseli, bo 1px to zawsze 0,75pt.
Przelicz px, rem, em i pt, a następnie sprawdź zamiany w CSS.
Dodatni korzeń; moduł ≤1 miliard; sześć zaokrąglonych miejsc. Podgląd ograniczony do 8–72px. CSS ≤100 000 znaków. Zamieniane są tylko niecytowane tokeny px w wartościach; komentarze, ciągi, URL i content pozostają. Sprawdź wynik: ograniczona analiza leksykalna, bez walidacji CSS. Liczby CSS z wykładnikiem (np. 1e+3px lub 1e-3px) pozostają w całości bez zmian.
Przeliczenie odbywa się na tej stronie, bez wysyłania wpisanych liczb ani CSS do usługi konwersji.
Pole em zakłada, że element dziedziczy bazowy rozmiar czcionki ustawiony powyżej. W CSS em odnosi się do rozmiaru czcionki samego elementu, a do rozmiaru rodzica wtedy, gdy ustawiasz nim właściwość font-size.
Konwersja hurtowa: wklej CSS lub listę wartości w px
Każda wartość w px zostaje przepisana na rem względem bazowego rozmiaru czcionki powyżej.
Skopiowano
Kopiowanie nie powiodło się. Zaznacz wynik i skopiuj ręcznie.
Jak przeliczyć px na rem?
Wzór to rem = px / bazowy rozmiar czcionki, a odwrotnie px = rem x bazowy rozmiar czcionki. Liczy się wyłącznie rozmiar czcionki głównego elementu html, niezależnie od tego, jak głęboko zagnieżdżony jest element – i to właśnie czyni arytmetykę rem przewidywalną. Przy domyślnej bazie 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem i 40px = 2.5rem.
Nie zaokrąglaj wyniku. 15px to przy bazie 16px dokładnie 0.9375rem; zaokrąglenie do 0.94rem przesuwa renderowany rozmiar do 15.04px i psuje wyrównanie w siatce. Przeglądarki liczą długości subpikselowe i przy rysowaniu przyciągają je do siatki pikseli urządzenia, więc kopiuj dokładną wartość podaną przez konwerter. Konwerter podaje do sześciu miejsc po przecinku: dokładnie przy bazach, które dzielą się równo, jak 16px i 10px, i z dokładnością do milionowej części rem przy bazie takiej jak 14px, która się nie dzieli.
Tabela px na rem dla bazy 16px, 14px i 10px
Ta sama wartość w pikselach daje trzy różne wartości rem, zależnie od bazy ustawionej w projekcie, dlatego tabela podaje wszystkie trzy, a do tego odpowiednik w punktach (CSS definiuje 1px jako 1/96 cala, a 1pt jako 1/72 cala, więc 1px = 0.75pt). Kolumny dla 16px i 10px są dokładne. Przy bazie 14px dzielenie zwykle nie wychodzi równo, więc te wartości są zaokrąglone do czterech miejsc po przecinku i oznaczone znakiem przybliżenia; konwerter powyżej pokazuje więcej cyfr.
| Piksele | rem (baza 16 px) | rem (baza 14 px) | rem (baza 10 px) | Punkty |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem czy em: której jednostki użyć?
Praktyczny podział: rem do wszystkiego, co ma podążać za rozmiarem tekstu czytelnika, em do wartości, które muszą podążać za rozmiarem czcionki samego elementu, a px tylko tam, gdzie długość musi pozostać fizycznie stała. Kolumna z przykładem zakłada bazę 16px i rodzica o rozmiarze 16px.
| Jednostka | Odnosi się do | 20px to | Najlepsza do | Podąża za rozmiarem tekstu czytelnika |
|---|---|---|---|---|
| px | Do niczego – jednostka bezwzględna (1px = 1/96 cala) | 20px | Włoskowate obramowania, obwódki fokusu, dokładne rozmiary ikon | Nie |
| rem | Rozmiar czcionki głównego elementu html | 1.25rem | Rozmiary tekstu, odstępy, punkty przełamania, całe skale typograficzne | Tak |
| em | Rozmiar czcionki samego elementu (rodzica przy ustawianiu font-size) | 1.25em | Wypełnienie, które ma rosnąć razem z etykietą | Tak |
| % | Wartość rodzica dla tej właściwości | 125% | Płynne szerokości i stare drzewa font-size | Tak (font-size) |
px czy rem do wypełnień, marginesów i obramowań?
Używaj rem do wypełnień i marginesów, które mają oddychać, gdy tekst rośnie: padding przycisków, odstępy w kartach, odstępy sekcji, przerwy w siatce. Dla cienkich linii zostaw px. Obramowanie 1px to jeden ostry piksel niezależny od urządzenia, podczas gdy to samo obramowanie zapisane jako 0.0625rem może zostać zaokrąglone do zera lub rozmyć się przy niektórych poziomach powiększenia; to samo dotyczy obwódek fokusu i separatorów o grubości 2px. Dlatego konwersja hurtowa powyżej domyślnie zostawia wartości 1px i 2px nietknięte, a przepisuje całą resztę.
Media queries to drugie miejsce, w którym rem się opłaca. Wewnątrz media query rem odnosi się do początkowego rozmiaru czcionki przeglądarki, a nie do twojej reguły html: punkt przełamania 48rem to 768px przy ustawieniach domyślnych i rośnie dla czytelnika, który powiększył tekst. Punkty przełamania w px nie ruszają się nigdy.
Jak przeliczyć px na rem w Figmie, VS Code i Tailwindzie?
Figma mierzy w px, ale Dev Mode potrafi wypisywać rem: otwórz ustawienia Inspect, wybierz „Set unit scale” i podaj swój bazowy rozmiar czcionki (domyślnie 1rem = 16px). Rozszerzenia VS Code takie jak cssrem przeliczają przez autouzupełnianie i udostępniają bazę w ustawieniach – cssrem.rootFontSize, domyślnie 16 – więc sprawdź, czy pasuje, zanim zaufasz wynikowi w projekcie na 14px. Cały plik wklej do pola konwersji hurtowej powyżej i najpierw ustaw bazę. Domyślna skala Tailwinda jest już oparta na rem przy bazie 16px: jedna jednostka odstępu to 0.25rem (4px), więc 16px to 4, 24px to 6, a 40px to 10.
Źródła
O Konwerterze PX na REM
Przelicz px, rem, em i pt, a następnie sprawdź zamiany w CSS.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Dodatni korzeń; moduł ≤1 miliard; sześć zaokrąglonych miejsc. Podgląd ograniczony do 8–72px. CSS ≤100 000 znaków. Zamieniane są tylko niecytowane tokeny px w wartościach; komentarze, ciągi, URL i content pozostają. Sprawdź wynik: ograniczona analiza leksykalna, bez walidacji CSS. Liczby CSS z wykładnikiem (np. 1e+3px lub 1e-3px) pozostają w całości bez zmian.
Przypadki użycia
Jak używać
Ustaw korzeń, edytuj dowolną jednostkę i opcjonalnie wklej CSS. ≤2px zachowuje małe wymiary; CSV zawiera unikalne przeliczone pary liczb.
Dodatni korzeń; moduł ≤1 miliard; sześć zaokrąglonych miejsc. Podgląd ograniczony do 8–72px. CSS ≤100 000 znaków. Zamieniane są tylko niecytowane tokeny px w wartościach; komentarze, ciągi, URL i content pozostają. Sprawdź wynik: ograniczona analiza leksykalna, bez walidacji CSS. Liczby CSS z wykładnikiem (np. 1e+3px lub 1e-3px) pozostają w całości bez zmian.
Porady Pro
- Dodatni korzeń; moduł ≤1 miliard; sześć zaokrąglonych miejsc. Podgląd ograniczony do 8–72px. CSS ≤100 000 znaków. Zamieniane są tylko niecytowane tokeny px w wartościach; komentarze, ciągi, URL i content pozostają. Sprawdź wynik: ograniczona analiza leksykalna, bez walidacji CSS. Liczby CSS z wykładnikiem (np. 1e+3px lub 1e-3px) pozostają w całości bez zmian.
- rem = px / rozmiar korzenia; em zakłada ten sam kontekst co korzeń; pt = px × 0,75 przy 96 pikselach CSS na cal.
Często zadawane pytania
Tutaj kontekst em jest równy korzeniowi. W CSS zależy od odpowiedniego rozmiaru czcionki i zagnieżdżenia.
Ciągi, komentarze, funkcje URL i content są zachowane. Sprawdź arkusz; złożony lub błędny CSS nie jest walidowany.