Převeď em na pixely s libovolnou velikostí rodiče
Při výchozím nastavení prohlížeče má jeden em 16 pixelů, takže 1,5em dá 24. Zadej hodnotu v em, nastav velikost písma rodiče a přečti výsledek: níže najdeš tabulku hromadění při zanoření.
K čemu slouží převod em na pixely?
Em se změní na pixely jediným násobením: hodnota v em krát velikost písma rodiče. Při výchozím nastavení prohlížeče má rodič 16 px, takže 1em dá 16 pixelů a 1,5em dá 24. Jednotka odkazuje na velikost textu prvku, ve kterém leží [1].
Převod se hodí při čtení cizích stylů, když chceš vědět, kolik doopravdy měří mezera zapsaná jako 0,75em. Odpověď závisí na tom, na kterém místě dokumentu ta mezera leží, a právě tím se em liší od ostatních relativních jednotek.
Rodič nemusí mít 16 px. V kartě nebo v tabulce má často 14 px, v nadpisu sekce 20 px i více, proto pole přijímá libovolnou hodnotu od 1 do 200.
Níže najdeš tabulku 26 hodnot při třech velikostech rodiče, tabulku hromadění při zanoření a pravidlo, kdy sáhnout po em a kdy po rem. Opačnou cestu pokrývá převodník pixelů na em.
Jak spočítat em na pixely ručně? Vzorec a příklad
Vzorec obsahuje jedinou operaci: pixely = em × velikost písma rodiče. Ta velikost je font-size prvku, uvnitř kterého tvůj prvek leží, a pokud ji nikdo nezměnil, prohlížeč použije 16 px.
Příklad s mezerou 1,25em: při rodiči 16 px vyjde 1,25 × 16 = 20 pixelů. Stejná hodnota uvnitř karty sázené na 14 px dá 17,5 pixelu a v nadpisu o velikosti 20 px vyroste na 25.
Jedno pravidlo stojí za pozornost. Ve vlastnosti font-size odkazuje em na rodiče, ale v každé jiné vlastnosti téhož prvku – v padding, margin nebo width – odkazuje už na velikost písma tohoto prvku [2]. Prvek s font-size: 1.5em a padding: 1em má při rodiči 16 px písmo 24 px a stejných 24 px odsazení.
Jednotka rem se počítá stejně, ale vždy od prvku html, a dává proto v celém dokumentu tentýž výsledek: to je úkol pro převodník rem na pixely. Stejných 16 pixelů odpovídá 12 typografickým bodům v sazbě, o což se stará převodník bodů na pixely.
Kolik pixelů mají běžné hodnoty v em?
| Hodnota v em | Rodič 16 px (výchozí) | Rodič 14 px (karta) | Rodič 20 px (nadpis) |
|---|---|---|---|
| 0,25 em | 4 px | 3,5 px | 5 px |
| 0,375 em | 6 px | 5,25 px | 7,5 px |
| 0,5 em | 8 px | 7 px | 10 px |
| 0,625 em | 10 px | 8,75 px | 12,5 px |
| 0,75 em | 12 px | 10,5 px | 15 px |
| 0,8 em | 12,8 px | 11,2 px | 16 px |
| 0,875 em | 14 px | 12,25 px | 17,5 px |
| 1 em | 16 px | 14 px | 20 px |
| 1,125 em | 18 px | 15,75 px | 22,5 px |
| 1,25 em | 20 px | 17,5 px | 25 px |
| 1,375 em | 22 px | 19,25 px | 27,5 px |
| 1,5 em | 24 px | 21 px | 30 px |
| 1,625 em | 26 px | 22,75 px | 32,5 px |
| 1,75 em | 28 px | 24,5 px | 35 px |
| 1,875 em | 30 px | 26,25 px | 37,5 px |
| 2 em | 32 px | 28 px | 40 px |
| 2,25 em | 36 px | 31,5 px | 45 px |
| 2,5 em | 40 px | 35 px | 50 px |
| 2,75 em | 44 px | 38,5 px | 55 px |
| 3 em | 48 px | 42 px | 60 px |
| 3,5 em | 56 px | 49 px | 70 px |
| 4 em | 64 px | 56 px | 80 px |
| 4,5 em | 72 px | 63 px | 90 px |
| 5 em | 80 px | 70 px | 100 px |
| 6 em | 96 px | 84 px | 120 px |
| 8 em | 128 px | 112 px | 160 px |
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.
Proč stejná hodnota v em dává jiné pixely?
Em se měří vůči rodiči a rodič má svého rodiče. Když se stejný zápis font-size: 1.25em zopakuje na po sobě jdoucích úrovních zanoření, každá úroveň násobí výsledek té předchozí. Po šesti úrovních je ze 16 pixelů přes 61.
Nejčastěji to uvidíš v zanořených seznamech, v menu s podmenu a ve vláknech komentářů, protože tam struktura vytváří úrovně sama. Tabulka níže ukazuje každý krok i s výpočtem, aby bylo vidět, odkud se každé číslo bere.
Odtud praktické pravidlo: em se hodí tam, kde má hodnota jít za velikostí písma nejbližšího kontextu – odsazení kolem textu tlačítka, odsazení seznamu, šířka pole formuláře. Na velikosti písma v celém webu se lépe hodí rem, protože počítá od kořene dokumentu a při jakékoli hloubce zanoření dává stejnou hodnotu.
Pokud hledáš právě tuhle předvídatelnost, výpočet obstará převodník rem na pixely a rozměr z návrhu zapsaný v rem vyřeší převodník pixelů na rem.
Jak se em hromadí při zanoření?
| Úroveň zanoření | Velikost rodiče | Výsledek na této úrovni | Výpočet |
|---|---|---|---|
| První | 16 px | 20 px | 16 × 1,25 |
| Druhá | 20 px | 25 px | 20 × 1,25 |
| Třetí | 25 px | 31,25 px | 25 × 1,25 |
| Čtvrtá | 31,25 px | 39,06 px | 31,25 × 1,25 |
| Pátá | 39,06 px | 48,83 px | 39,06 × 1,25 |
| Šestá | 48,83 px | 61,04 px | 48,83 × 1,25 |
Šest úrovní se stejným zápisem font-size: 1.25em, počítáno od výchozích 16 px. Sloupec s výpočtem ukazuje, odkud se každé číslo bere.
Em, rem a pixel vedle sebe
| Vlastnost | em | rem | px |
|---|---|---|---|
| Vztažný bod | Velikost písma rodičovského prvku | Velikost písma prvku html | Žádný, jde o absolutní hodnotu |
| Výchozí hodnota | 1em = 16 px | 1rem = 16 px | 1 px = 1/96 palce |
| Při zanoření | Hromadí se na každé úrovni | Vždy stejná hodnota | Vždy stejná hodnota |
| Reakce na nastavení čtenáře | Škáluje se s ním | Škáluje se s ním | Zůstává beze změny |
| Uvnitř media query | Počítá od výchozí velikosti textu | Počítá od výchozí velikosti textu | Absolutní hodnota |
| V e-mailových šablonách | Všechny testované programy | Zhruba dvě třetiny programů | Všechny testované programy |
| Obvyklé použití | Odsazení kolem textu, odsazení seznamu | Velikosti písma a škála mezer | Rámečky, stíny, vlasové linky |
Sedm z dvaceti čtyř otázek kladených kolem tohoto hledání se ve skutečnosti týká rem. Tahle tabulka rozdíl vyjasňuje.
Kdy se ti tenhle převod bude hodit?
Čtení cizích stylů
Otevřeš projekt psaný v em a chceš vědět, kolik měří mezera. Zadej velikost rodiče a přečti hodnotu v pixelech.Ladění zanořeného seznamu
Text na čtvrté úrovni seznamu narostl nad plán. Tabulka ukazuje, co dává stejný zápis na každé úrovni.Porovnání s návrhem
Návrh uvádí 24 pixelů a kód říká 1,5em. Jedno násobení ti řekne, jestli obě čísla popisují stejnou velikost.Šablona e-mailu
V e-mailových šablonách funguje em ve všech testovaných programech, relativní rozměry se proto opírají o něj [3].
Převést jiné jednotky na Pixely
Další převodníky jednotek
Zdroje
- CSS Values and Units Module Level 4 — W3C
- font-size — MDN Web Docs
- CSS unit: em — 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 pixelů je 1em?
Při výchozím nastavení prohlížeče je 1em 16 pixelů. Číslo vychází z velikosti písma rodiče, takže uvnitř karty sázené na 14 px dá tentýž 1em 14 pixelů a v nadpisu o velikosti 20 px jich dá 20.
Kolik pixelů je 1,5em?
24 pixelů při rodiči 16 px, 21 pixelů při 14 px a 30 pixelů při 20 px. Hodnota 1,5em je běžnou velikostí nadpisu uvnitř sekce.
Kolik pixelů je 0,875em?
14 pixelů při rodiči 16 px. Tuhle velikost potkáš hlavně u popisků formulářových polí a u nápovědy pod nimi.
Kolik pixelů je 2em?
32 pixelů při rodiči 16 px, 28 pixelů při 14 px a 40 pixelů při 20 px. Hodnoty tohoto řádu popisují spíš mezeru mezi sekcemi než velikost písma.
Jaký je rozdíl mezi em a rem?
Em odkazuje na velikost písma rodiče, takže se hodnoty při zanořování násobí: šest úrovní se zápisem 1.25em promění 16 pixelů v přes 61. Rem odkazuje na prvek html a dává stejný výsledek v celém dokumentu bez ohledu na to, jak hluboko prvek leží.
Kdy použít em a kdy rem?
Em se hodí tam, kde má rozměr jít za písmem nejbližšího kontextu: odsazení kolem textu tlačítka, odsazení seznamu, šířka pole. Rem se hodí na velikosti písma a škálu mezer v celém webu, protože výsledek zůstává předvídatelný.
Proč stejná hodnota v em dává jiné pixely?
Protože se vztažný bod mění s místem v dokumentu. Hodnota 1em uvnitř odstavce o velikosti 16 px je 16 pixelů, uvnitř nadpisu o velikosti 32 px je 32 pixelů. Převodník výše přijímá velikost rodiče právě proto, aby odpověděl na konkrétní místo.
Počítá se em v paddingu stejně jako ve font-size?
Ve vlastnosti font-size odkazuje em na rodiče. Ve všech ostatních vlastnostech téhož prvku, včetně paddingu a marginu, odkazuje na velikost písma tohoto prvku. Prvek s font-size: 1.5em má při rodiči 16 px písmo 24 px, takže jeho padding: 1em dá také 24 pixelů.
Jak převést em na pixely v grafickém programu?
Figma, Photoshop ani Illustrator jednotku em nemají, počítají v pixelech nebo v bodech. Em se objevuje až na straně kódu a ve webových nástrojích, proto se rozměr z návrhu převádí zvlášť: tímhle převodníkem nebo v záložce Computed ve vývojářských nástrojích prohlížeče.
Funguje em v e-mailových šablonách?
Ano, a to ve všech testovaných e-mailových programech. Jednotka rem tam má podporu zhruba dvou třetin programů a nefunguje v žádné verzi Outlooku, ani ve Windows, ani na macOS, proto se relativní rozměry v šablonách opírají o em.
Kolik em je 1 pixel?
Při rodiči 16 px je jeden pixel 0,0625em. Pár dvojic v opačném směru stojí za zapamatování: 12 px je 0,75em, 14 px je 0,875em, 20 px je 1,25em a 24 px je 1,5em.
Ovlivňuje em přístupnost?
Ano. Rozměry psané v em rostou s velikostí textu nastavenou v prohlížeči, rozvržení tedy reaguje na čtenáře. Na velikosti písma v celém webu dává rem stejný přínos s tou výhodou, že se při zanořování nehromadí.
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.