Pomocí Ems můžete měnit velikost písma
Když vytváříte webovou stránku, většina odborníků doporučuje, abyste velikost písma (a ve skutečnosti vše) s relativní mírou, jako je ems, exs, procenta nebo pixely. Je to proto, že opravdu neznáte všechny různé způsoby, jak může někdo zobrazit váš obsah. A pokud použijete absolutní míru (palce, centimetry, milimetry, body nebo obrázky), může to ovlivnit zobrazení nebo čitelnost stránky v různých zařízeních.
A W3C doporučuje používat ems pro velikosti.
Ale jak velký je Em?
Podle W3C em em:
"se rovná vypočítané hodnotě vlastnosti" font-size "prvku, na kterém je použita. Výjimkou je, když se 'em' objeví v hodnotě samotné vlastnosti 'font-size', v tomto případě odkazuje na velikost písma nadřazeného prvku. "
Jinými slovy, ems nemají absolutní velikost. Vezmou na své velikosti velikosti na základě toho, kde jsou. Pro většinu webových návrhářů to znamená, že jsou ve webovém prohlížeči, takže písmo, které je vysoké 1em, je přesně stejné jako výchozí velikost písma pro daný prohlížeč.
Jak vysoká je však výchozí velikost? Neexistuje žádný způsob, jak být 100% jistý, protože zákazníci mohou ve svých prohlížečích změnit svou výchozí velikost písma, ale protože většina lidí nemůže předpokládat, že většina prohlížečů má výchozí velikost písma 16px. Takže většinu času 1em = 16px .
Myslete na pixely, použijte Ems pro opatření
Jakmile zjistíte, že výchozí velikost písma je 16 pixelů, můžete pomocí ems umožnit klientům změnit velikost stránky snadno, ale přemýšlejte o velikosti písma v pixelech.
Řekněme, že máte velikostní strukturu něco takového:
- Nadpis 1 až 20 pixelů
- Nadpis 2 - 18px
- Nadpis 3 - 16 pixelů
- Hlavní text - 14px
- Subtext - 12px
- Poznámky pod čarou - 10px
Můžete je definovat pomocí pixelů pro měření, ale někdo, kdo používá IE 6 a 7, nebude schopen měnit velikost stránky. Takže byste měli konvertovat velikosti na ems a to je jen otázka nějaké matematiky:
- Nadpis 1 - 1,25 (16 x 1,25 = 20)
- Nadpis 2 - 1.125 (16 × 1.125 = 18)
- Nadpis 3 - 1em (1em = 16px)
- Hlavní text - 0.875 (16 x 0.875 = 14)
- Sub text - 0,75 (16 x 0,75 = 12)
- Poznámky pod čarou - 0,625 (16 x 0,625 = 10)
Nezapomeňte dědictví!
Ale to není všechno, co je na ems. Druhá věc, kterou si musíte pamatovat, je, že se postará o velikost rodiče. Pokud máte vnořené prvky s různými velikostmi písma, můžete skončit pístem, který je mnohem menší nebo větší než očekáváte.
Například můžete mít styl stylu, jako je tato:
p {velikost písma: 0.875em; }}
.footnote {font-size: 0.625em; }}
To by vedlo k fontu, který je 14px a 10px pro hlavní text a poznámky pod čarou. Pokud však do odstavce vložíte poznámku pod čarou, můžete skončit textem, který je 8,75px než 10px. Vyzkoušejte to sami, vložte do dokumentu nový dokument CSS a následující kód HTML:
Toto písmo je 14px nebo 0,875 ems na výšku.
Tento odstavec má poznámku pod čarou.
Zatímco toto je jen odstavec poznámky pod čarou.
Text poznámky pod čarou je těžko čitelný na 10 pixelů, je téměř nečitelný v rozlišení 8,75.
Takže když používáte ems, musíte být velice obeznámeni s velikostí nadřazených objektů, nebo skončíte s některými faktami na stránce, které jsou opravdu nepatrné velikosti.