Konwerter PX na REM

Podziel wartość w pikselach przez bazowy rozmiar czcionki: rem = px / baza. Domyślna baza przeglądarki to 16px, więc 24px / 16 = 1.5rem, a 10px / 16 = 0.625rem. Dla rem liczy się wyłącznie rozmiar czcionki elementu głównego, niezależnie od zagnieżdżenia elementu – i właśnie to sprawia, że obliczenia są przewidywalne w całym arkuszu stylów.

Przy domyślnej bazie 16px 1rem = 16px, 1.5rem = 24px, a 2rem = 32px; tutaj mnożysz zamiast dzielić: px = rem x baza. Jeśli baza wynosi 14px, jak w Ant Design, 1rem spada do 14px, a 1.5rem to 21px. Wartość w rem nic nie znaczy bez podanej bazy, więc zawsze podawaj ją obok.

Rozmiar czcionki w px ignoruje rozmiar tekstu wybrany przez czytelnika w przeglądarce: ktoś, kto ustawił domyślne 20px, i tak dostanie twoje zakodowane na sztywno 14px. rem mierzy się względem tego ustawienia, więc wszystkie rozmiary skalują się razem. Kryterium sukcesu 1.4.4 WCAG 2.2 wymaga, by tekst przetrwał powiększenie do 200 %, a skala typograficzna oparta na rem robi to bez ani jednej dodatkowej media query.

rem zawsze odnosi się do rozmiaru czcionki głównego elementu html. em odnosi się do rozmiaru czcionki elementu, na którym go zapisano – z wyjątkiem samej właściwości font-size, gdzie liczy się rozmiar czcionki rodzica. Dlatego zagnieżdżone rozmiary czcionki się kumulują: 0.9em w 0.9em w 0.9em daje 0.729 wartości wyjściowej. rem nigdy się nie kumuluje i dlatego jest bezpieczniejszym wyborem dla skal typograficznych i odstępów w układzie.

Używaj rem do wypełnień i marginesów, które mają oddychać, gdy tekst rośnie: padding przycisków, odstępy w kartach, odstępy sekcji. Dla cienkich linii zostaw px: obramowanie 1px pozostaje ostre, podczas gdy jego odpowiednik w rem może zostać zaokrąglony do zera lub rozmyć się przy niektórych poziomach powiększenia. Właśnie dlatego konwersja hurtowa na tej stronie domyślnie zostawia wartości 1px i 2px w px.

Zostań przy 16px, o ile framework nie wymusza czegoś innego, bo odpowiada to domyślnym ustawieniom przeglądarki. Ant Design używa bazy 14px. Sztuczka z 62,5 % ustawia html { font-size: 62.5% }, dzięki czemu 1rem = 10px, a rachunek sprowadza się do px / 10: 24px to 2.4rem. Nadal podąża za ustawieniem czytelnika – 62,5 % domyślnych 20px to 12.5px – ale musisz potem dopisać body { font-size: 1.6rem }, inaczej każdy akapit renderuje się w 10px, a komponenty zewnętrzne przygotowane dla bazy 16px wyjdą za małe. Wszystkie trzy bazy są w tabeli powyżej.

Odczytaj wartość w inspektorze i podziel przez swoją bazę: nagłówek 28px to 1.75rem przy bazie 16px, a podpis 12px to 0.75rem. Dev Mode potrafi też sam wypisywać rem – otwórz ustawienia Inspect obok listy języków, wybierz „Set unit scale” i podaj swój bazowy rozmiar czcionki (domyślnie 1rem = 16px). Wklej cały wyeksportowany blok do pola konwersji hurtowej powyżej, aby przepisać wszystkie wartości naraz.

Tak i zwykle jest to lepsze rozwiązanie. Wewnątrz media query rem odnosi się do początkowego rozmiaru czcionki przeglądarki, a nie do twojej reguły html, więc punkt przełamania 48rem to 768px przy ustawieniach domyślnych i rośnie dla czytelników, którzy powiększyli tekst. em zachowuje się tam tak samo. Punkty przełamania zapisane w px pozostają stałe niezależnie od wyboru czytelnika.

Nie. Przeglądarki liczą długości subpikselowe i przy rysowaniu przyciągają je do pikseli urządzenia, więc 0.9375rem renderuje się dokładnie jako 15px przy bazie 16px. Zaokrąglenie do 0.94rem przesuwa to do 15.04px, a ten błąd kumuluje się w siatce lub w rytmie pionowym. Skopiuj dokładną wartość wypisaną przez konwerter i pozostaw przyciąganie przeglądarce.

CSS definiuje 1px jako 1/96 cala, a 1pt jako 1/72 cala, więc 1px = 0.75pt i 16px = 12pt; to właśnie ta proporcja stoi za kolumną punktów w tabeli. dp w Androidzie to osobny system, w którym 1dp = 1px przy 160 dpi, dlatego materiałowy odstęp 16dp wypada w sieci blisko 16px, a nie w przeliczeniu na rem.