Konwerter px na rem

Wpisz wartość w dowolnej jednostce i otrzymaj jej odpowiednik w pozostałych. Domyślnie 1rem = 16px, czyli rozmiar czcionki przeglądarek; zmień go, jeśli Twój CSS używa innego. Możesz też wkleić blok CSS i zamienić wszystkie jego px na rem za jednym razem.

Przelicznik jednostek

px
px
px
rem odnosi się do rozmiaru czcionki elementu głównego (html), a em i % do rozmiaru elementu nadrzędnego; 1pt = 1/72 cala = 1,333px; 1vw = 1% szerokości okna.

Tabela przeliczeń

pxremempt%

Konwersja bloku CSS z px na rem

px, rem czy em: czego używać?

Piksel (px) to jednostka stała. rem („root em”) odnosi się do rozmiaru czcionki elementu html, który we wszystkich przeglądarkach wynosi 16px, chyba że użytkownik go zmieni: dlatego 1rem = 16px, 1,5rem = 24px, a 0,875rem = 14px. em odnosi się do rozmiaru czcionki elementu nadrzędnego, więc kumuluje się przy zagnieżdżaniu elementów.

Używanie rem dla rozmiarów czcionek, marginesów i odstępów respektuje ustawienia osób, które powiększają czcionkę w przeglądarce z powodu problemów ze wzrokiem – tak zalecają wytyczne dostępności WCAG. Piksele nadal przydają się do cienkich obramowań i cieni.

Wzór na przeliczenie px na rem

rem = px ÷ rozmiar bazowy. Przy domyślnej bazie 16px: 24px ÷ 16 = 1,5rem. I odwrotnie: px = rem × 16. Niektóre projekty ustawiają html { font-size: 62.5%; }, aby 1rem wynosił 10px i łatwiej było liczyć; w takim przypadku wpisz 10 jako rozmiar bazowy.

vw i vh to 1% szerokości i wysokości okna: przydatne do płynnej typografii razem z clamp(), np. font-size: clamp(1rem, 2.5vw, 2rem).