Px vs. Em vs. Rem: Hvilken CSS-enhed skal du bruge?

Du kommer til at lære nogle få CSS-enheder til at tilpasse skriftstørrelsen af tekst, når du bygger websider. Der er mange enheder såsom pt, pc, ex osv., men i de fleste tilfælde bør du fokusere på de tre mest populære enheder: px, em og rem. Mange udviklere forstår normalt ikke, hvad forskellene mellem disse enheder er; så nedenfor er en detaljeret forklaring af disse enheder.

MAKEUSE AF DAGENS VIDEO

Før du fortsætter, skal du være opmærksom på, at der er to typer enhedslængder: absolut og i forhold .

Absolutte længder

De absolutte længdeenheder er faste, og en længde udtrykt i enhver af disse vil fremstå som præcis den størrelse.

Enheder med absolut længde anbefales ikke til brug på skærmen, fordi skærmstørrelserne varierer så meget. De kan dog bruges, hvis outputmediet er kendt, f.eks. til et trykt layout.

Enhed	Beskrivelse
cm	centimeter
mm	millimeter
i	tommer (1 tommer = 96px = 2,54 cm)
px *	pixels (1px = 1/96 af 1in)
pt	point (1pt = 1/72 af 1in)
pc	spar (1 stk = 12 pt)

Relative længder

Relative længdeenheder angiver en længde i forhold til en anden længdeegenskab. Relative længdeenheder skaleres bedre mellem forskellige gengivelsesmedier.

Enhed	I forhold til
i*	I forhold til elementets skriftstørrelse (2em betyder 2 gange størrelsen af den aktuelle skrifttype)
eks	I forhold til x-højden af den aktuelle skrifttype (sjældent brugt)
ch	I forhold til bredden af '0' (nul)
rem*	I forhold til font-størrelsen af rodelementet
vw	I forhold til 1 % af visningsportens bredde*
vh	I forhold til 1 % af højden af visningsporten*
min	I forhold til 1 % af viewportens* mindre dimension
vmax	I forhold til 1 % af viewportens* større dimension
%	I forhold til det overordnede element

1. Px (Pixel)

Pixel er nok den mest brugte enhed i CSS og er meget populære, når det kommer til at indstille skriftstørrelsen på tekst på websider. Én pixel (1px) er defineret som 1/96th af en tomme i udskriftsmedier.

På computerskærme er de dog normalt ikke relateret til faktiske mål som centimeter og tommer, som du måske tror; de er bare defineret til at være små, men synlige. Hvad der anses for at være synligt afhænger af enheden.

Forskellige enheder har et forskelligt antal pixels pr. tomme på deres skærme, hvilket er kendt som pixeltæthed. Hvis du brugte antallet af fysiske pixels på skærmen på en enhed til at bestemme størrelsen af indholdet på den pågældende enhed, ville du have et problem med at få tingene til at se ens ud på tværs af skærme i alle størrelser.

Det er her enhedspixelforhold kommer ind i billedet. Det er i bund og grund kun en måde at beregne, hvor meget plads en CSS-pixel (1px) vil optage på enhedens skærm, hvilket vil gøre det muligt for den at se samme størrelse ud sammenlignet med en anden enhed.

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; 
}

produktion

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

Den øverste boks er, hvordan den ser ud, når den vises på en større skærm som en bærbar computer, og den nederste boks er, hvordan den ser ud når det vises på en mindre skærm, som en telefon .

Læg mærke til, hvordan teksten i begge felter er af samme størrelse. Det er dybest set sådan, pixlen fungerer. Det hjælper webindhold (ikke kun tekst) til at se samme størrelse ud på tværs af enheder.

2. Mig (M)

Em-enheden har fået sit navn fra det store bogstav 'M' (em), da de fleste CSS-enheder kommer fra typografi. Den bruger den aktuelle skriftstørrelse for det overordnede element som sin base. Det kan bruges til at skalere op eller nedskalere skriftstørrelsen af et element baseret på den skriftstørrelse, der er arvet fra forælderen.

Lad os sige, at du har en overordnet div, der har en skriftstørrelse på 16px. Hvis du opretter et afsnitselement i den div og giver det en skriftstørrelse på 1em, vil afsnitsskriftstørrelsen være 16px.

Men hvis du giver et andet afsnit skriftstørrelsen på 2em, vil det oversætte til 32px. Overvej 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; 
}

produktion

Du kan se, hvordan em kan skalere tekststørrelsen op, og hvordan den påvirkes af den aktuelle skriftstørrelse, der er arvet fra den overordnede container. Det er ikke tilrådeligt at bruge dem, især på komplekse strukturerede sider.

hvordan man bruger efterskole -app uden facebook

Hvis det ikke bruges korrekt, kan du løbe ind i skaleringsproblemer, hvor elementer muligvis ikke er dimensioneret korrekt baseret på en kompleks nedarvning af størrelser i DOM-træet.

3. Rem (Root Em)

Rem fungerer næsten på samme måde som em, men den største forskel er, at rem kun refererer til skriftstørrelsen af rodelementet på siden i stedet for forældrenes skriftstørrelse. Rodskriftstørrelsen er standardskriftstørrelsen angivet enten af brugeren i deres browserindstillinger eller af dig, udvikleren.

Standardskriftstørrelsen for en webbrowser er normalt 16px, derfor vil 1rem være 16px og 2rem vil være 32px. Men i et tilfælde, hvor root font-størrelsen er ændret til 10px for eksempel; 1rem vil være 10px og 2rem vil være 20px.

Her er et eksempel for at gøre tingene 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; 
}

produktion

webindhold størrelse i rem css måleenhed

Som du kan se, er afsnittene, der er defineret med REM-enheder, fuldstændig uforstyrrede af den skriftstørrelse, der er angivet i vores beholder og er strengt gengivet i forhold til rodskriftstørrelse defineret i HTML-elementvælgeren.

Px vs. Em vs. Rem: Hvilken enhed er den bedste?

Em anbefales ikke på grund af muligheden for at have et komplekst hierarki af indlejrede elementer. REM skaleres normalt korrekt med den nye standard-/basisskriftstørrelse angivet i browserindstillingerne i modsætning til PX. Dette forklarer, hvorfor du bør bruge REM, når du arbejder med tekstindhold på dine websider. REM vinder løbet. Bedre styling og skalering af dit indhold med REM tilføjer flair til dit websted, da det er ideelt for webstedsskabere. On-point målinger af dit indhold vil diktere udseendet og følelsen af dit websted, men du skal være kreativ.