Przejdź do treści
TextArray
100% lokalnie

Konwerter jednostek CSS

Przeliczaj długości CSS między px, rem, em, pt i % przy dowolnym rozmiarze bazowym.

Wejście
Wynik

Konwerter jednostek CSS

Wklej wartości CSS, jedną na wiersz — 16px, 1.5rem, 12pt, 150% — a konwerter natychmiast je przeliczy. Sama liczba jest odczytywana w jednostce z pola „Z jednostki", natomiast jednostka zapisana wprost w wierszu ma zawsze pierwszeństwo, więc w jednej liście spokojnie wymieszasz piksele i remy. Cel wybierzesz w polu „Na jednostkę", albo wybierz „Wszystkie jednostki" i zobacz cały łańcuch naraz: 16px = 1rem = 12pt = 100%. Wiersze, które nie są czystą wartością, przechodzą do wyniku bez zmian — zabłąkany komentarz niczego nie zepsuje.

Cała matematyka opiera się na jednej liczbie: rozmiarze bazowym, czyli rozmiarze pisma elementu głównego w pikselach. Przeglądarki mają domyślnie 16px — dlatego 1rem zwykle równa się 16px, a 100% odpowiada bazie. Ustaw bazę na 10 dla klasycznego triku z 62,5%, przy którym 1,5rem to dokładnie 15px, albo dopasuj ją do własnego design systemu. Punkty definiuje samo CSS: 1px to 1/96 cala, a 1pt to 1/72 cala, więc 16px to dokładnie 12pt niezależnie od bazy. Opcja miejsc dziesiętnych ogranicza precyzję do sześciu miejsc, a końcowe zera są obcinane.

Rem to jednostka dostępności: skaluje się z rozmiarem pisma ustawionym przez czytelnika w przeglądarce, więc tekst w remach rośnie, gdy ktoś zwiększy domyślny rozmiar, podczas gdy piksele zostają sztywne. Em liczy tu tak samo, ale w prawdziwym arkuszu odnosi się do rozmiaru pisma samego elementu, więc zagnieżdżone wartości em się mnożą, a rem nie — konwerter zakłada płaski przypadek względem korzenia.

Wszystko działa lokalnie w twojej przeglądarce — nic nie jest wysyłane i na nic nie czekasz. Przeliczoną listę skopiujesz lub pobierzesz jako plik .txt.

Częste pytania

Dlaczego używać rem zamiast px?
Wartości w remach skalują się z rozmiarem pisma ustawionym przez czytelnika w przeglądarce — osoby potrzebujące większego tekstu naprawdę go dostają. Piksele ignorują to ustawienie. Przejście projektu z px na rem to jedna z najtańszych poprawek dostępności.
Czym jest rozmiar bazowy i dlaczego domyślnie wynosi 16?
To rozmiar pisma elementu głównego w pikselach — punkt odniesienia dla 1rem, 1em i 100%. Każda duża przeglądarka ma domyślnie 16px, więc 16 to właściwa baza, o ile twój arkusz nie zmienia korzenia — na przykład html { font-size: 62.5% } robi z bazy 10.
Czym różni się em od rem?
Rem zawsze odnosi się do rozmiaru pisma korzenia; em do bieżącego elementu, więc zagnieżdżone wartości em się mnożą. Ten konwerter liczy obie względem jednej bazy — przypadek płaski. W głęboko zagnieżdżonym kodzie prawdziwe wartości em mogą się różnić.
Co się dzieje z wierszami, które nie są wartościami?
Przechodzą do wyniku bez zmian, a podsumowanie liczy je jako pominięte. Przeliczane są tylko czyste wartości jak 16px, 1.5rem albo sama liczba — całe deklaracje CSS są celowo poza zakresem.
Czy mój tekst jest gdzieś wysyłany?
Nie. Narzędzie działa wyłącznie w twojej przeglądarce, a dane wejściowe nigdy nie opuszczają urządzenia.