Przelicz piksele na em przy dowolnym rozmiarze rodzica

Piksel zamienia się na em jednym dzieleniem: liczba pikseli przez rozmiar pisma rodzica. Przy domyślnym ustawieniu przeglądarki rodzic ma 16 px, więc 24 piksele dają 1,5 em, a 14 pikseli daje 0,875 em. Jednostka em odnosi się do rozmiaru tekstu elementu nadrzędnego[1].

To kierunek z codziennej pracy nad interfejsem. Makieta przychodzi z wymiarami w pikselach, bo tak liczą programy graficzne, a arkusz stylów zapisuje się w em, żeby wymiar szedł za rozmiarem pisma w danym miejscu układu.

Wynik ma cztery miejsca po przecinku, bo przy rodzicu 16 px pojedynczy piksel to dokładnie 0,0625 em, a stopnie pisma dają liczby w rodzaju 0,875 czy 1,125.

Niżej znajdziesz tabelę 30 wymiarów przy trzech rozmiarach rodzica, tabelę ośmiu sytuacji z odpowiedzią, którą jednostkę wybrać, oraz trzy miejsca, w których stosuje się em. Drogę w drugą stronę pokrywa konwerter em na piksele.

Wzór ma jedno działanie: em = piksele ÷ rozmiar pisma rodzica. To odwrotność mnożenia, które zamienia em na piksele.

Weź odstęp 20 px: przy rodzicu 16 wychodzi 20 ÷ 16 = 1,25 em. Ten sam wymiar wewnątrz karty z pismem 14 px daje około 1,4286 em, a w nagłówku o rozmiarze 20 px daje równo 1 em.

Wymiary z makiety mogą dawać ułamki: 18 pikseli to 1,125 em, 22 piksele to 1,375 em, a 30 pikseli to 1,875 em. Wszystkie trzy są dokładne i tak właśnie zapisuje się je w arkuszu.

Jeżeli wymiar ma dawać ten sam wynik w całym dokumencie, niezależnie od zagnieżdżenia, ten sam piksel zapisuje w rem konwerter pikseli na rem. Różnicę między obiema jednostkami rozstrzyga tabela na stronie konwertera em na piksele.

Pierwsze miejsce to media query. Wewnątrz zapytania o media przeglądarka liczy jednostki względne od wartości początkowej rozmiaru pisma, a nie od tego, co ustawisz na elemencie html: specyfikacja mówi wprost, że jednostki nie opierają się na wynikach deklaracji[2]. Punkt przełamania zapisany jako 48em zachowa się więc przewidywalnie nawet w projekcie, który zmienia bazowy rozmiar pisma.

Drugie miejsce to szablony wiadomości pocztowych. Jednostka em działa we wszystkich testowanych programach[3], podczas gdy rem ma wsparcie na poziomie 69,05 procent i nie działa w żadnej testowanej wersji Outlooka dla Windowsa, od 2003 do 2019[4]. Przy szablonie pocztowym wybór jest więc rozstrzygnięty przez program odbiorcy.

Trzecie miejsce to komponent, który ma skalować się w całości razem ze swoim pismem. Kiedy przycisk dostanie font-size: 1.125em, a jego padding i zaokrąglenie zapiszesz w em, wystarczy jedna zmiana rozmiaru pisma, żeby cały przycisk urósł proporcjonalnie.

W pozostałych sytuacjach – przy stopniach pisma i skali odstępów w całym serwisie – przewidywalność rem jest ważniejsza. Tabela niżej rozpisuje osiem konkretnych sytuacji, a przeliczenie w tamtą stronę zrobi konwerter pikseli na rem.