Uporaba Ems-a za spreminjanje velikosti pisave
Ko izdelujete spletno stran, večina strokovnjakov priporoča, da velikost pisave (in dejansko vse) z relativnim ukrepom, kot so ems, exs, percentages ali pixels. To je zato, ker v resnici ne poznate vseh različnih načinov, na katere lahko nekdo vidi vašo vsebino. Če uporabite absolutno mero (palcev, centimetri, milimetri, točke ali pike), to lahko vpliva na prikaz ali berljivost strani v različnih napravah.
In W3C priporoča, da uporabite ems za velikosti.
Ampak kako velik je Em?
V skladu z W3C em:
"je enaka izračunani vrednosti lastnosti" velikosti pisave "elementa, na katerem se uporablja. Izjema je, če pride do" em "v vrednosti lastnosti" velikosti pisave ", v tem primeru se nanaša na velikost pisave nadrejenega elementa. "
Z drugimi besedami, ems nimajo absolutne velikosti. Prevzamejo svoje velikosti glede na to, kje so. Za večino spletnih oblikovalnikov to pomeni, da so v spletnem brskalniku, zato je pisava, ki je enaka 1 e, enaka velikosti kot privzeta velikost pisave za ta brskalnik.
Ampak kako visok je privzeta velikost? Ni mogoče, da bi bili 100% zanesljivi, saj lahko stranke v svojih brskalnikih spremenijo privzeto velikost pisave, ker večina ljudi ne more domnevati, da ima večina brskalnikov privzeto velikost pisave 16 pik. Torej večino časa 1em = 16px .
Razmislite v pikslih, uporabite Ems za ukrep
Ko veste, da je privzeta velikost pisave 16 slikovnih pik, lahko uporabite ems, da svojim strankam omogočite preprosto spreminjanje velikosti strani, a mislite, da bodo v velikosti pisave v velikosti pisave.
Recimo, da imate velikostno strukturo nekaj takega:
- Naslov 1 - 20 slikovnih pik
- Naslov 2 - 18 slikovnih pik
- Naslov 3 - 16 slikovnih pik
- Glavni tekst - 14px
- Podnaslov - 12px
- Opombe - 10px
Tako bi jih lahko definirali tako, da uporabite pike za merjenje, vendar potem vsakdo, ki uporablja IE 6 in 7, ne bi mogel ustrezno spremeniti velikosti strani. Zato morate pretvoriti velikost v ems in to je samo vprašanje matematike:
- Naslov 1 - 1,25em (16 x 1,25 = 20)
- Naslov 2 - 1.125em (16 × 1.125 = 18)
- Naslov 3 - 1em (1em = 16px)
- Glavno besedilo - 0.875em (16 x 0.875 = 14)
- Podnaslov - 0,75em (16 x 0,75 = 12)
- Opombe - 0.625em (16 x 0.625 = 10)
Ne pozabite na dediščino!
Ampak to ni vse, kar je za ems. Druga stvar, ki jo morate zapomniti, je, da vzamejo velikost staršev. Torej, če imate vgnezdeni elementi z različnimi velikostmi pisave, lahko prikažete veliko manjšo ali večjo pisavo, kot ste pričakovali.
Na primer, lahko imate takole:
p {velikost pisave: 0.875em; }
.fotnote {font-size: 0.625em; }
To bi povzročilo pisave, ki so 14px in 10px za glavno besedilo in opombe. Če pa v odstavku dodate opombo, bi lahko končali z besedilom, ki je 8,75 slikovnih pik namesto 10 pik. Poskusite sami, postavite to zgornji CSS in naslednji HTML v dokument:
Ta pisava je 14px ali 0,875 ems v višino.
Ta odstavek ima v njej opombo.
Medtem ko je to le odstavek opombe.
Besedilo v sprotni opombi je težko brati z 10 pik, je skoraj neberljiv pri 8,75 pik.
Torej, ko uporabljate ems, se morate zavedati velikosti starševskih predmetov ali pa boste na strani našli nekaj resnično čudnih elementov.