Konwerter Jednostek CSS Online
Konwertuj między px, rem, em, vw, vh i innymi jednostkami CSS, w przeglądarce.
Click any value to copy
Dlaczego warto
Responsywny design bez ręcznych obliczeń
Wszystkie jednostki CSS
px, rem, em, %, vw, vh, pt i więcej. Natychmiastowa konwersja między dowolną parą.
Konfigurowalna baza
Dostosuj bazowy rozmiar czcionki, aby obliczać precyzyjne wartości rem/em dla swojego projektu.
Natychmiastowe
Wyniki w czasie rzeczywistym podczas pisania. Bez przycisków, bez czekania.
Bez rejestracji
Narzędzie do codziennego użytku dostępne natychmiastowo, bez kont i instalacji.
Jak to działa
Trzy kroki, żadnych komplikacji
Wprowadź wartość
Wpisz wartość liczbową i wybierz jednostkę źródłową (np. 24px). Dostosuj bazowy rozmiar czcionki, jeśli różni się od 16px.
Uzyskaj wszystkie odpowiedniki
Konwerter natychmiast oblicza odpowiednik w rem, em, %, vw, pt i innych często używanych jednostkach CSS.
Użyj wartości w swoim CSS
Skopiuj potrzebną wartość bezpośrednio do arkusza stylów. Bez ręcznych obliczeń, bez błędów.
FAQ
Masz pytania?
Używaj px dla wartości, które nie powinny skalować się z preferencjami użytkownika: cienkie obramowania (1px), cienie, pozycje bezwzględne. Używaj rem dla rozmiarów czcionki i odstępów, które powinny respektować preferencje dostępności użytkownika: jeśli użytkownik zwiększy bazowy rozmiar czcionki w przeglądarce (robią to użytkownicy czytników ekranowych i osoby słabowidzące), wartości rem skalują się automatycznie. Używaj em dla wartości względem rozmiaru czcionki elementu nadrzędnego: przydatne w komponentach, które muszą zachowywać wewnętrzne proporcje niezależnie od kontekstu.
Wartość 16px jako bazowy rozmiar czcionki została ustalona przez przeglądarki pod koniec lat 90., wywodząc się z typowych rozdzielczości monitorów tamtych czasów (72–96 DPI) i standardów czytelności tekstu na ekranie. Jest w przybliżeniu równoważna 12 punktom typograficznym (12pt), standardowemu rozmiarowi tekstu podstawowego w dokumentach drukowanych od ery Gutenberga. W3C przyjmuje ją jako wartość początkową właściwości font-size.
Specyfikacja WCAG 1.4.4 (Resize Text) wymaga, aby tekst mógł być powiększony do 200% bez utraty treści lub funkcjonalności. Jeśli używasz px dla rozmiarów czcionki, tekst nie skaluje się, gdy użytkownik zmienia bazowy rozmiar w ustawieniach przeglądarki (Ustawienia > Wygląd > Rozmiar czcionki w Chrome/Firefox). Jeśli używasz rem, tekst skaluje się automatycznie. Dlatego wytyczne dostępności zalecają rem dla font-size i line-height, ale dopuszczają px dla obramowań i dekoracji.
vw (szerokość okna przeglądarki) i vh (wysokość okna przeglądarki) to procenty rozmiaru okna przeglądarki. 1vw = 1% szerokości okna. W przypadku płynnej typografii używa się funkcji CSS clamp(): font-size: clamp(1rem, 2.5vw, 2rem) definiuje minimalny rozmiar (1rem), preferowany rozmiar skalujący się z oknem przeglądarki (2.5vw) i maksimum (2rem). Daje to tekst płynnie rosnący wraz z rozmiarem ekranu bez nagłych skoków, eliminując potrzebę media queries dla typografii.
CSS posiada bezwzględne jednostki fizyczne: cm, mm, in, pt i pc. Problem polega na tym, że na ekranach jednostki te nie odpowiadają swoim rzeczywistym fizycznym wymiarom. Na ekranach o wysokiej gęstości (Retina, 4K) 1cm w CSS może mierzyć 0,8cm lub 1,2cm fizycznie w zależności od urządzenia i zadeklarowanego DPI. Tylko w mediach drukowanych (zapytania media print) cm i mm dokładnie odpowiadają pomiarowi fizycznemu. Dlatego projektanci webowi używają px, rem, em i jednostek względnych, rezerwując jednostki bezwzględne dla stylów druku.
Jednostki CSS: specyfikacja, historia i sztuczka z 62,5%
Specyfikacja CSS Units and Values (CSS Values Level 3) została opublikowana przez W3C w 2015 roku i ustandaryzowała jednostki viewport (vw, vh, vmin, vmax), które przeglądarki zaczęły implementować eksperymentalnie od 2012 roku. Jednostki viewport rozwiązują fundamentalny problem responsywnego projektowania: tworzenie układów i typografii adaptujących się do rozmiaru ekranu bez media queries. CSS Values Level 4 (w zaawansowanym stanie wersji roboczej) wprowadza jednostki zapytań kontenerowych (cqw, cqh, cqi, cqb, cqmin, cqmax), będące procentami najbliższego kontenera CSS zamiast viewportu, obsługiwane we wszystkich głównych przeglądarkach od końca 2022 roku.
Sztuczka z 62,5% to historyczna technika upraszczająca użycie rem: ustawiając font-size: 62,5% na elemencie html (odpowiadające 10px przy założeniu bazy 16px), obliczenia rem stają się trywialne (1,6rem = 16px, 2,4rem = 24px). Spopularyzował ją Jonathan Snook ok. 2011 roku w kontekście rosnącego responsywnego projektowania. Jednak technika ta ma problem z dostępnością: jeśli użytkownik ma skonfigurowany bazowy rozmiar czcionki inny niż 16px w przeglądarce, wartość 62,5% dostosowuje go nieprawidłowo, psując skalowanie. Dlatego nowoczesne wytyczne dostępności odradzają tę technikę na rzecz pozostawienia niezmienionego font-size na html i używania rem bezpośrednio.
CSS Values Level 4 wprowadza również jednostki typograficzno-relatywne: cap (wysokość dużej litery), ch (szerokość glifu 0), ic (szerokość glifu CJK 水), lh (line-height elementu), rlh (root line-height), ex (x-height). Jednostki te pozwalają tworzyć odstępy idealnie proporcjonalne do typografii bez polegania na stałych wartościach numerycznych. Jednostka ch jest szczególnie przydatna do ustawiania maksymalnej szerokości kolumn tekstu (max-width: 65ch to optymalna miara czytelności według badań typograficznych, odpowiadająca w przybliżeniu 65 znakom na linię).