Co robi konwerter px na rem i em
Ten konwerter przelicza wartości pikselowe (px) na rem i em, a także w drugą stronę. Wartość można wpisać w dowolnej z trzech jednostek — px, rem lub em — a narzędzie automatycznie oblicza i wyświetla odpowiedniki w pozostałych dwóch. Dodatkowo pozwala ustawić własny bazowy rozmiar czcionki root oraz rozmiar czcionki kontekstu em, dzięki czemu przeliczenia są dokładne dla konkretnego projektu, nad którym się pracuje. Każda konwersja odbywa się bezpośrednio w Państwa przeglądarce. Żadne dane nie są przesyłane do BroBroGo.
Jak wprowadzić wartości i odczytać wyniki
Pole „Wartości” przyjmuje liczbę oznaczającą długość w px, rem lub em. Po edycji dowolnego z tych trzech pól pozostałe dwa aktualizują się na bieżąco, w trakcie pisania — dokładnie tak, jak podpowiada wskazówka na stronie: „Wpisz wartość w px, rem lub em — pozostałe dwa pola zaktualizują się automatycznie.” Gdy przeliczenie się powiedzie, narzędzie potwierdza to komunikatem: „Przeliczono we wszystkich trzech jednostkach.” Konwerter dopuszcza również wartości ujemne w pikselach, więc można nim posłużyć się także przy przeliczaniu ujemnych marginesów czy przesunięć.
Bazowy rozmiar czcionki (root)
Pole „Bazowy rozmiar czcionki root (px)” określa rozmiar czcionki głównego elementu strony, względem którego liczone są wartości rem. Domyślnie wynosi 16px — a przy tej wartości domyślnej 16px odpowiada dokładnie 1rem i 1em. Rozmiar bazowy musi być liczbą większą od 0; jeśli w tym polu pojawi się nieprawidłowa wartość, konwerter wyświetli komunikat: „Bazowy rozmiar czcionki (root) musi być liczbą większą od 0.” Jeśli projekt CSS korzysta z innej bazy niż 16px, wystarczy zmienić wartość w tym polu, aby dopasować ją do własnego projektu — wszystkie wartości rem zostaną przeliczone natychmiast.
Rozmiar czcionki kontekstu em
Pole „Rozmiar czcionki kontekstu em (px)” służy do przeliczania jednostki em, która zależy nie od głównego elementu strony, lecz od rozmiaru czcionki elementu, w którym się znajduje. Ten rozmiar nie zawsze jest tożsamy z rozmiarem bazowym root, dlatego narzędzie udostępnia dla niego osobne pole — aby prawidłowo obliczyć em, trzeba ustawić kontekst na wartość czcionki właściwego elementu nadrzędnego. Jeśli oba rozmiary pokrywają się, wystarczy zostawić kontekst równy bazie. Domyślnie pole to również wynosi 16px i musi być liczbą większą od 0; w przeciwnym razie pojawia się komunikat: „Rozmiar czcionki kontekstu em musi być liczbą większą od 0.”
Tabela popularnych przeliczeń px → rem
Pod polami do przeliczania znajduje się tabela „Popularne przeliczenia px → rem (baza 16px)”, pokazująca typowe wartości pikselowe przeliczone na rem przy założeniu bazowego rozmiaru czcionki 16px. Stanowi wygodny punkt odniesienia dla standardowej bazy 16px, od której zaczyna większość stron — bez konieczności ręcznego wpisywania każdej wartości osobno, jeśli akurat pracuje się z domyślnym rozmiarem czcionki.
Komunikaty o błędach
Jeśli w polu „Wartości” zostanie wpisana nieprawidłowa wartość, konwerter wyświetli komunikat: „Wprowadź liczbę do przeliczenia.” Razem z komunikatami dotyczącymi bazowego rozmiaru czcionki i kontekstu em opisanymi wyżej, to trzy sytuacje, w których narzędzie sygnalizuje, że wpisana wartość nie nadaje się do przeliczenia.
Dla kogo jest ten konwerter
Przyda się przede wszystkim osobom, które muszą przeliczyć sztywne wartości pikselowe na względne jednostki rem lub em na potrzeby responsywnego projektowania. Sprawdzi się też, gdy chce się zrozumieć, jak różne bazowe rozmiary czcionki wpływają na wartości rem, albo gdy trzeba obliczyć wartość em na podstawie rozmiaru czcionki konkretnego elementu. Konwerter jest również pomocny, gdy zależy na tym, by rozmiary skalowały się poprawnie, kiedy czytelnik zmieni domyślny rozmiar czcionki w swojej przeglądarce.
Najczęściej zadawane pytania
Jaka jest różnica między px, rem i em? Piksele (px) to stała, sztywna długość. Jednostka rem jest obliczana względem głównego (root) rozmiaru czcionki na stronie — przy bazie 16px, 1rem to dokładnie 16px. Jednostka em zależy natomiast od rozmiaru czcionki elementu, w którym się znajduje. Stosowanie rem do tekstów i odstępów pozwala na zachowanie pełnej skalowalności, gdy użytkownik zmieni domyślny rozmiar czcionki w swojej przeglądarce.
Dlaczego istnieje osobne pole dla kontekstu em? Jednostka em odnosi się do rozmiaru czcionki własnego elementu nadrzędnego, który nie zawsze jest tożsamy z elementem głównym (root). Aby prawidłowo obliczyć em, należy ustawić kontekst em na wartość czcionki tego elementu nadrzędnego. Jeśli oba rozmiary są identyczne, zachowaj wartość równą bazie.
Co jeśli mój bazowy rozmiar czcionki (root) to nie 16px? Wystarczy zmienić wartość w polu bazowego rozmiaru czcionki (root), aby dopasować ją do swojego projektu CSS — wszystkie wartości rem zostaną natychmiast przeliczone. Tabela poniżej stanowi wygodny punkt odniesienia dla standardowej bazy 16px, od której zaczyna większość stron.