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.

hvor lenge varer datamaskinens strømforsyninger

MAKEUSE AV DAGENS VIDEO

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.

Enhet	Beskrivelse
cm	centimeter
mm	millimeter
i	tommer (1 tommer = 96 px = 2,54 cm)
px *	piksler (1 piksel = 1/96 av 1 tomme)
pt	poeng (1 pkt = 1/72 av 1 tomme)
pc	spar (1 stk = 12 pkt)

Relative lengder

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

Enhet	I slekt med
i*	I forhold til skriftstørrelsen til elementet (2em betyr 2 ganger størrelsen på gjeldende skrift)
eks	Relativt til x-høyden til gjeldende font (sjelden brukt)
kap	Relativt til bredden på '0' (null)
rem*	Relativt til skriftstørrelsen til rotelementet
vw	Relativt til 1 % av bredden på visningsporten*
vh	Relativt til 1 % av høyden på visningsporten*
min	Relativt til 1 % av visningsportens* mindre dimensjon
vmax	Relativt til 1 % av visningsportens* større dimensjon
%	I forhold til det overordnede elementet

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 i hovedsak 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 class="container"> 
     <div> 
       <h1>This is a paragraph</h1> 
       <p> 
         Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
         Reprehenderit incidunt perferendis iure veritatis cupiditate delectus 
         omnis at! 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 impedit assumenda distinctio aliquid debitis, autem 
         vel ullam aut, quod corporis ratione atque ducimus dolorum. 
       </p> 
     </div> 
   </div>

.container { 
  width: 100%; 
  height: 100vh; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
} 
.container div { 
  max-width: 500px; 
  padding: 5px 20px; 
  border: 1px grey solid; 
  border-radius: 10px; 
} 
p { 
  font-size: 16px; 
}

produksjon

web-innhold-sized-in-pixel-css-unit-of-measurement

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 .

dc-kjeller-stor konf [kamera, telefon, tv, usb, zoom]

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. Meg (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 class="div-one"> 
      <p class="one-em">1 em based on 10px</p> 
      <p class="two-em">2 em based on 10px</p> 
  </div> 
    <div class="div-two"> 
     <p class="one-em">1 em based on 10px</p> 
     <p class="two-em">2 em based on 10px</p> 
    </div> 
   </div>

.div-one { 
  font-size: 15px; 
} 
.div-two { 
  font-size: 20px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
}

produksjon

nettinnhold størrelse i em css måleenhet

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.

macbook pro vil ikke koble til internett

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 standardskriftstø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 class="div-one"> 
     <!-- EM --> 
     <p class="one-em">1 em based on container (40px)</p> 
     <p class="two-em">2 em based on container (40px)</p> 
     <!-- REM --> 
     <p class="one-rem">1 rem based on root (16px)</p> 
     <p class="two-rem">2 rem based on root (16px)</p> 
   </div>

.div-one { 
  font-size: 40px; 
} 
.one-em { 
  font-size: 1em; 
} 
.two-em { 
  font-size: 2em; 
} 
.one-rem { 
  font-size: 1rem; 
} 
.two-rem { 
  font-size: 2rem; 
}

produksjon

nettinnhold størrelse i rem css måleenhet

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.