Je gaat een paar CSS-eenheden leren voor het aanpassen van de lettergrootte van tekst bij het bouwen van webpagina's. Er zijn veel eenheden zoals pt, pc, ex, enz., maar in de meeste gevallen moet u zich concentreren op de drie meest populaire eenheden: px, em en rem. Veel ontwikkelaars begrijpen meestal niet wat de verschillen tussen deze eenheden zijn; dus hieronder is een gedetailleerde uitleg van deze eenheden.

Houd er, voordat u verder gaat, rekening mee dat er twee soorten eenheidslengtes zijn: absoluut En familielid.

Absolute lengtes

De absolute lengte-eenheden staan ​​vast en een lengte uitgedrukt in een van deze eenheden zal verschijnen als exact die maat.

Absolute lengte-eenheden worden niet aanbevolen voor gebruik op het scherm, omdat schermformaten zo sterk variëren. Ze kunnen echter worden gebruikt als het uitvoermedium bekend is, zoals voor een gedrukte lay-out.

Eenheid Beschrijving
cm centimeter
mm millimeter
in inch (1in = 96px = 2.54cm)
px * pixels (1px = 1/96ste van 1in)
pt punten (1pt = 1/72 van 1in)
pc pica's (1st = 12 pt)
instagram viewer

Relatieve lengtes

Relatieve lengte-eenheden specificeren een lengte ten opzichte van een andere lengte-eigenschap. Relatieve lengte-eenheden schalen beter tussen verschillende weergavemedia.

Eenheid In verhouding tot
em* Ten opzichte van de lettergrootte van het element (2em betekent 2 keer de grootte van het huidige lettertype)
ex Ten opzichte van de x-hoogte van het huidige lettertype (zelden gebruikt)
ch Ten opzichte van de breedte van de "0" (nul)
rem* Ten opzichte van de lettergrootte van het hoofdelement
vw Ten opzichte van 1% van de breedte van de viewport*
vh Ten opzichte van 1% van de hoogte van de viewport*
vmin Ten opzichte van 1% van de kleinere dimensie van de viewport*
vmax Ten opzichte van 1% van de grotere dimensie van de viewport*
% Ten opzichte van het bovenliggende element

1. Px (pixel)

Pixel is waarschijnlijk de meest gebruikte eenheid in CSS en is erg populair als het gaat om het instellen van de lettergrootte van tekst op webpagina's. Eén pixel (1px) wordt gedefinieerd als 1/96 inch in gedrukte media.

Op computerschermen zijn ze echter meestal niet gerelateerd aan werkelijke afmetingen zoals centimeters en inches, zoals je misschien denkt; ze zijn gewoon gedefinieerd om klein maar zichtbaar te zijn. Wat als zichtbaar wordt beschouwd, is afhankelijk van het apparaat.

Verschillende apparaten hebben een ander aantal pixels per inch op hun schermen, ook wel pixeldichtheid genoemd. Als je het aantal fysieke pixels op het scherm van een apparaat zou gebruiken om de grootte van de inhoud op dat apparaat te bepalen, zou je een probleem hebben om dingen er op alle schermen hetzelfde uit te laten zien.

Dat is waar de pixelverhouding van het apparaat om de hoek komt kijken. Het is in wezen gewoon een manier om te berekenen hoeveel ruimte een CSS-pixel (1px) op het scherm van het apparaat in beslag zal nemen, waardoor het er even groot uitziet in vergelijking met een ander apparaat.

Hieronder is een voorbeeld: -

<div klasse="container">
<div>
<h1>Dit is een paragraaf</h1>
<P>
 Lorem ipsum, dolor sit amet consectetur adipisicing elit.
 Reprehenderit incidunt perferendis iure veritatis cupiditate delectus
 omnis bij! Officiis praesentium officia, nemo veniam consequatur
 neus zonder vloeistof ipsam, corporis quas quaerat. Lorem ipsum dolor
 sit amet consectetur adipisicing elit. Hic quam beatae voluptatibus
 amet possimus iure belemmert veronderstellend onderscheid aliquid debitis, autem
 hoe dan ook, het is de bedoeling dat je een ducimus dolorum hebt.
</P>
</div>
</div>
.container {
 breedte: 100%;
 hoogte: 100vh;
 weergeven: flex;
 rechtvaardigen-inhoud: centrum;
 items uitlijnen: centreren;
}
.containerdiv {
 maximale breedte: 500px;
 opvulling: 5px 20px;
 rand: 1px grijs effen;
 grensstraal: 10px;
}
P {
 lettergrootte: 16px;
}

uitgang

Het bovenste vak is hoe het eruit ziet wanneer het wordt weergegeven op een groter scherm zoals een laptop, en het onderste vak is hoe het eruit ziet wanneer weergegeven op een kleiner scherm, zoals een telefoon.

Merk op hoe de tekst in beide vakken even groot is. Dat is eigenlijk hoe de pixel werkt. Het zorgt ervoor dat webinhoud (niet alleen tekst) er op verschillende apparaten hetzelfde formaat uitziet.

2. Em (M)

De em-eenheid dankt zijn naam aan de hoofdletter 'M' (em), aangezien de meeste CSS-eenheden uit typografie komen. Het gebruikt de huidige lettergrootte van het bovenliggende element als basis. Het kan worden gebruikt om de lettergrootte van een element omhoog of omlaag te schalen op basis van de lettergrootte die is geërfd van de ouder.

Laten we zeggen dat je een bovenliggende div hebt met een lettergrootte van 16px. Als u een alinea-element in die div maakt en het een lettergrootte van 1em geeft, is de lettergrootte van de alinea 16 px.

Als u echter een andere alinea de lettergrootte van 2em geeft, wordt dit vertaald naar 32px. Beschouw het onderstaande voorbeeld:

<div klasse="div-een">
<p klasse="een-em">1 em gebaseerd op 10px</P>
<p klasse="twee-em">2 em gebaseerd op 10px</P>
</div>
<div klasse="div-twee">
<p klasse="een-em">1 em gebaseerd op 10px</P>
<p klasse="twee-em">2 em gebaseerd op 10px</P>
</div>
</div>
.div-een {
 lettergrootte: 15px;
}
.div-twee {
 lettergrootte: 20px;
}
.een-em {
 lettergrootte: 1em;
}
.twee-em {
 lettergrootte: 2em;
}

uitgang

U kunt zien hoe em de tekstgrootte kan vergroten en hoe dit wordt beïnvloed door de huidige lettergrootte die is overgenomen van de bovenliggende container. Het is niet aan te raden om em te gebruiken, vooral niet binnen complexe gestructureerde pagina's.

Als het niet correct wordt gebruikt, kunt u schaalproblemen tegenkomen waarbij elementen mogelijk niet de juiste grootte hebben op basis van een complexe overerving van groottes in de DOM-structuur.

3. Rem (Root-em)

Rem werkt bijna hetzelfde als em, maar het belangrijkste verschil is dat rem alleen verwijst naar de lettergrootte van het hoofdelement op de pagina in plaats van naar de lettergrootte van het hoofdelement. De hoofdlettergrootte is de standaardlettergrootte die is opgegeven door de gebruiker in zijn browserinstellingen of door u, de ontwikkelaar.

De standaardlettergrootte van een webbrowser is meestal 16px, daarom is 1rem 16px en 2rem 32px. In het geval dat de hoofdlettergrootte bijvoorbeeld wordt gewijzigd in 10px; 1rem wordt 10px en 2rem wordt 20px.

Hier is een voorbeeld om het wat duidelijker te maken:

<div klasse="div-een">
<!--EM-->
<p klasse="een-em">1 em op basis van container (40px)</P>
<p klasse="twee-em">2 em gebaseerd op container (40px)</P>
<!-- REM-->
<p klasse="een-rem">1 rem gebaseerd op root (16px)</P>
<p klasse="twee-rem">2 rem gebaseerd op root (16px)</P>
</div>
.div-een {
 lettergrootte: 40px;
}
.een-em {
 lettergrootte: 1em;
}
.twee-em {
 lettergrootte: 2em;
}
.one-rem {
 lettergrootte: 1rem;
}
.twee-rem {
 lettergrootte: 2rem;
}

uitgang

Zoals u kunt zien, worden de alinea's die zijn gedefinieerd met REM-eenheden volledig onaangetast door de lettergrootte die in onze container is opgegeven en worden strikt weergegeven ten opzichte van de hoofdlettergrootte gedefinieerd in de HTML-elementkiezer.

Px versus Em vs. Rem: Welke eenheid is de beste?

Em wordt niet aanbevolen vanwege de mogelijkheid van een complexe hiërarchie van geneste elementen. REM wordt meestal op de juiste manier geschaald met de nieuwe standaard/basislettergrootte die is opgegeven in de browserinstellingen, in tegenstelling tot PX. Dit verklaart waarom u REM zou moeten gebruiken bij het werken met tekstinhoud op uw webpagina's. REM wint de race. Betere styling en schaalbaarheid van uw inhoud met REM voegt flair toe aan uw site, omdat het ideaal is voor website-makers. Metingen van uw inhoud op punt bepalen de look en feel van uw website, maar u moet creatief zijn.