Når du opbygger en webside, anbefaler de fleste fagfolk, at du skriver størrelse (og faktisk alt) med en relativ foranstaltning som ems, exs, procentsatser eller pixels. Dette skyldes, at du virkelig ikke kender alle de forskellige måder, hvorpå nogen kan se dit indhold. Og hvis du bruger en absolut mål (tommer, centimeter, millimeter, punkter eller picas), kan det påvirke visningen eller læsbarheden af siden i forskellige enheder. Og W3C anbefaler, at du bruger ems til størrelser.
Men Hvor stor er en Em?
Ifølge W3C en em:
"er lig med den beregnede værdi af egenskaben" skrifttypestørrelse "af det element, som den anvendes på. Undtagelsen er, når 'em' forekommer i værdien af egenskaben" skrifttypestørrelse ", i hvilket tilfælde den refererer til skriftstørrelsen af overordnet element. "
Med andre ord har ems ikke en absolut størrelse. De anvender deres størrelsesværdier baseret på hvor de er. For de fleste webdesignere betyder det, at de er i en webbrowser, så en skrifttype, der er 1em høj, er nøjagtig den samme størrelse som standard skrifttypestørrelse for den pågældende browser.
Men hvor høj er standardstørrelsen? Der er ingen måde at være 100% sikker på, da kunderne kan ændre deres standard skriftstørrelse i deres browsere, men da de fleste ikke kan antage, at de fleste browsere har en standard skrifttype på 16px. Så det meste af tiden 1em = 16px.
Tænk i pixler, brug ems til foranstaltningen
Når du ved, at standard skrifttypestørrelse er 16px, kan du derefter bruge ems til at give dine kunder mulighed for at ændre størrelsen på siden nemt, men tænk i pixels for dine skrifttypestørrelser. Sig, at du har en dimensionering struktur noget som dette:
- Overskrift 1 - 20px
- Overskrift 2 - 18px
- Overskrift 3 - 16px
- Hovedtekst - 14px
- Undertekst - 12px
- Fodnoter - 10px
Du kunne definere dem på den måde ved hjælp af pixels til måling, men så vil alle, der bruger IE 6 og 7, ikke kunne ændre størrelsen på din side godt. Så du skal konvertere størrelserne til ems, og det er bare et spørgsmål om nogle matematik:
- Overskrift 1 - 1.25em (16 x 1.25 = 20)
- Overskrift 2 - 1.125em (16 × 1.125 = 18)
- Overskrift 3 - 1em (1em = 16px)
- Hovedtekst - 0.875em (16 x 0.875 = 14)
- Undertekst - 0,75em (16 x 0,75 = 12)
- Fodnoter - 0,625em (16 x 0,625 = 10)
Glem ikke arv!
Men det er ikke alt, der er at ems. Den anden ting du skal huske er, at de tager på forældrenes størrelse. Så hvis du har indlejrede elementer med forskellige skriftstørrelser, kan du ende med en skrifttype, der er meget mindre eller større end du forventer.
Du kan f.eks. Have et stilark som dette:
p {font-size: 0.875em; }.footnote {font-size: 0.625em; }
Dette ville resultere i skrifttyper, der er 14px og 10px for henholdsvis hovedteksten og fodnoter. Men hvis du lægger en fodnote inde i et afsnit, kan du ende med tekst, der er 8.75px snarere end 10px. Prøv det selv, sæt dette ovenstående CSS og følgende HTML i et dokument:
Denne skrifttype er 14 px eller 0,875 ems i højden.Dette afsnit indeholder en fodnote i den.Mens dette kun er en fodnote afsnit.
Fodnote tekst er svært at læse ved 10px, det er næsten ulæselige ved 8,75px.
Så når du bruger ems, skal du være meget opmærksom på størrelserne af de overordnede objekter, eller du vil ende med nogle virkelig ulige størrelser på din side.
