Konwerter PX na REM

Jak korzystać z konwertera PX na REM

1. Ustaw Rozmiar czcionki głównej (px). We wszystkich popularnych przeglądarkach wynosi on 16, chyba że twój arkusz stylów go zmienia. Przyciski pod polem przełączają na 16 px, 10 px (sztuczka html { font-size: 62.5%; }) lub 18 px.
2. Jeśli pracujesz z em, ustaw Rozmiar czcionki rodzica dla em (px): obliczony rozmiar czcionki elementu, który zawiera stylowany element.
3. W sekcji Przelicz wartość wpisz liczbę w polu Piksele (px), REM lub EM. Dwa pozostałe pola aktualizują się w trakcie pisania, a wiersz poniżej pokazuje użyte dzielenie.
4. Tabela zbiorczej konwersji zawiera popularne rozmiary. Zastąp pole Wartości w pikselach własnymi tokenami projektowymi (skala odstępów, skala typograficzna…) i użyj przycisku Kopiuj tabelę, aby wkleić wynik do arkusza kalkulacyjnego lub dokumentacji projektu.
5. Aby przenieść istniejący kod, wklej go w pole CSS do konwersji, wybierz opcje i kliknij Konwertuj px na rem. Wczytaj przykład pokazuje mały arkusz stylów. Skopiuj Przekonwertowany CSS przyciskiem Kopiuj.

Wzory

• rem = px ÷ rozmiar czcionki głównej. Przy domyślnych 16 px: 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ rozmiar czcionki rodzica. Wewnątrz nagłówka o rozmiarze 20 px: 10px = 0,5em.
• px = rem × rozmiar czcionki głównej oraz px = em × rozmiar czcionki rodzica.

W samym kodzie CSS liczby zapisuje się z kropką: 1.5rem, a nie „1,5rem”.

rem czy em – którego używać?

rem („root em”) zawsze odnosi się do rozmiaru czcionki elementu html, więc 1.5rem oznacza to samo w każdym miejscu strony. To najbezpieczniejszy wybór dla rozmiarów czcionek, odstępów, maksymalnych szerokości i przerw w układzie.

em odnosi się do rozmiaru czcionki samego elementu (dla font-size – do rozmiaru rodzica). Wartości się kumulują: lista z rozmiarem 0,9em zagnieżdżona trzy razy kończy na 0,9 × 0,9 × 0,9 = 73% podstawy. Dlatego em przydaje się do rzeczy, które mają skalować się razem z własnym tekstem (padding przycisku, rozmiar ikony obok etykiety), a bywa ryzykowne dla globalnej typografii.

Dlaczego rem ma znaczenie dla dostępności

Wiele osób zwiększa domyślny rozmiar czcionki w ustawieniach przeglądarki (np. z 16 do 20 lub 24 px) zamiast powiększać każdą stronę. Rozmiary zapisane w px ignorują tę preferencję; rozmiary w rem lub em ją respektują. Używanie rem dla tekstu i odstępów pozwala całemu układowi rosnąć zgodnie z wyborem czytelnika, co pomaga spełnić kryterium sukcesu WCAG 2.2 1.4.4 (zmiana rozmiaru tekstu do 200%).

Z tego samego powodu unikaj ustawiania html { font-size: 16px; } w px: użyj wartości procentowej (100% albo 62.5%, jeśli chcesz, by 1rem = 10px), aby ustawienie użytkownika nadal działało.

Co zmienia konwerter CSS

Zastępuje liczby z jednostką px w deklaracjach wartością podzieloną przez rozmiar czcionki głównej. Nigdy nie zmienia komentarzy, napisów ani wartości url().

• Zostaw szerokości obramowań i konturów w px: border, border-*-width, outline, outline-offset i column-rule pozostają w px, więc cienkie linie zachowują ostrość. border-radius jest nadal konwertowany.
• Zostaw wartości 1px: każda wartość od −1px do 1px pozostaje bez zmian.
• Konwertuj media queries na em (podstawa 16px): w warunkach @media rem i em zawsze odnoszą się do początkowego rozmiaru czcionki przeglądarki, a nigdy do twojej reguły html, więc narzędzie dzieli tam przez 16 i zapisuje em niezależnie od rozmiaru głównego. Gdy opcja jest odznaczona, media queries zachowują px.