Când creați o pagină web, majoritatea profesioniștilor vă recomandă să dimensionați fonturile (și, de fapt, totul) cu o măsură relativă, cum ar fi ems, exs, procente sau pixeli. Acest lucru se datorează faptului că într-adevăr nu cunoașteți toate modurile în care cineva ar putea să vă vadă conținutul. Și dacă utilizați o măsură absolută (inci, centimetri, milimetri, puncte sau picas), aceasta poate afecta afișarea sau lizibilitatea paginii pe diferite dispozitive. Și recomandă W3C că folosiți ems pentru dimensiuni.
Dar cât de mare este un em?
In conformitate cu W3C un em:
"este egală cu valoarea calculată a proprietății„ font-size ”a elementului pe care este utilizat. Excepția este atunci când „em” apare în valoarea proprietății „font-size” în sine, caz în care se referă la dimensiunea fontului elementului părinte. "
Cu alte cuvinte, ems nu au o dimensiune absolută. Aceștia își asumă valorile mărimii în funcție de locul în care se află. Pentru cele mai multe designeri web, aceasta înseamnă că se află într-un browser Web, deci un font care are o înălțime de 1em are exact aceeași dimensiune ca dimensiunea implicită a fontului pentru acel browser.
Dar cât de înaltă este dimensiunea implicită? Nu există nicio modalitate de a fi 100% sigur, deoarece clienții își pot schimba dimensiunea fontului implicită în browserele lor, dar din moment ce majoritatea oamenilor nu, puteți presupune că majoritatea browserelor au o dimensiune de font implicită de 16 px. Deci de cele mai multe ori 1em = 16px.
Gândiți-vă în pixeli, utilizați ems pentru măsurare
După ce știți că dimensiunea implicită a fontului este de 16 px, puteți utiliza apoi ems pentru a permite clienților dvs. să redimensioneze pagina cu ușurință, dar gândiți-vă la pixeli pentru dimensiunile fontului. Spuneți că aveți o astfel de structură de dimensionare:
- Titlu 1 - 20 px
- Titlul 2 - 18 px
- Titlu 3 - 16 px
- Textul principal - 14px
- Sub text - 12 px
- Note de subsol - 10 px
Le-ați putea defini astfel folosind pixeli pentru măsurare, dar apoi oricine folosește IE 6 și 7 nu va putea redimensiona pagina dvs. bine. Deci, ar trebui să convertiți dimensiunile în ems și aceasta este doar o chestiune de matematică:
- Titlu 1 - 1.25em (16 x 1.25 = 20)
- Titlu 2 - 1.125em (16 × 1.125 = 18)
- Titlu 3 - 1em (1em = 16px)
- Text principal - 0,875em (16 x 0,875 = 14)
- Sub text - 0,75em (16 x 0,75 = 12)
- Note de subsol - 0,625em (16 x 0,625 = 10)
Nu uitați moștenirea!
Dar asta nu este tot ce trebuie să fie ems. Celălalt lucru pe care trebuie să-l amintiți este că aceștia iau dimensiunea părintelui. Deci, dacă aveți elemente imbricate cu diferite dimensiuni de fonturi, ați putea ajunge cu un font mult mai mic sau mai mare decât vă așteptați.
De exemplu, este posibil să aveți o foaie de stil ca aceasta:
Acest lucru ar duce la fonturi care sunt 14px și 10px pentru textul principal și respectiv notele de subsol. Dar dacă puneți o notă de subsol în interiorul unui paragraf, ați putea ajunge cu un text care este de 8,75 px mai degrabă decât de 10 px. Încercați singur, puneți cele de mai sus CSS și următorul HTML într-un document:
Deci, atunci când utilizați ems, trebuie să fiți foarte conștienți de dimensiunile obiectelor părinte sau veți ajunge la câteva elemente cu dimensiuni ciudate pe pagina dvs.