Jak używać
- W zakładce CSS wklej arkusz stylów do edytora.
- W polu „Bazowy rozmiar czcionki” wpisz rozmiar czcionki elementu html w pikselach.
- Ustaw „Kierunek” na „px → rem” lub „rem → px”.
- W polu „Właściwości” wybierz „Wszystkie właściwości” albo „Tylko właściwości czcionki”.
Przykłady
Odstępy karty produktu z obramowaniem 1px
.karta-produktu {
padding: 24px;
gap: 12px;
border: 1px solid #ddd;
}.karta-produktu {
padding: 1.5rem;
gap: 0.75rem;
border: 1px solid #ddd;
}Zmiana jednostek tylko w typografii
.opis-produktu {
font-size: 18px;
line-height: 28px;
letter-spacing: 0.5px;
padding: 20px;
}.opis-produktu {
font-size: 1.125rem;
line-height: 1.75rem;
letter-spacing: 0.031rem;
padding: 20px;
}Powrót z rem do pikseli
.lista-ofert {
gap: 0.75rem 2rem;
margin-bottom: 1.5rem;
}.lista-ofert {
gap: 12px 32px;
margin-bottom: 24px;
}Wskazówki
- Uporządkuj przekonwertowany plik narzędziem Formatowanie CSS.
- Zmniejsz plik narzędziem Minifikacja CSS.
FAQ
Ile pikseli ma 1 rem i czym rem różni się od em?
1 rem odpowiada rozmiarowi czcionki elementu html: przy 16px jest to 16px. Aby przeliczyć px na rem, podziel wartość przez ten rozmiar. Em liczy się względem rozmiaru czcionki rodzica, dlatego narzędzie używa wartości z pola „Rozmiar czcionki rodzica dla em”. Jednostek em w arkuszu CSS nie konwertuje.
Dlaczego wartości 1px zostają bez zmian?
Opcja „Zostaw 1px” zachowuje niezerowe wartości od −1px do 1px, np. cienkie obramowania. Wyłącz ją, jeśli chcesz przeliczyć również te wartości; działa tylko dla kierunku „px → rem”.
Czy można przeliczyć px na rem w media queries?
Włącz „Konwertuj media queries”, aby przeliczyć także wartości w parametrach @media i @container. Pamiętaj, że rem w media queries odnosi się do domyślnego rozmiaru czcionki przeglądarki, a nie rozmiaru ustawionego dla elementu html.
Na co uważać przy konwersji wartości w calc()?
Narzędzie zamienia 0px na 0 również wewnątrz calc(). Może to utworzyć niepoprawne wyrażenie, np. calc(0 + 0.625rem), dlatego sprawdź takie miejsca po konwersji.
Czy mój kod CSS jest wysyłany na serwer?
Konwersja odbywa się w przeglądarce: narzędzie nie wysyła wartości ani CSS na serwer. Wartości i CSS nie są zapisywane; lokalnie zapamiętywane są tylko ustawienia, ostatnia zakładka i powiązanie rozmiaru czcionki rodzica z rozmiarem bazowym.