Veidojot tīmekļa lapu, lielākā daļa profesionāļu iesaka izmērīt fontus (un faktiski visu) ar relatīvu mēru, piemēram, em, ex, procentiem vai pikseļiem. Tas ir tāpēc, ka jūs patiešām nezināt visus dažādos veidus, kā kāds var skatīt jūsu saturu. Un, ja izmantojat absolūtu mēru (collas, centimetri, milimetri, punkti vai picas), tas var ietekmēt lapas attēlojumu vai lasāmību dažādās ierīcēs. Un iesaka W3C ka izmēriem izmantojat em.
Bet cik liels ir ems?
Saskaņā ar W3C em:
"ir vienāda ar elementa, kuram tas tiek izmantots, rekvizīta" font-size "aprēķināto vērtību. Izņēmums ir gadījums, kad 'em' parādās paša rekvizīta 'font-size' vērtībā, tādā gadījumā tas attiecas uz vecāka elementa fonta lielumu. "
Citiem vārdiem sakot, ems nav absolūta lieluma. Viņi uzņem savas lieluma vērtības, pamatojoties uz to, kur viņi atrodas. Lielākajai daļai tīmekļa dizaineri, tas nozīmē, ka tie atrodas tīmekļa pārlūkprogrammā, tāpēc 1em garais fonts ir tieši tāds pats kā šī pārlūka noklusējuma fonta lielums.
Bet cik garš ir noklusējuma izmērs? Nekādā ziņā nevar būt 100% drošs, jo klienti var mainīt savu noklusējuma fonta lielums viņu pārlūkprogrammās, bet, tā kā lielākajai daļai cilvēku nav, jūs varat pieņemt, ka lielākajai daļai pārlūkprogrammu noklusējuma fonta lielums ir 16 pikseļi. Tātad lielāko daļu laika 1em = 16 pikseļi.
Padomājiet pikseļos, mērīšanai izmantojiet em
Tiklīdz jūs zināt, ka noklusējuma fonta lielums ir 16 pikseļi, pēc tam varat izmantot em, lai klienti varētu viegli mainīt lapas izmērus, bet padomājiet pikseļi jūsu fonta lielumiem. Pieņemsim, ka jums ir izmēru struktūra apmēram šādi:
- 1. virsraksts - 20 pikseļi
- 2. virsraksts - 18 pikseļi
- 3. virsraksts - 16 pikseļi
- Galvenais teksts - 14 pikseļi
- Apakšteksts - 12 pikseļi
- Zemsvītras piezīmes - 10 pikseļi
Jūs varētu tos definēt šādā veidā, izmantojot mērīšanai pikseļus, taču tad ikviens, kurš izmanto IE 6 un 7, nevarētu labi mainīt jūsu lapas izmērus. Tāpēc jums vajadzētu konvertēt izmērus uz em, un tas ir tikai dažas matemātikas jautājums:
- 1. virsraksts - 1,25 sem (16 x 1,25 = 20)
- 2. virsraksts - 1.125em (16 × 1.125 = 18)
- 3. virsraksts - 1em (1em = 16 pikseļi)
- Galvenais teksts - 0,875em (16 x 0,875 = 14)
- Apakšteksts - 0.75em (16 x 0.75 = 12)
- Zemsvītras piezīmes - 0.625em (16 x 0.625 = 10)
Neaizmirstiet mantojumu!
Bet tas vēl nav viss ems. Otra lieta, kas jums jāatceras, ir tā, ka viņi iegūst vecāku lielumu. Tātad, ja jums ir ligzdoti elementi ar dažādiem fontu izmēriem, jūs varat iegūt daudz mazāku vai lielāku fontu, nekā jūs gaidāt.
Piemēram, jums var būt šāda stila lapa:
Tā rezultātā galvenajam tekstam un zemsvītras piezīmēm būtu attiecīgi 14 un 10 pikseļi. Bet, ja rindkopā ievietojat zemsvītras piezīmi, varat nonākt ar tekstu, kas ir 8,75 pikseļi, nevis 10 pikseļi. Izmēģiniet pats, ielieciet iepriekš minēto CSS un šādu HTML dokumentā:
Tātad, lietojot em, jums ir ļoti jāzina vecāku objektu izmēri, pretējā gadījumā jūsu lapā būs daži nepāra lieluma elementi.