Převeď pixely na em s libovolnou velikostí rodiče
Při výchozím nastavení prohlížeče je 24 pixelů 1,5em a 14 pixelů 0,875em. Zadej rozměr z návrhu, nastav velikost písma rodiče a výsledek přenes rovnou do stylů.
K čemu slouží převod pixelů na em?
Pixel se změní na em jediným dělením: počet pixelů dělený velikostí písma rodiče. Při výchozím nastavení prohlížeče má rodič 16 px, takže 24 pixelů dá 1,5em a 14 pixelů dá 0,875em. Jednotka em odkazuje na velikost textu prvku, ve kterém leží [1].
Tenhle směr je v každodenní práci nejčastější. Návrh přichází s rozměry v pixelech, protože tak počítají grafické programy, a styly se píšou v em, aby rozměr šel za velikostí písma svého místa v rozvržení.
Výsledek nese čtyři desetinná místa, protože při rodiči 16 px je jediný pixel přesně 0,0625em a velikosti písma dávají čísla jako 0,875 nebo 1,125.
Níže najdeš tabulku 30 rozměrů při třech velikostech rodiče, tabulku osmi situací s odpovědí, kterou jednotku zvolit, a dvě místa, kde em vychází lépe než rem. Opačnou cestu pokrývá převodník em na pixely.
Jak spočítat pixely na em ručně? Vzorec a příklad
Vzorec obsahuje jedinou operaci: em = pixely ÷ velikost písma rodiče. Jde o obrácené násobení, kterým se em mění na pixely.
Příklad s mezerou 20 px: při rodiči 16 vyjde 20 ÷ 16 = 1,25em. Stejný rozměr uvnitř karty sázené na 14 px dá zhruba 1,4286em a v nadpisu o velikosti 20 px dá přesně 1em.
Rozměry z návrhu často dávají zlomky: 18 pixelů je 1,125em, 22 pixelů je 1,375em a 30 pixelů je 1,875em. Všechny tři jsou přesné a takto se zapisují do stylů.
Pokud má rozměr dávat stejný výsledek v celém dokumentu bez ohledu na zanoření, tentýž pixel zapíše v rem převodník pixelů na rem. Rozdíl mezi oběma jednotkami vyjasňuje tabulka na stránce převodníku em na pixely.
Kolik em mají běžné rozměry v pixelech?
| Hodnota v pixelech | Rodič 16 px (výchozí) | Rodič 14 px (karta) | Rodič 20 px (nadpis) |
|---|---|---|---|
| 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 |
Tři velikosti rodiče pokrývají tři situace: 16 px je výchozí nastavení prohlížeče, 14 px potkáš v kartách a tabulkách rozhraní a 20 px v nadpisu sekce.
Kde vychází em lépe než rem?
První místo je media query. Uvnitř media query vyhodnocuje prohlížeč relativní jednotky vůči počáteční hodnotě velikosti písma, a ne vůči tomu, co jsi nastavil na prvku html: specifikace říká výslovně, že jednotky nikdy nestojí na výsledcích deklarací [2]. Zlomový bod zapsaný jako 48em se tak chová předvídatelně i v projektu, který mění základní velikost písma.
Druhé místo jsou e-mailové šablony. Jednotka em funguje ve všech programech testovací sady [3], zatímco rem zůstává na 69,05 procenta podpory a nefunguje v žádné testované verzi Outlooku, ani ve Windows, ani na macOS [4]. U e-mailové šablony tedy rozhoduje program příjemce.
Třetí místo je komponenta, která se má škálovat celá spolu se svým písmem. Dej tlačítku font-size: 1.125em a zapiš jeho odsazení a zaoblení v em: jediná změna velikosti písma zvětší celé tlačítko úměrně.
Ve zbylých případech – u velikostí písma a škály mezer v celém webu – váží víc předvídatelnost rem. Tabulka níže rozepisuje osm konkrétních situací a přepočet tím směrem obstará převodník pixelů na rem.
Kterou jednotku zvolit v konkrétní situaci?
| Situace | Jednotka | Proč |
|---|---|---|
| Velikost písma nadpisů a odstavců | rem | Výsledek zůstává stejný v celém dokumentu bez ohledu na zanoření |
| Odsazení kolem textu tlačítka | em | Odsazení jde za písmem tlačítka, jedna změna škáluje celý prvek |
| Odsazení zanořeného seznamu | em | Odsazení má růst spolu s písmem dané úrovně seznamu |
| Zlomový bod v media query | em | Prohlížeč počítá od počáteční hodnoty velikosti písma, ne od prvku html |
| Rozměry v e-mailové šabloně | em | Podpora ve všech testovaných programech, zatímco rem v Outlooku vypadává |
| Tloušťka rámečku a stín | px | Vlasová linka má zůstat vlasovou linkou bez ohledu na velikost písma |
| Škála mezer v design systému | rem | Jedna změna základní velikosti písma posune celé rozvržení naráz |
| Maximální šířka textového sloupce | em | Délka řádku se měří ve znacích, šířka tedy jde za písmem sloupce |
Osm situací, které se vracejí v každém projektu rozhraní, s jednotkou a důvodem volby.
Pixel a em vedle sebe
| Vlastnost | px | em |
|---|---|---|
| Vztažný bod | Žádný, jde o absolutní hodnotu | Velikost písma rodičovského prvku |
| Výchozí hodnota | 1 px = 1/96 palce | 1em = 16 px |
| Při zanoření | Vždy stejná hodnota | Hromadí se na každé úrovni |
| Reakce na nastavení čtenáře | Zůstává beze změny | Škáluje se s ním |
| Kde se uvádí | Návrhy, grafické programy, obrazové soubory | Styly, e-mailové šablony |
| Obvyklé použití | Rámečky, stíny, vlasové linky | Odsazení kolem textu, odsazení seznamu, zlomový bod |
Kdy se ti tenhle převod bude hodit?
Přenos návrhu do kódu
Návrh dává 24 pixelů mezery a styly mají dostat 1,5em. Je to nejčastější cesta v práci na rozhraní.Šablona e-mailu
Rem v Outlooku vypadává, relativní rozměry se proto zapisují v em. Převodník mění pixely z návrhu na hotové hodnoty.Zlomový bod rozvržení
Zápis 48em se chová předvídatelně, protože uvnitř media query počítá prohlížeč od výchozí velikosti textu.Komponenta řízená jedním parametrem
Odsazení a zaoblení tlačítka zapsané v em rostou spolu s jeho písmem, jedna deklarace tak mění celou velikost.
Převést Pixely na jiné jednotky
Další převodníky jednotek
Zdroje
- 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
Všechny hodnoty v tabulkách jsme spočítali z definic jednotek a před zveřejněním ověřili výpočtem. Historické údaje a názvy místních jednotek vycházejí ze zdrojů uvedených výše.
Poslední revize obsahu: · napsal a zkontroloval tým Arteon
Časté otázky
Kolik em je 1 pixel?
Při výchozím rodiči 16 px je jeden pixel 0,0625em. Uvnitř karty sázené na 14 px dá tentýž pixel zhruba 0,0714em a v nadpisu o velikosti 20 px dá 0,05em.
Jak převést px na em?
Vyděl počet pixelů velikostí písma rodiče. Při výchozích 16 px vyjde 24 ÷ 16 = 1,5em. Převodník výše provede tohle dělení pro libovolného rodiče od 1 do 200 px.
Kolik em je 24 px?
1,5em při rodiči 16 px, zhruba 1,7143em při 14 px a 1,2em při 20 px. Hodnota 1,5em je běžnou velikostí nadpisu sekce.
Kolik em je 14 px?
0,875em při výchozím rodiči 16 px. Uvnitř karty, jejíž písmo už měří 14 px, je tentýž rozměr přesně 1em.
Kolik em je 16 px?
1em při výchozím rodiči 16 px. Při rodiči 14 px vyjde zhruba 1,1429em a při 20 px vyjde 0,8em.
Kolik em je 12 px?
0,75em při rodiči 16 px. Je to nejmenší velikost písma v běžném použití v rozhraních; níž se čtení stává nepohodlným.
Je nutné výsledek v em zaokrouhlovat?
Hodnoty jako 0,875 nebo 1,125em se zapisují tak, jak jsou. Prohlížeč je počítá přesně, zatímco zaokrouhlení na 0,88em by posunulo rozměr o zlomek pixelu. Při dělení čtrnácti vycházejí periodická čísla a tam stačí čtyři místa.
Která jednotka se hodí do media query?
Em. Uvnitř media query vyhodnocuje prohlížeč relativní jednotky vůči počáteční hodnotě velikosti písma, a ne vůči hodnotě nastavené na prvku html, takže se zlomový bod zapsaný jako 48em chová předvídatelně i v projektu, který mění základní velikost písma.
Funguje em v e-mailových šablonách?
Ano, ve všech programech testovací sady. Jednotka rem zůstává na 69,05 procenta podpory a nefunguje v žádné testované verzi Outlooku, proto se relativní rozměry v e-mailových šablonách zapisují v em.
Je nutné převést na em celé styly?
Odsazení kolem textu, odsazení seznamů a šířky sloupců ano, protože mají jít za písmem svého kontextu. Velikosti písma a škála mezer v celém webu vycházejí lépe v rem a rámečky, stíny a vlasové linky zůstávají v pixelech.
Jaký je rozdíl mezi em a rem při stejném rozměru?
Tentýž zápis 1,5em dává na každé úrovni zanoření jiný výsledek, protože počítá od rodiče. Zápis 1,5rem dává 24 pixelů v celém dokumentu, protože počítá od prvku html. U rozměrů, které mají být všude stejné, padne volba na rem.
Ukazují grafické programy hodnoty v em?
Figma, Photoshop ani Illustrator jednotku em nemají, počítají v pixelech nebo v bodech. Rozměr z návrhu se převádí zvlášť: tímhle převodníkem nebo přečtením vypočtené hodnoty v záložce Computed ve vývojářských nástrojích.
Pomoz nám vylepšit naše nástroje
Máš nápad na funkci, našel jsi chybu nebo chceš navrhnout další nástroj? Napiš nám, odpovídáme do 24 hodin.