Px vs. Em vs. Rem: Hvilken CSS-enhet bør du bruke?

Du kommer til å lære noen få CSS-enheter for å tilpasse skriftstørrelsen på tekst når du bygger nettsider. Det er mange enheter som pt, pc, ex osv., men i de fleste tilfeller bør du fokusere på de tre mest populære enhetene: px, em og rem. Mange utviklere forstår vanligvis ikke hva forskjellene mellom disse enhetene er; så nedenfor er en detaljert forklaring av disse enhetene.

Før du fortsetter, vær oppmerksom på at det er to typer enhetslengder: absolutt og slektning.

Absolutte lengder

De absolutte lengdeenhetene er faste, og en lengde uttrykt i noen av disse vil vises som nøyaktig den størrelsen.

Absolutte lengdeenheter anbefales ikke for bruk på skjermen, fordi skjermstørrelsene varierer så mye. De kan imidlertid brukes hvis utgangsmediet er kjent, for eksempel for en trykt layout.

Relative lengder

Relative lengdeenheter spesifiserer en lengde i forhold til en annen lengdeegenskap. Relative lengdeenheter skaleres bedre mellom forskjellige gjengivelsesmedier.

1. Px (piksel)

Pixel er sannsynligvis den mest brukte enheten i CSS og er veldig populær når det kommer til å angi skriftstørrelse på tekst på nettsider. Én piksel (1px) er definert som 1/96 tomme i utskriftsmedier.

På dataskjermer er de vanligvis ikke relatert til faktiske mål som centimeter og tommer som du kanskje tror; de er bare definert til å være små, men synlige. Hva som anses som synlig er avhengig av enheten.

Ulike enheter har forskjellig antall piksler per tomme på skjermene sine, som er kjent som pikseltetthet. Hvis du brukte antall fysiske piksler på skjermen til en enhet for å bestemme størrelsen på innholdet på den enheten, ville du ha et problem med å få ting til å se likt ut på skjermer i alle størrelser.

Det er her enhetens pikselforhold kommer inn. Det er egentlig bare en måte å beregne hvor mye plass en CSS-piksel (1px) vil ta opp på enhetens skjerm, slik at den ser like stor ut sammenlignet med en annen enhet.

Nedenfor er et eksempel:-

<div klasse="container">
<div>
<h1>Dette er et avsnitt</h1>
<s>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis på! Officiis praesentium officia, nemo veniam consequatur
 nostrum sunt aliquid ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure hindre assumenda distinctio aliquid debitis, autem
 vel ullam aut, quod corporis ratione atque ducimus dolorum.
</s>
</div>
</div>

.container {
 bredde: 100 %;
 høyde: 100vh;
 display: flex;
 rettferdiggjøre-innhold: senter;
 align-items: center;
}
.containerdiv {
 maks-bredde: 500px;
 polstring: 5px 20px;
 kantlinje: 1px grå solid;
 border-radius: 10px;
}
p {
 skriftstørrelse: 16px;
}

produksjon

Den øverste boksen er hvordan den ser ut når den vises på en større skjerm som en bærbar datamaskin, og den nederste boksen er hvordan den ser ut når den vises på en mindre skjerm, som en telefon.

Legg merke til hvordan teksten i begge boksene er av samme størrelse, det er i utgangspunktet slik pikselen fungerer. Det hjelper nettinnhold (ikke bare tekst) til å se samme størrelse ut på tvers av enheter.

2. Em (M)

Em-enheten har fått navnet sitt fra den store bokstaven 'M' (em) ettersom de fleste CSS-enheter kommer fra typografi. Den bruker gjeldende skriftstørrelse til det overordnede elementet som base. Den kan brukes til å skalere opp eller ned skriftstørrelsen til et element basert på skriftstørrelsen som er arvet fra overordnet.

La oss si at du har en overordnet div som har en skriftstørrelse på 16px. Hvis du lager et avsnittselement i den div og gir det en skriftstørrelse på 1em, vil avsnittets skriftstørrelse være 16px.

Men hvis du gir et annet avsnitt skriftstørrelsen 2em, vil det oversettes til 32px. Tenk på eksemplet nedenfor:

<div klasse="div-one">
<p klasse="en-em">1 em basert på 10px</s>
<p klasse="to-em">2 em basert på 10px</s>
</div>
<div klasse="div-to">
<p klasse="en-em">1 em basert på 10px</s>
<p klasse="to-em">2 em basert på 10px</s>
</div>
</div>

.div-one {
 skriftstørrelse: 15px;
}
.div-to {
 skriftstørrelse: 20px;
}
.one-em {
 skriftstørrelse: 1em;
}
.to-em {
 skriftstørrelse: 2em;
}

produksjon

Du kan se hvordan em kan skalere opp størrelsen på tekst og hvordan den påvirkes av gjeldende skriftstørrelse som er arvet fra den overordnede beholderen. Det er ikke tilrådelig å bruke dem, spesielt på komplekse strukturerte sider.

Hvis den ikke brukes riktig, kan du støte på skaleringsproblemer der elementer kanskje ikke er riktig dimensjonert basert på en kompleks arv av størrelser i DOM-treet.

3. Rem (Root Em)

Rem fungerer nesten på samme måte som em, men hovedforskjellen er at rem kun refererer til skriftstørrelsen til rotelementet på siden i stedet for foreldrenes skriftstørrelse. Rotskriftstørrelsen er standardfontstørrelsen spesifisert enten av brukeren i nettleserinnstillingene eller av deg, utvikleren.

Standard skriftstørrelse for en nettleser er vanligvis 16px, derfor vil 1rem være 16px og 2rem vil være 32px. Imidlertid, i et tilfelle der root-font-størrelsen endres til 10px for eksempel; 1rem vil være 10px og 2rem vil være 20px.

Her er et eksempel for å gjøre ting klarere:

<div klasse="div-one">
<!-- EM -->
<p klasse="en-em">1 em basert på beholder (40px)</s>
<p klasse="to-em">2 em basert på beholder (40px)</s>
<!-- REM -->
<p klasse="en-rem">1 rem basert på root (16px)</s>
<p klasse="to-rem">2 rem basert på root (16px)</s>
</div>

.div-one {
 skriftstørrelse: 40px;
}
.one-em {
 skriftstørrelse: 1em;
}
.to-em {
 skriftstørrelse: 2em;
}
.one-rem {
 skriftstørrelse: 1rem;
}
.to-rem {
 skriftstørrelse: 2rem;
}

produksjon

Som du kan se, er avsnittene som er definert med REM-enheter fullstendig uforstyrret av skriftstørrelsen som er deklarert i vår beholder og er strengt gjengitt i forhold til root skriftstørrelse definert i HTML-elementvelgeren.

Px vs. Em vs. Rem: Hvilken enhet er best?

Em anbefales ikke på grunn av muligheten for å ha et komplekst hierarki av nestede elementer. REM skaleres vanligvis riktig med den nye standard-/grunnskriftstørrelsen som er spesifisert i nettleserinnstillingene i motsetning til PX. Dette forklarer hvorfor du bør bruke REM når du arbeider med tekstinnhold på nettsidene dine. REM vinner løpet. Bedre styling og skalering av innholdet ditt med REM gir stil til nettstedet ditt, da det er ideelt for nettstedskapere. Punktmålinger av innholdet ditt vil diktere utseendet og følelsen til nettstedet ditt, men du må være kreativ.