Px vs. Em vs. Rem: Vilken CSS-enhet ska du använda?

Px vs. Em vs. Rem: Vilken CSS-enhet ska du använda?

Du kommer att lära dig några CSS-enheter för att anpassa teckensnittsstorleken på text när du bygger webbsidor. Det finns många enheter som pt, pc, ex etc, men i de flesta fall bör du fokusera på de tre mest populära enheterna: px, em och rem. Många utvecklare förstår vanligtvis inte vad skillnaderna mellan dessa enheter är; så nedan är en detaljerad förklaring av dessa enheter.





MAKEUSE AV DAGENS VIDEO

Innan du fortsätter, observera att det finns två typer av enhetslängder: absolut och släkting .





Absoluta längder

De absoluta längdenheterna är fasta, och en längd uttryckt i någon av dessa kommer att visas som exakt den storleken.





Absoluta längdenheter rekommenderas inte för användning på skärmen, eftersom skärmstorlekarna varierar så mycket. De kan dock användas om utmatningsmediet är känt, till exempel för en tryckt layout.

Enhet Beskrivning
centimeter centimeter
mm millimeter
i tum (1 tum = 96 px = 2,54 cm)
px * pixlar (1px = 1/96:e av 1tum)
pt poäng (1pt = 1/72 av 1tum)
st spader (1st = 12pt)

Relativa längder

Relativa längdenheter anger en längd i förhållande till en annan längdegenskap. Relativa längdenheter skalas bättre mellan olika renderingsmedium.



vad ska du göra om du tror att din telefon har blivit hackad
Enhet Släkt med
i* Relativt till teckensnittsstorleken på elementet (2em betyder 2 gånger storleken på det aktuella teckensnittet)
ex Relativt x-höjden på det aktuella teckensnittet (används sällan)
kap Relativt till bredden på '0' (noll)
rem* Relativt till teckenstorleken på rotelementet
vw Relativt 1 % av visningsportens bredd*
vh Relativt 1 % av höjden på visningsporten*
min Relativt 1 % av visningsportens* mindre dimension
vmax Relativt 1 % av viewportens* större dimension
% I förhållande till det överordnade elementet

1. Px (pixel)

Pixel är förmodligen den mest använda enheten i CSS och är mycket populära när det kommer till att ställa in teckenstorleken på text på webbsidor. En pixel (1px) definieras som 1/96:e tum i tryckt media.

På datorskärmar är de dock vanligtvis inte relaterade till faktiska mått som centimeter och tum som du kanske tror; de definieras bara som små men synliga. Vad som anses vara synligt beror på enheten.





Olika enheter har olika antal pixlar per tum på sina skärmar, vilket kallas pixeltäthet. Om du använde antalet fysiska pixlar på skärmen på en enhet för att bestämma storleken på innehållet på den enheten, skulle du ha problem med att få saker att se likadana ut på skärmar av alla storlekar.

Det är där enhetens pixelförhållande kommer in. Det är i princip bara ett sätt att beräkna hur mycket utrymme en CSS-pixel (1px) tar upp på enhetens skärm, vilket gör att den ser lika stor ut jämfört med en annan enhet.





hur man grupperar flikar i krom

Nedan är ett exempel:-

<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

  webbinnehållsstorlek-i-pixel-css-måttenhet

Den övre rutan är hur den ser ut när den visas på en större skärm som en bärbar dator, och den nedre rutan är hur den ser ut när den visas på en mindre skärm, som en telefon .

Lägg märke till hur texten i båda rutorna är av samma storlek, det är i princip hur pixeln fungerar. Det hjälper webbinnehåll (inte bara text) att se lika stort ut på olika enheter.

2. Jag (M)

Em-enheten har fått sitt namn från den stora bokstaven 'M' (em) eftersom de flesta CSS-enheter kommer från typografi. Den använder den aktuella teckenstorleken för det överordnade elementet som bas. Den kan användas för att skala upp eller ner teckenstorleken för ett element baserat på teckenstorleken som ärvts från föräldern.

Låt oss säga att du har en överordnad div som har en teckenstorlek på 16px. Om du skapar ett styckeelement i den div och ger det en teckensnittsstorlek på 1em blir styckets teckensnittsstorlek 16px.

Men om du ger ett annat stycke teckenstorleken 2em som översätts till 32px. Tänk på exemplet nedan:

   <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

  webbinnehåll i storleken em css måttenhet

Du kan se hur em kan skala upp storleken på text och hur den påverkas av den aktuella teckenstorleken som ärvts från den överordnade behållaren. Det är inte tillrådligt att använda dem, särskilt inte på komplexa strukturerade sidor.

Om de inte används på rätt sätt kan du stöta på skalningsproblem där element kanske inte har rätt storlek baserat på ett komplext arv av storlekar i DOM-trädet.

3. Rem (Root Em)

Rem fungerar nästan likadant som em, men den största skillnaden är att rem endast refererar till teckenstorleken för rotelementet på sidan snarare än förälderns teckenstorlek. Rotteckensnittsstorleken är standardteckensnittsstorleken som anges antingen av användaren i deras webbläsarinställningar eller av dig, utvecklaren.

Standardteckensnittsstorleken för en webbläsare är vanligtvis 16px, därför blir 1rem 16px och 2rem blir 32px. Men i ett fall där rotteckensnittsstorleken ändras till 10px till exempel; 1rem blir 10px och 2rem blir 20px.

hur man ändrar lösenord i unix

Här är ett exempel för att göra saker tydligare:

   <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

  webbinnehåll i rem css måttenhet

Som du kan se är styckena som definieras med REM-enheter helt opåverkade av teckenstorleken som deklareras i vår behållare och är strikt återgivna i förhållande till rotteckensnittsstorlek definierad i HTML-elementväljaren.

Px vs. Em vs. Rem: Vilken enhet är bäst?

Em rekommenderas inte på grund av möjligheten att ha en komplex hierarki av kapslade element. REM skalas vanligtvis på lämpligt sätt med den nya standard-/basteckensnittsstorleken som anges i webbläsarinställningarna i motsats till PX. Detta förklarar varför du bör använda REM när du arbetar med textinnehåll på dina webbsidor. REM vinner loppet. Bättre styling och skalning av ditt innehåll med REM ger stil till din webbplats eftersom den är idealisk för webbplatsskapare. Punktmätningar av ditt innehåll kommer att diktera utseendet och känslan på din webbplats, men du måste vara kreativ.