Konwerter PX na REM + pełna tabela od 1 do 128px | We.Inc
Przelicz px na rem i rem na px przy dowolnym rozmiarze czcionki bazowej. Pełna tabela od 1 do 128px z klasami Tailwind, konwerter bloków CSS i pomocnik do płynnych rozmiarów clamp().
Konwerter PX na REM
Aby zamienić piksele na rem, podziel wartość w pikselach przez rozmiar czcionki elementu głównego. Przy domyślnych dla przeglądarki 16px, 24px to 1.5rem, a 12px to 0.75rem. Wpisz wartość w dowolne pole, aby przeliczyć w obie strony, zmień rozmiar bazowy, jeśli Twoja strona używa innej podstawy, albo wklej całe reguły CSS.
Popularne rozmiary przy domyślnej bazie 16px
Piksele
Typowe zastosowanie
Podpisy, małe etykiety
Tekst pomocniczy, przyciski
Tekst główny
Duży tekst główny, małe nagłówki
Nagłówki sekcji, padding kart
Nagłówki stron, odstępy między sekcjami
Nagłówki hero
Dwukierunkowy konwerter z własnym rozmiarem bazowym, pełna tabela od 1 do 128 pikseli z odpowiadającą klasą Tailwind, konwerter całych bloków CSS oraz pomocnik, który zapisuje płynne rozmiary clamp().
Ustaw rozmiar czcionki bazowej. Zostaw 16, chyba że Twój arkusz stylów ustawia inny rozmiar na elemencie html.
Wpisz wartość w pole pikseli, aby otrzymać rem, albo w pole rem, aby otrzymać piksele. Oba aktualizują się w trakcie pisania.
Przewiń tabelę, aby znaleźć dowolny rozmiar od 1 do 128 pikseli. Kliknij wiersz, aby skopiować jego wartość w rem.
Wklej CSS do konwertera bloków, aby za jednym razem zamienić każdą wartość px na rem. Zero staje się 0, a obramowania 1px zostają w pikselach, chyba że odznaczysz tę opcję.
Użyj pomocnika clamp(), aby uzyskać rozmiar czcionki, który płynnie rośnie między szerokością telefonu a desktopu.
Zostaw rozmiar czcionki html na 100% (domyślna wartość przeglądarki) zamiast ustawiać go na 62.5%. Trik z 62.5% sprawia, że 1rem to 10px, ale zmniejsza każdy zewnętrzny komponent, który zakłada 16px.
Używaj rem dla rozmiarów czcionek i większości odstępów, aby cały układ skalował się, gdy ktoś zwiększy domyślny rozmiar tekstu w przeglądarce.
Cienkie obramowania i przesunięcia box-shadow zostaw w px. Obramowanie 1px zamienione na 0.0625rem może się rozmywać lub znikać przy niektórych poziomach powiększenia.
Media queries w em lub rem także uwzględniają ustawienie czcionki użytkownika. Większość przeglądarek traktuje 1em w media query jako domyślny rozmiar przeglądarki, a nie Twoją regułę html.
Najczęściej zadawane pytania
Ile pikseli to 1rem?
1rem to rozmiar czcionki głównego elementu html. Przeglądarki domyślnie ustawiają go na 16px, więc 1rem to 16px, chyba że zmieni to strona lub odwiedzający. Jeśli odwiedzający ustawi domyślny rozmiar tekstu na 20px, 1rem staje się 20px na każdej stronie, która nie ustawiła rozmiaru bazowego na sztywno w pikselach.
Czym różni się rem od em?
rem zawsze odnosi się do rozmiaru czcionki głównego elementu html. em odnosi się do rozmiaru czcionki samego elementu (lub jego rodzica, gdy użyte w font-size). Zagnieżdżone rozmiary em mnożą się: lista 1.2em wewnątrz listy 1.2em kończy z rozmiarem 1.44 razy większym od bazowego. rem nigdy się nie kumuluje, dlatego używa go większość design systemów.
Używać px czy rem dla rozmiarów czcionek?
Używaj rem. Tekst ustawiony w px ignoruje ustawienie domyślnego rozmiaru czcionki w przeglądarce, które niektórzy zwiększają, by wygodnie czytać. Powiększenie strony nadal działa z px, ale preferencja rozmiaru czcionki już nie, więc rem jest bardziej dostępnym wyborem.
Jak klasy Tailwind przekładają się na rem?
W domyślnej skali odstępów Tailwind każdy krok to 0.25rem, czyli 4px przy bazie 16px. Zatem p-4 to 1rem (16px), a gap-6 to 1.5rem (24px). Rozmiary czcionek używają zamiast tego nazw: text-sm to 0.875rem, a text-base to 1rem. Tabela na tej stronie podaje klasę dla każdego rozmiaru, który jest w domyślnej skali.
Czy to narzędzie gdzieś wysyła mój CSS?
Nie. Każde przeliczenie odbywa się w Twojej przeglądarce i nic, co wpiszesz lub wkleisz, nie jest wysyłane.
Po co istnieje rem
Piksele w CSS to jednostki stałe. Nagłówek ustawiony na 32px pozostaje 32px nawet wtedy, gdy odwiedzający kazał przeglądarce używać większego tekstu. Jednostka rem rozwiązuje ten problem, wiążąc rozmiary z rozmiarem czcionki elementu głównego, który domyślnie podąża za ustawieniem odwiedzającego. Zmień jedną liczbę, a każdy rozmiar oparty na rem na stronie przeskaluje się razem z nią.
Dlatego rem dobrze sprawdza się w typografii, paddingach, marginesach i szerokościach kolumn tekstu. Piksele nadal mają sens tam, gdzie coś nie powinno skalować się z tekstem, na przykład separator 1px albo rozmiar obrazu o stałych wymiarach w pikselach.
rem i em obok siebie
Przykład na żywo na tej stronie ustawia ten sam rozmiar 1.25 na trzech zagnieżdżonych poziomach, raz w em i raz w rem. Wersja em rośnie na każdym poziomie, bo każde dziecko mnoży rozmiar rodzica. Wersja rem pozostaje taka sama na każdej głębokości, bo zawsze odnosi się do elementu głównego.
em nadal się przydaje, gdy coś ma skalować się z własnym tekstem, na przykład padding wewnątrz przycisku albo odstęp za ikoną. Ustaw rozmiar czcionki przycisku w rem, a padding w em, a zmiana rozmiaru czcionki przeskaluje cały przycisk.
Płynne rozmiary z clamp()
clamp(min, preferred, max) wybiera wartość preferowaną, ale nigdy nie schodzi poniżej minimum ani nie przekracza maksimum. Połączenie rem i vw w wartości preferowanej sprawia, że nagłówek płynnie rośnie wraz z szerokością okna, wciąż respektując rozmiar czcionki użytkownika.
Pomocnik wyznacza prostą między dwoma punktami, na przykład 32px na telefonie o szerokości 375px i 56px na desktopie 1280px, i zapisuje ją jako wyrażenie rem plus vw. Przetestuj wynik przy kilku szerokościach, bo bardzo strome nachylenia vw mogą sprawić, że tekst będzie rósł szybciej niż długość jego wiersza.
Przelicz
Rozmiar czcionki bazowej (px)
Piksele
(baza {n}px)
Kopiuj rem
Kopiuj px
Baza {n}px
Przelicz blok CSS
CSS z px
Ten sam CSS w rem
Zachowaj wartości 1px w px
Kopiuj przeliczony CSS
Płynny rozmiar z clamp()
Najmniejszy rozmiar (px)
Największy rozmiar (px)
Od szerokości (px)
Do szerokości (px)
Wpisz rozmiary większe od zera oraz szerokość Do większą niż szerokość Od.
Kopiuj clamp()
Zmień rozmiar okna, aby zobaczyć, jak ta linia rośnie.
em się kumuluje, rem nie
Każdy poziom poniżej ustawia font-size: 1.25 w swojej jednostce, zagnieżdżony na trzy poziomy.
Poziom {n}
Pełna tabela px na rem
Baza {n}px. Kliknij wiersz, aby skopiować jego wartość w rem.
Klasy Tailwind są pokazywane tylko przy bazie 16px, na której zbudowana jest ich skala.
Skopiowano {v}.
px na rem przy bazie {n}px, od 1 do 128 pikseli, z klasami Tailwind