Amikor egy weboldalt épít, a legtöbb szakember azt javasolja, hogy a betűtípusokat (és valójában mindent) méretezzen relatív mérettel, például em-ekkel, ex-ekkel, százalékokkal vagy pixelekkel. Ez azért van, mert valóban nem ismeri az összes különböző módszert, amellyel valaki megtekintheti a tartalmát. Ha pedig abszolút mértéket (hüvelyk, centiméter, milliméter, pont vagy pica) használ, az befolyásolhatja az oldal megjelenítését vagy olvashatóságát különböző eszközökön. És a W3C ajánlja hogy em-eket használ a méretekhez.
De mekkora egy em?
Szerint a W3C egy em:
"megegyezik annak az elemnek a" font-size "tulajdonságának kiszámított értékével, amelyre használják. Kivételt képez az az eset, amikor az 'em' magában a 'font-size' tulajdonság értékében fordul elő, ebben az esetben a szülő elem betűméretére utal. "
Más szavakkal, az emeknek nincs abszolút mérete. Méretértéküket az alapján veszik fel, hogy hol vannak. Legtöbbnek webdesignerek, ez azt jelenti, hogy egy webböngészőben vannak, tehát egy 1em magas betűtípus pontosan megegyezik az adott böngésző alapértelmezett betűméretével.
De milyen magas az alapértelmezett méret? Nem lehet 100% -ig biztos abban, hogy az ügyfelek megváltoztathatják alapértelmezett betűméret böngészőikben, de mivel a legtöbb ember nem, akkor feltételezhetjük, hogy a legtöbb böngésző alapértelmezett betűmérete 16 képpont. Tehát legtöbbször 1em = 16px.
Gondoljon pixelben, használja az EM-eket a méréshez
Miután megtudta, hogy az alapértelmezett betűméret 16 képpont, használhatja az em-eket, hogy ügyfelei könnyedén átméretezhessék az oldalt, de belegondolhatnak pixel betűméreteihez. Tegyük fel, hogy méretezési struktúrája van, ilyen:
- 1. címsor - 20 képpont
- 2. címsor - 18 képpont
- 3. címsor - 16 képpont
- Fő szöveg - 14 képpont
- Alszöveg - 12 képpont
- Lábjegyzetek - 10 képpont
Meghatározhatná őket úgy, hogy pixeleket használ a méréshez, de akkor az IE 6-at és 7-et használó nem tudja jól átméretezni az oldalát. Tehát át kell alakítania a méreteket em-ekké, és ez csak néhány matematika kérdése:
- 1. címsor - 1,25em (16 x 1,25 = 20)
- 2. címsor - 1,125em (16 × 1,125 = 18)
- 3. címsor - 1em (1em = 16px)
- Fő szöveg - 0,875em (16 x 0,875 = 14)
- Alszöveg - 0,75em (16 x 0,75 = 12)
- Lábjegyzetek - 0,625em (16 x 0,625 = 10)
Ne felejtsd el az öröklést!
De nem csak ems van. A másik dolog, amire emlékezned kell, hogy ők vállalják a szülő méretét. Tehát, ha különböző betűméretű beágyazott elemeket tartalmaz, akkor a vártnál jóval kisebb vagy nagyobb betűkészletet eredményezhet.
Például lehet egy ilyen stíluslapja:
Ez azt eredményezné, hogy a betűtípusok 14 és 10 képpontosak legyenek a fő szövegnél és a lábjegyzeteknél. De ha lábjegyzetet teszel egy bekezdésbe, akkor a végén a szöveg 10,7x 8,75 képpontos lehet. Próbáld ki te is, tedd a fentieket CSS és a következő HTML-t egy dokumentumba:
Tehát, amikor em-eket használ, akkor nagyon tisztában kell lennie a szülőobjektumok méretével, különben valóban furcsa méretű elemeket talál az oldalon.