EM Vs. PX i CSS

December 8

Når du designer din hjemmeside, kan du finde dig selv ønsker at specificere din hjemmesides skriftstørrelse i CSS og være sikker på, at det vil blive vist den samme, uanset hvilken browser dine læsere bruger. Den "font-size" CSS ejendom accepterer mange forskellige typer af værdier; den mest brugt til styling website tekst er pixels og ems. Hver af disse vil give dig mulighed for at style din tekst konsekvent, men hver giver nogle problemer, som du bliver nødt til at overvinde.

Ems

Em dimensionering er i forhold til skriftstørrelsen sat for hele hjemmesiden. Standard skriftstørrelse til normal tekst, når der ikke dimensionering er angivet, er 16 pixels; således, at indstille tekststørrelsen til en em vil forårsage tekst, der skal vises med en størrelse på 16 pixels. Du kan beregne større eller mindre skriftstørrelser ved at dividere din tekstens ønskede størrelse i pixels med 16; for eksempel, hvis du vil have teksten til en overskrift vises som 28 pixels i størrelse, ville du sætte den til 1,75 ems. Em størrelser er relative, og derfor vil kaskade; hvis du indstiller skriftstørrelse alle <div> tags til 1,2 ems og skriftstørrelsen på alle lister til 1,2 ems, skriftstørrelsen på enhver liste indeholdt i en <div> vil være lig med 1,44 ems.

Pixels

Angivelse din skriftstørrelse i pixels giver finkornet kontrol over størrelsen af ​​din hjemmeside tekst. Tekst, der er til størrelsen på 16 pixels vil altid besætte 16 pixels i højden, uanset hvad skrifttype teksten er sat i, eller som browser dine læsere bruger. Pixel størrelser er absolut og ikke kaskade; hvis du indstiller skriftstørrelse alle <div> tags til 16 pixels og skriftstørrelsen på alle lister til 14 pixels, skriftstørrelsen på enhver liste indeholdt i en <div> vil forblive 14 pixels.

Problemer med Pixel størrelsesguide

Indstilling af din skriftstørrelse i pixels præsenterer nogle usability problemer. Personer, der besøger dit websted ved hjælp af Internet Explorer vil være i stand til at justere tekstens størrelse uden at bruge browserens zoom-funktion; som et resultat, kan læsere, der lider af synsnedsættelser være ude af stand til at læse teksten din hjemmeside. Derudover kan tekststørrelsen ikke skalere nedad korrekt på nogle mobile browsere, sænke læsbarheden, når din hjemmeside er set gennem smartphones eller andre mobile enheder.

Problemer med Em størrelsesguide

Tekst, der er i ems skalaer opad og nedad når det er nødvendigt; desværre, vil denne form for dimensionering også medføre nogle problemer med Internet Explorer. Når øge eller mindske tekststørrelsen, teksten skalering er uforholdsmæssig, hvilket resulterer i meget større eller mindre tekst end det ville være passende. Dette spørgsmål, dog kan nemt løses ved at sætte en procentsats baseret standard skriftstørrelse til kroppen af ​​hjemmesiden:

body {font-size: 100%; }

Når denne skrifttype baseline er blevet indstillet, vil enhver tekst sæt i ems skalere korrekt.


relaterede artikler