Az Ems használata a betűméretek megváltoztatásához
Amikor weblapot készít, a legtöbb szakember azt javasolja, hogy méretezzenek fontokat (sőt, mindent) egy olyan relatív mérettel, mint az ems, exs, percentages vagy pixels. Ennek az az oka, hogy tényleg nem tudod, hogy a tartalom milyen módon nézheti meg valaki. És ha abszolút méretet használ (hüvelyk, centiméter, milliméter, pont vagy pikas), ez befolyásolhatja az oldal megjelenítését vagy olvashatóságát különböző eszközökön.
A W3C azt javasolja, hogy használjon EMS-t a méretekhez.
De mennyire nagy az em?
A W3C szerint em:
"megegyezik annak az elemnek a" font-size "tulajdonságának kiszámított értékével, amelyre azt használják, a kivétel az, amikor az" em "a" font-size "tulajdonság értékében fordul elő, mely esetben a szülőelem betűméretéhez. "
Más szavakkal, az emsnek nincs abszolút mérete. A méretértékeket a helyükön alapulnak. A legtöbb webes tervezõ esetében ez azt jelenti, hogy egy webböngészõben vannak, így egy 1em magas betûméret pontosan ugyanolyan méretû, mint a böngészõ alapértelmezett betûmérete.
De mennyi az alapértelmezett méret? Nem biztos, hogy 100% -ban biztos lehet benne, hiszen az ügyfelek a böngészőikben megváltoztathatják alapértelmezett betűméretüket, de mivel a legtöbb ember nem tudja feltételezni, hogy a legtöbb böngésző alapértelmezett betűmérete 16px. Tehát a legtöbb idő 1em = 16px .
Gondolj a képpontokban, használd az Ems-t a méréshez
Miután tudta, hogy az alapértelmezett betűméret 16px, akkor az ems lehetővé teszi az ügyfelek számára, hogy könnyen átmérjék az oldalt, de képpontokban gondolják a betűméreteket.
Mondja meg, hogy van ilyen méretezési struktúrája:
- Headline 1 - 20px
- Headline 2 - 18px
- Headline 3 - 16px
- Fő szöveg - 14px
- Al szöveg - 12 oldal
- Lábjegyzetek - 10px
Ezeket a méréseket képpontok segítségével meg lehet határozni, de az IE 6 és 7 használatával rendelkezők nem tudják átméretezni az oldalt. Tehát át kell alakítanod a méreteket ems-re, és ez csak matematikai kérdés:
- Headline 1 - 1.25em (16 x 1,25 = 20)
- Headline 2 - 1.125em (16 × 1.125 = 18)
- 3. cím - 1em (1em = 16px)
- Fő szöveg - 0.875em (16 x 0.875 = 14)
- Al szöveg - 0.75em (16 x 0.75 = 12)
- Lábjegyzetek - 0.625em (16 x 0.625 = 10)
Ne felejtsd el az örökséget!
De ez nem mindegyik az ems számára. A másik dolog, amire emlékezned kell, az, hogy figyelembe veszi a szülő méretét. Tehát ha különböző betűméretű, egymásba ágyazott elemek vannak, akkor sokkal kisebb vagy nagyobb méretű betűtípust kaphatsz, mint amire számítasz.
Például előfordulhat, hogy ilyen stíluslap van:
p {font-size: 0.875em; }
.footnote {font-size: 0.625em; }
Ez olyan betűkészletekhez vezetne, amelyek 14px és 10px a fő szöveghez és a lábjegyzetekhez. De ha beilleszt egy lábjegyzetet egy bekezdésbe, akkor a szöveg 8.75px helyett 10px. Próbáld ki magad, tedd a fenti CSS-t és a következő HTML dokumentumot:
Ez a betűtípus 14px vagy 0.875 ems magasságban van.
Ebben a bekezdésben van egy lábjegyzet benne.
Bár ez csak egy lábjegyzet bekezdés.
A lábjegyzet szövegét nehéz elolvasni 10-szeresére, ez majdnem olvashatatlan 8,75-szeres pontossággal.
Szóval, ha az ems-t használja, akkor nagyon tisztában kell lennie a szülő objektumok méretével, vagy pedig az oldalad néhány valóban furcsa méretű eleme lesz.