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.
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.
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.
Č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.