Notkun Ems til að breyta leturstærð
Þegar þú ert að byggja upp vefsíðu, mæla flestir sérfræðingar við að stærð letur (og reyndar allt) með hlutfallslegri mælikvarða eins og ems, exs, prósentur eða punkta. Þetta er vegna þess að þú veist í raun ekki allar mismunandi leiðir sem einhver gæti séð efnið þitt. Og ef þú notar alger mælikvarða (tommur, sentimetrar, millimetrar, punkta eða picas) gæti það haft áhrif á skjáinn eða læsanleika síðunnar í mismunandi tækjum.
Og W3C mælir með því að þú notir ems fyrir stærðir.
En hversu stór er Em?
Samkvæmt W3C er em:
"jafngildir reiknuðu gildi eignarinnar" leturstærð "frumefnisins sem hún er notuð til. Undantekningin er þegar 'em' á sér stað í gildi eignarinnar 'leturstærð' sjálft, en það vísar til að leturstærð foreldrahlutans. "
Með öðrum orðum, ems hefur ekki alger stærð. Þeir taka á sig stærðarverð þeirra miðað við hvar þau eru. Fyrir flesta vefhönnuðir þýðir þetta að þeir séu í vafra, þannig að letur sem er 1em á hæð er nákvæmlega eins og venjulegt leturstærð fyrir þá vafra.
En hversu hátt er sjálfgefið stærð? Það er engin leið til að vera 100% viss þar sem viðskiptavinir geta breytt sjálfgefin leturstærð í vafra sínum, en þar sem flestir gera það geturðu ekki gert ráð fyrir að flestir vöfrum hafi sjálfgefið leturstærð 16 punkta. Svo mest af þeim tíma 1em = 16px .
Hugsaðu í pixlum, notaðu Ems fyrir málið
Þegar þú veist að sjálfgefið leturstærð er 16px, þá getur þú notað ems til að leyfa viðskiptavinum þínum að breyta stærðinni á síðunni auðveldlega en hugsa í punktum fyrir leturstærðina þína.
Segðu að þú sért með límvatn uppbyggingu eitthvað svoleiðis:
- Fyrirsögn 1 - 20px
- Fyrirsögn 2 - 18px
- Fyrirsögn 3 - 16px
- Aðal texti - 14px
- Sub texti - 12px
- Skýringar - 10px
Þú gætir skilgreint þær með því að nota punkta til að mæla, en þá gæti einhver sem notar IE 6 og 7 ekki breytt stærð þinni vel. Svo ættirðu að breyta stærðum til ems og þetta er bara spurning um stærðfræði:
- Fyrirsögn 1 - 1.25em (16 x 1.25 = 20)
- Fyrirsögn 2 - 1.125em (16 × 1.125 = 18)
- Fyrirsögn 3 - 1em (1em = 16px)
- Aðal texti - 0.875em (16 x 0.875 = 14)
- Undirstexti - 0.75em (16 x 0,75 = 12)
- Neðanmálsgreinar - 0,625em (16 x 0,625 = 10)
Ekki gleyma erfðir!
En það er ekki allt sem það er að ems. Annað sem þú þarft að muna er að þeir taka á stærð foreldrisins. Svo ef þú ert með hreiður þættir með mismunandi leturstærð, þá gæti þú endað með letur sem er mun minni eða stærri en þú átt von á.
Til dæmis gæti verið að þú hafir stílblöð svona:
p {leturstærð: 0.875em; }
.footnote {leturstærð: 0.625em; }
Þetta myndi leiða til leturs sem eru 14px og 10px fyrir aðaltextinn og neðanmálsgreinina. En ef þú setur neðanmálsgrein inni í málsgrein gætiðu endað með texta sem er 8.75px fremur en 10px. Prófaðu það sjálfur, settu þetta hér að ofan CSS og eftirfarandi HTML í skjal:
Þessi leturgerð er 14 px eða 0,875 ems á hæð.
Þessi málsgrein inniheldur neðanmálsgrein.
Þó þetta sé bara neðanmálsgrein.
Textinn í neðanmálsgreininni er erfitt að lesa á 10 px, það er næstum ólæsilegt á 8,75 px.
Svo þegar þú ert að nota ems þarftu að vera mjög meðvituð um stærðir foreldrahlutanna, eða þú munt endar með einhverjum ótrúlega stórum þáttum á síðunni þinni.