Pixely na EM
Převést px na em pomocí velikosti písma nadřazeného prvku. em je relativní k bezprostřednímu nadřazenému prvku — užitečné, když by se výplň tlačítka měla měnit podle textu štítku nebo vnořené odsazení seznamu následuje místní velikost těla. Vzorec: em = px ÷ parentFontSizePx.
Pixely
Velikost písma rodiče (px)
Výsledek
1em
Jak převést px na em
1. Určete velikost písma nadřazeného prvku v px (např. 18 px).
2. Zadejte hodnotu v pixelech, kterou chcete převést (např. 9 pixelů mezi písmeny).
3. Přečíst výsledek em (9 ÷ 18 = 0,5 em).
4. Použít v CSS na podřízený prvek v rozsahu tohoto nadřazeného kontextu.
Px to em příklady
Odsazení tlačítek
Nadřazené písmo 16 px; vertikální výplň 8 px → 0,5 em. Změní měřítko, pokud rodič dosáhne 18 pixelů na velkých obrazovkách.
Vnořený nadpis
Písmo sekce 20 px; podnadpis 24 px design → 1,2 em vzhledem k sekci, ne root.
Zarovnání ikon
Vložená ikona 14 px s řádkem textu 16 px → Pole ikony 0,875 em se zarovná podle textových metrik.
Kdy převést px na em
• Kdy by se měly vnitřky součásti změnit s místními změnami velikosti písma.
• Když upravujete formátovaný text, kde jsou nadpisy umístěny v různě velkých kontejnerech.
• Když starší CSS používalo em a vy mapujete nové návrhy px do stejného systému.
Kdy zvolit něco jiného
• Když chcete konzistentní mezery na celém webu — rem z root je jednodušší.
• Když hluboké vnoření způsobuje em složené chyby — preferujte rem pro okraje.
• Když potřebujete relativní velikost zobrazení — použijte vw/vh.
Vyhýbání se nástrahám skládání
Hluboce vnořené nabídky s velikostí písma: 0,9 em na každé úrovni neočekávaně zmenšují text. Preferujte rem pro velikost písma na strukturálních úrovních; použijte je pro místní výplň vázanou na jednoho rodiče. Dokumentujte rodičovské předpoklady v tokenech návrhu.
em pro dotazy na média?
Dotaz na média em jednotky historicky odkazované výchozí nastavení prohlížeče (16 px), nikoli nadřazená komponenta. Moderní responzivní design často používá zarážky rem nebo px — víte, na jaký kontext vaše šablona stylů cílí.
Časté dotazy
Jaký je rozdíl mezi em a rem?
em odkazuje na velikost nadřazeného písma; rem odkazuje pouze na velikost kořenového (html) písma.
Proč se vnořené em skládají?
Každá úroveň se násobí: 1,2 em uvnitř 1,2 em nadřazený = 1,44 × kořen, pokud obě platí pro řetězce velikosti písma.
Vzorec?
em = px ÷ parentFontSizePx. Vždy používejte vypočítanou velikost písma přímého rodiče.
Vycpávka v em?
Ano — odsazení/okraj v měřítku em s vlastní velikostí písma prvku (pro okraj/odsazení používá spec velikost písma prvku).
Kdy vznikly?
Tradičně "šířka velkého M" v kovovém typu; nyní definováno vzhledem k velikosti písma v CSS.
Jsou data nahraná?
Ne. Převod probíhá lokálně.