Emsin käyttäminen fonttien koon muuttamiseen
Kun rakennat Web-sivua, useimmat ammattilaiset suosittelevat, että koot fontit (ja itse asiassa kaikki) suhteelliseen mittaan, kuten ems, ex, percentages tai pixels. Tämä johtuu siitä, että et todellakaan tiedä kaikkia eri tapoja, joilla joku voisi tarkastella sisältöäsi. Jos käytät absoluuttista mittaa (tuumaa, senttimetriä, millimetriä, pistettä tai pikas), se voi vaikuttaa sivun näyttöön tai luettavuuteen eri laitteissa.
Ja W3C suosittelee, että käytät ems-kokoa.
Kuinka suuri on Em?
W3C: n mukaan em:
"on yhtä kuin elementin" font-size "-ominaisuuden laskennallinen arvo, jolle sitä käytetään. Poikkeus on, kun" em "esiintyy itse font-size-ominaisuuden arvossa, jolloin se viittaa pääelementin fonttikokoon. "
Toisin sanoen emsillä ei ole absoluuttista kokoa. Ne ottavat niiden koon arvot perustuen siihen, missä ne ovat. Useimmille web-suunnittelijoille tämä tarkoittaa, että ne ovat Web-selaimessa, joten fontti, joka on korkeintaan 1 m, on täsmälleen sama koko kuin kyseisen selaimen oletusfonttikoko.
Kuinka pitkä oletuskoko on? Ei ole mitään keinoa olla 100-prosenttisesti varma, sillä asiakkaat voivat muuttaa oletustekstin kokoa selaimissaan, mutta koska useimmat ihmiset eivät voi olettaa, että useimmilla selaimilla on oletuskokoinen fontti 16px. Joten suurimman osan ajasta 1em = 16px .
Ajattele kuvapisteissä, käytä Ems-mittausta
Kun tiedät, että oletuskirjasimen koko on 16px, voit käyttää emsia, jotta asiakkaat voivat muuttaa sivun kokoa helposti, mutta ajattelevat pikseleitä fonttikoostasi.
Sano että sinulla on tällainen liimausrakenne:
- Otsikko 1 - 20px
- Otsikko 2 - 18px
- Otsikko 3 - 16px
- Pääteksti - 14 kpl
- Al tekst - 12px
- Alaviitteet - 10px
Voit määrittää ne tällä tavoin käyttämällä pikseleitä mittaukseen, mutta sitten kukaan, joka käyttää IE 6 ja 7, ei pystyisi muuttamaan sivusi hyvin. Joten sinun pitäisi muuntaa koot ems ja tämä on vain jotain matematiikkaa:
- Otsikko 1 - 1.25em (16 x 1,25 = 20)
- Otsikko 2 - 1.125em (16 × 1.125 = 18)
- Otsikko 3 - 1em (1em = 16px)
- Pääteksti - 0.875em (16 x 0.875 = 14)
- Al tekst - 0.75em (16 x 0.75 = 12)
- Alaviitteet - 0,625em (16 x 0,625 = 10)
Älä unohda perintöä!
Mutta se ei ole kaikki, mitä ems on. Toinen asia, mitä sinun tarvitsee muistaa, on, että ne ottavat vanhemman koon. Joten jos sinulla on sisäkkäisiä elementtejä, joilla on eri fonttikoko, saatat päätyä kirjasimeen, joka on paljon pienempi tai suurempi kuin odotit.
Esimerkiksi sinulla saattaa olla tällainen tyyliarkki:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Tämä johtaisi fonttien, jotka ovat 14px ja 10px päätekstin ja alaviitteet vastaavasti. Mutta jos laitat alaviitteen kappaleeseen, voit päätyä tekstiin, joka on 8,75 pikseliä eikä 10 pikseliä. Kokeile itseäsi, laita tämä yllä oleva CSS ja seuraava HTML asiakirjaan:
Tämä fontti on 14px tai 0.875 ems korkeudella.
Tässä kappaleessa on alaviite.
Tämä on vain alaviite.
Alaviitteen teksti on vaikea lukea 10px: ssä, se on lähes lukukelvoton 8,75 px: ssä.
Joten, kun käytät emsia, sinun on oltava hyvin tietoinen emoobjektien koosta tai pääset lopulta sivuillemme todella outoja kokoisia elementtejä.