Použitie Ems na zmenu veľkosti písma
Pri vytváraní webovej stránky väčšina profesionálov odporúča, aby ste veľkosť písma (a v skutočnosti všetko) s relatívnou mierou, ako sú ems, exs, percentá alebo pixely. Je to preto, že naozaj neviete všetky rôzne spôsoby, ako by niekto mohol zobraziť váš obsah. Ak použijete absolútnu mieru (palce, centimetre, milimetre, body alebo picas), môže to ovplyvniť zobrazenie alebo čitateľnosť stránky v rôznych zariadeniach.
A W3C odporúča používať ems pre veľkosti.
Ale ako veľký je Em?
Podľa W3C a em:
"sa rovná vypočítanej hodnote vlastnosti" font-size "prvku, na ktorom sa používa. Výnimkou je, keď sa" em "vyskytuje v samotnej vlastnosti 'font-size', v takom prípade odkazuje na veľkosť písma nadradeného prvku. "
Inými slovami, ems nemajú absolútnu veľkosť. Zaberajú ich veľkostné hodnoty podľa toho, kde sú. Pre väčšinu dizajnérov webových stránok to znamená, že sú vo webovom prehliadači, takže písmo s výškou 1 mm má presne rovnakú veľkosť ako predvolená veľkosť písma pre daný prehliadač.
Ale ako vysoká je predvolená veľkosť? Neexistuje žiadny spôsob ako byť 100% istý, pretože zákazníci môžu vo svojich prehliadačoch zmeniť svoju predvolenú veľkosť písma, ale keďže väčšina ľudí nemôže predpokladať, že väčšina prehliadačov má predvolenú veľkosť písma 16px. Takže väčšinu času 1em = 16px .
Myslite v pixeloch, použite Ems pre opatrenie
Akonáhle viete, že predvolená veľkosť písma je 16 pixelov, potom môžete použiť ems, aby ste svojim klientom umožnili zmeniť veľkosť stránky ľahko, ale premýšľajte v pixeloch pre veľkosť písma.
Povedz, že máte štruktúru veľkosti takého typu:
- Nadpis 1 - 20 px
- Nadpis 2 - 18 px
- Nadpis 3 - 16 px
- Hlavný text - 14px
- Subtext - 12px
- Poznámky pod čiarou - 10px
Môžete ich definovať tak, že použijete pixely na meranie, ale potom niekto, kto používa IE 6 a 7, nebude môcť zmeniť vašu stránku dobre. Takže by ste mali konvertovať veľkosti na ems a to je len otázka nejakej matematiky:
- Nadpis 1 - 1,25 (16 x 1,25 = 20)
- Nadpis 2 - 1.125 (16 × 1.125 = 18)
- Nadpis 3 - 1m (1em = 16px)
- Hlavný text - 0.875 (16 x 0.875 = 14)
- Sub text - 0,75 (16 x 0,75 = 12)
- Poznámky pod čiarou - 0,625 (16 x 0,625 = 10)
Nezabudnite dedičstvo!
Ale to nie je všetko pre ems. Ďalšia vec, ktorú potrebujete mať na pamäti, je to, že naberajú veľkosť rodiča. Takže ak máte vnorené elementy s rôznymi veľkosťami písma, môžete skončiť s fontom oveľa menším alebo väčším, ako ste očakávali.
Môžete napríklad mať štýl štýlu, ako je tento:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Toto by malo za následok písma, ktoré sú pre hlavný text a poznámky pod čiarou 14px a 10px. Ale ak vložíte poznámku pod čiaru, môžete skončiť s textom, ktorý je 8,75px namiesto 10px. Vyskúšajte sami, vložte tento dokument do dokumentu:
Toto písmo je 14px alebo 0,875 ems na výšku.
Tento odsek má v ňom poznámku pod čiarou.
Toto je len odsek v poznámke pod čiarou.
Text poznámky pod čiarou je ťažko čitateľný na 10 pixelov, je skoro nečitateľný pri rozlíšení 8,75.
Takže, keď používate ems, musíte byť veľmi dobre vedomí veľkosti nadradených objektov, alebo skončíte s niektorými skutočne nepatrnými prvkami na vašej stránke.