Przeniesienie makiety do kodu
Projekt podaje 24 piksele odstępu, a arkusz ma dostać 1,5 em. To najczęstsza droga w pracy nad interfejsem.
Przelicz piksele na em przy dowolnym rozmiarze rodzica
Przy domyślnym ustawieniu przeglądarki 24 piksele to 1,5 em, a 14 pikseli to 0,875 em. Wpisz wymiar z makiety, ustaw font-size rodzica i przenieś wynik prosto do arkusza stylów.
Loading tool editor...
REKLAMA
Po co przeliczać piksele na em?
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 najczęstszy kierunek w codziennej pracy. 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 dwa miejsca, w których em wypada lepiej niż rem. Drogę w drugą stronę pokrywa konwerter em na piksele.
Jak policzyć piksele na em ręcznie? Wzór i przykład
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 często dają 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.
REKLAMA
Ile em mają popularne wymiary w pikselach?
| Wartość w pikselach | Rodzic 16 px (domyślny) | Rodzic 14 px (karta) | Rodzic 20 px (nagłówek) |
|---|---|---|---|
| 1 px | 0,0625 em | 0,0714 em | 0,05 em |
| 2 px | 0,125 em | 0,1429 em | 0,1 em |
| 4 px | 0,25 em | 0,2857 em | 0,2 em |
| 6 px | 0,375 em | 0,4286 em | 0,3 em |
| 8 px | 0,5 em | 0,5714 em | 0,4 em |
| 10 px | 0,625 em | 0,7143 em | 0,5 em |
| 12 px | 0,75 em | 0,8571 em | 0,6 em |
| 13 px | 0,8125 em | 0,9286 em | 0,65 em |
| 14 px | 0,875 em | 1 em | 0,7 em |
| 15 px | 0,9375 em | 1,0714 em | 0,75 em |
| 16 px | 1 em | 1,1429 em | 0,8 em |
| 18 px | 1,125 em | 1,2857 em | 0,9 em |
| 20 px | 1,25 em | 1,4286 em | 1 em |
| 21 px | 1,3125 em | 1,5 em | 1,05 em |
| 22 px | 1,375 em | 1,5714 em | 1,1 em |
| 24 px | 1,5 em | 1,7143 em | 1,2 em |
| 26 px | 1,625 em | 1,8571 em | 1,3 em |
| 28 px | 1,75 em | 2 em | 1,4 em |
| 30 px | 1,875 em | 2,1429 em | 1,5 em |
| 32 px | 2 em | 2,2857 em | 1,6 em |
| 36 px | 2,25 em | 2,5714 em | 1,8 em |
| 40 px | 2,5 em | 2,8571 em | 2 em |
| 44 px | 2,75 em | 3,1429 em | 2,2 em |
| 48 px | 3 em | 3,4286 em | 2,4 em |
| 56 px | 3,5 em | 4 em | 2,8 em |
| 64 px | 4 em | 4,5714 em | 3,2 em |
| 72 px | 4,5 em | 5,1429 em | 3,6 em |
| 80 px | 5 em | 5,7143 em | 4 em |
| 96 px | 6 em | 6,8571 em | 4,8 em |
| 128 px | 8 em | 9,1429 em | 6,4 em |
Trzy rozmiary rodzica pokrywają trzy typowe sytuacje: 16 px to domyślne ustawienie przeglądarki, 14 px spotkasz w kartach i tabelach interfejsu, a 20 px w nagłówku sekcji.
Gdzie em wypada lepiej niż rem?
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 ustawiłeś 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 programach z zestawu testowego [3], podczas gdy rem ma wsparcie na poziomie 69,05 procent i nie działa w żadnej testowanej wersji Outlooka, ani na Windowsie, ani na macOS [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.
REKLAMA
Którą jednostkę wybrać w konkretnej sytuacji?
| Sytuacja | Jednostka | Dlaczego |
|---|---|---|
| Stopień pisma nagłówków i akapitów | rem | Wynik pozostaje ten sam w całym dokumencie, niezależnie od zagnieżdżenia |
| Odstęp wokół tekstu przycisku | em | Padding idzie za pismem przycisku, więc cały element skaluje się jedną zmianą |
| Wcięcie listy zagnieżdżonej | em | Wcięcie ma rosnąć razem z pismem danego poziomu listy |
| Punkt przełamania w media query | em | Przeglądarka liczy od wartości początkowej rozmiaru pisma, a nie od elementu html |
| Wymiary w szablonie wiadomości pocztowej | em | Wsparcie we wszystkich testowanych programach, rem odpada w Outlooku |
| Grubość obramowania i cień | px | Linia włosowa ma zostać linią włosową niezależnie od rozmiaru pisma |
| Skala odstępów w systemie projektowym | rem | Jedna zmiana bazowego rozmiaru pisma przesuwa cały układ naraz |
| Maksymalna szerokość kolumny tekstu | em | Długość wiersza mierzy się w znakach, więc szerokość ma iść za pismem kolumny |
Osiem sytuacji, które wracają w każdym projekcie interfejsu, z jednostką i powodem wyboru.
Piksel i em obok siebie
| Cecha | px | em |
|---|---|---|
| Punkt odniesienia | Brak, wartość bezwzględna | Rozmiar pisma rodzica |
| Wartość domyślna | 1 px = 1/96 cala | 1 em = 16 px |
| Przy zagnieżdżaniu | Zawsze ta sama wartość | Kumuluje się na każdym poziomie |
| Reakcja na ustawienia czytelnika | Zostaje bez zmian | Skaluje się razem z nimi |
| Gdzie się go podaje | Makiety, programy graficzne, pliki obrazu | Arkusze stylów, szablony pocztowe |
| Typowe zastosowanie | Obramowania, cienie, linie włosowe | Odstęp wokół tekstu, wcięcie listy, punkt przełamania |
REKLAMA
Kiedy przyda Ci się to przeliczenie?
Szablon wiadomości pocztowej
Rem odpada w Outlooku, więc wymiary względne zapisuje się w em. Konwerter zamienia piksele z makiety na gotowe wartości.Punkt przełamania układu
Zapis 48em w media query zachowa się przewidywalnie, bo przeglądarka liczy tam od domyślnego rozmiaru tekstu.Komponent skalowany jednym parametrem
Padding i zaokrąglenie przycisku zapisane w em rosną razem z jego pismem, więc cały element zmienia rozmiar jedną deklaracją.
Konwertuj Piksele na inne jednostki
Sprawdź konwertery innych jednostek
pt na pxrem na pxem na pxcm na pxmm na pxcm na calecale na cmmm na calecale na mmmile na kilometrykilometry na milemetry na stopystopy na metrycale na stopystopy na calefunty na uncjeuncje na funtyml na uncjeuncje na mllitry na galonygalony na litrykg na funtyfunty na kgkg na gramygramy na kgkg na stonestone na kgcale na pxstopy na pxpica na pxmetry na pxHEX na RGBRGB na CMYKbajty na kilobajtykilobajty na bajtykilobajty na megabajtymegabajty na kilobajtymegabajty na gigabajtygigabajty na megabajtykilobajty na gigabajtygigabajty na kilobajtygigabajty na terabajtyterabajty na gigabajtykilobajty na terabajtyterabajty na kilobajtyUnix na datęDEC na BINDEC na HEXMbps na MB/s
Źródła
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 – Units — W3C
- CSS unit: em — Can I email
- CSS unit: rem — Can I email
Wszystkie wartości w tabelach wyliczyliśmy z definicji jednostek i sprawdziliśmy rachunkowo przed publikacją. Dane historyczne i nazwy lokalnych jednostek opieramy na źródłach wymienionych wyżej.
Ostatnia aktualizacja treści: · przygotował i sprawdził zespół Arteon
Często zadawane pytania
Ile em to 1 piksel?
Przy domyślnym rodzicu 16 px jeden piksel to 0,0625 em. Wewnątrz karty z pismem 14 px ten sam piksel daje około 0,0714 em, a w nagłówku o rozmiarze 20 px daje 0,05 em.
Jak przeliczyć px na em?
Podziel liczbę pikseli przez rozmiar pisma rodzica. Przy domyślnych 16 px wychodzi 24 ÷ 16 = 1,5 em. Konwerter powyżej wykonuje to dzielenie dla dowolnego rozmiaru od 1 do 200 px.
Ile em to 24 px?
1,5 em przy rodzicu 16 px, około 1,7143 em przy rodzicu 14 px i 1,2 em przy 20 px. Wartość 1,5 em to typowy stopień pisma nagłówka wewnątrz sekcji.
Ile em to 14 px?
0,875 em przy domyślnym rodzicu 16 px. Wewnątrz karty, w której pismo ma już 14 px, ten sam wymiar to równo 1 em.
Ile em to 16 px?
1 em przy domyślnym rodzicu 16 px. Przy rodzicu 14 px wychodzi około 1,1429 em, a przy 20 px – 0,8 em.
Ile em to 12 px?
0,75 em przy rodzicu 16 px. To najmniejszy stopień pisma używany w interfejsach; poniżej czytanie robi się niewygodne.
Czy wynik w em trzeba zaokrąglać?
Wartości takie jak 0,875 czy 1,125 em zapisuje się wprost. Przeglądarka liczy je dokładnie, a zaokrąglenie do 0,88 em przesunęłoby wymiar o ułamek piksela. Przy dzieleniu przez 14 wychodzą liczby okresowe i wtedy wystarczą cztery miejsca.
Której jednostki użyć w media query?
Em. Wewnątrz zapytania o media przeglądarka liczy jednostki względne od wartości początkowej rozmiaru pisma, a nie od wartości ustawionej na elemencie html, więc punkt przełamania zapisany jako 48em zachowa się przewidywalnie także w projekcie, który zmienia bazowy rozmiar pisma.
Czy em działa w szablonach wiadomości pocztowych?
Tak, we wszystkich programach z zestawu testowego. Jednostka rem ma tam wsparcie na poziomie 69,05 procent i nie działa w żadnej testowanej wersji Outlooka, dlatego w szablonach pocztowych wymiary względne zapisuje się w em.
Czy przenosić cały arkusz na em?
Odstępy wokół tekstu, wcięcia list i szerokości kolumn tak, bo mają iść za pismem swojego kontekstu. Stopnie pisma i skala odstępów w całym serwisie lepiej wychodzą w rem, a obramowania, cienie i linie włosowe zostają w pikselach.
Jaka jest różnica między em a rem przy tym samym wymiarze?
Ten sam zapis 1,5 em daje inny wynik na każdym poziomie zagnieżdżenia, bo liczy się od rodzica. Zapis 1,5 rem daje 24 piksele w całym dokumencie, bo liczy się od elementu html. Przy wymiarach, które mają być takie same wszędzie, wybiera się rem.
Czy programy graficzne pokazują wartości w em?
Figma, Photoshop i Illustrator liczą w pikselach albo w punktach i jednostki em nie mają. Wymiar z makiety przelicza się osobno – tym konwerterem albo odczytując wartość wyliczoną w zakładce Computed w narzędziach deweloperskich przeglądarki.
Pomóż nam ulepszać nasze narzędzia
Masz pomysł na funkcję, znalazłeś błąd albo chcesz zaproponować kolejne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.