Home-theater-designers
Je gaat een paar CSS-eenheden leren om de lettergrootte van tekst aan te passen 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; daarom volgt hieronder een gedetailleerde uitleg van deze eenheden.
MAKEUSEVAN VIDEO VAN DE DAG
Houd er rekening mee dat er twee soorten eenheidslengtes zijn voordat u doorgaat: absoluut en familielid .
Absolute lengtes
De absolute lengte-eenheden zijn vast en een lengte die in een van deze wordt uitgedrukt, wordt weergegeven als precies die maat.
Absolute lengte-eenheden worden niet aanbevolen voor gebruik op het scherm, omdat de schermformaten zo variëren. Ze kunnen echter wel worden gebruikt als het uitvoermedium bekend is, zoals voor een gedrukte lay-out.
| Eenheid | Beschrijving |
|---|---|
| cm | centimeter |
| mm | millimeter |
| in | inch (1 inch = 96 px = 2,54 cm) |
| px * | pixels (1px = 1/96e van 1 inch) |
| pt | punten (1pt = 1/72 van 1in) |
| pc | schoppen (1st = 12pt) |
Relatieve lengtes
Relatieve lengte-eenheden specificeren een lengte ten opzichte van een andere lengte-eigenschap. Relatieve lengte-eenheden schalen beter tussen verschillende weergavemedia.
hoe maak je een jpeg-bestand kleiner
| Eenheid | Ten opzichte van | |
|---|---|---|
| in* | 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 het kijkvenster* | |
| min | Ten opzichte van 1% van de* kleinere dimensie van het kijkvenster | |
| vmax | Ten opzichte van 1% van de * grotere afmeting van het kijkvenster | |
| % | 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 alleen gedefinieerd als klein maar zichtbaar. Wat als zichtbaar wordt beschouwd, is afhankelijk van het apparaat.
Verschillende apparaten hebben een verschillend aantal pixels per inch op hun scherm, 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 hetzelfde uit te laten zien op schermen van alle formaten.
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) inneemt op het scherm van het apparaat, zodat het er hetzelfde formaat uitziet in vergelijking met een ander apparaat.
Hieronder is een voorbeeld: -
<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;
}uitvoer
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. Ik (M)
De em-eenheid dankt zijn naam aan de hoofdletter 'M' (em) omdat 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 het bovenliggende element.
Stel dat u een bovenliggende div heeft met een lettergrootte van 16px. Als u een alinea-element in die div maakt en het een lettergrootte van 1em geeft, wordt de lettergrootte van de alinea 16px.
Als u echter een andere alinea de lettergrootte van 2em geeft, wordt dit vertaald naar 32px. Beschouw het onderstaande voorbeeld:
<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;
}uitvoer
U kunt zien hoe em de tekstgrootte kan vergroten en hoe deze 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 grootten 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 de ouder. De hoofdlettergrootte is de standaard lettergrootte die door de gebruiker in zijn browserinstellingen of door u, de ontwikkelaar, is opgegeven.
wat betekent een streak beginnen?
De standaard lettergrootte van een webbrowser is meestal 16px, daarom is 1rem 16px en 2rem 32px. In het geval dat de hoofdlettergrootte wordt gewijzigd in bijvoorbeeld 10px; 1rem zal 10px zijn en 2rem zal 20px zijn.
Hier is een voorbeeld om het duidelijker te maken:
<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;
}
uitvoer
Zoals u kunt zien, zijn de alinea's die zijn gedefinieerd met REM-eenheden volledig onaangetast door de lettergrootte die in onze container is aangegeven en worden strikt weergegeven ten opzichte van de root-lettergrootte gedefinieerd in de HTML-elementselector.
Px versus Em versus 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. Het beter stylen en schalen van uw inhoud met REM voegt flair toe aan uw site, omdat het ideaal is voor websitemakers. Directe metingen van uw inhoud bepalen het uiterlijk van uw website, maar u moet creatief zijn.