Diepte-inzicht in lettergrootte (PX versus EM versus REM)

Inzicht in lettergrootte

Lettergrootte speelt een zeer belangrijke rol op het web, Lettergrootte is een van de CSS-eigenschappen. De lettergrootte of tekstgrootte bepalen hoe groot de tekens op een webpagina worden weergegeven. een lettertype wordt meestal gemeten in punten (pt) en wordt meestal gedefinieerd in pixels (px).

Standaard is de basislettergrootte (hoofdlettergrootte) van een webpagina 16 px, totdat we een eigen aangepaste lettergrootte definiëren.
De eigenschap font-size wordt op een van de volgende manieren gespecificeerd:

1. Absoluut formaat of relatieve grootte
2. Als een lengte of percentage (ten opzichte van de lettergrootte van het bovenliggende element)

Basissyntaxis

Basissyntaxis van het lettertype

Absolute-Size
xx-small, x-small, small, xx-large, x-large, large
Lettergrootte met trefwoorden van absolute grootte, zal groter of kleiner zijn in verhouding tot de lettergrootte van het bovenliggende element.

Relatieve grootte
kleiner, groter

Lengte-Size
Lettergrootte gedefinieerd in lengte zal altijd een positieve waarde zijn, gebruikte lettertype-relatieve eenheden zoals em en px

Percentage-Size
De lettergrootte met percentage is altijd positief en relatief ten opzichte van de lettergrootte van het bovenliggende element

Definieer lettergrootte in hoofdtekst

Het definiëren van de lettergrootte in hoofdtekst is de beste manier om een ​​webpagina te ontwikkelen. Door een trefwoordlettergrootte in te stellen op het body-element, kunt u de relatieve lettergrootte overal op de pagina instellen, zodat u het lettertype op de hele pagina gemakkelijk naar boven of naar beneden kunt schalen.

Lettergrootte in pixels (Px)

Het is geen goede gewoonte om de lettergrootte in Pixel te definiëren. dit is alleen goed als u het perfecte pixelontwerp beheert.
 Pixel (px) is een statische waarde, px is een OS-onafhankelijke browser die de browsers opdraagt ​​de letters exact op het aantal pixels weer te geven dat u hebt opgegeven. De resultaten kunnen enigszins verschillen tussen browsers, omdat elke browser verschillende algoritmen en benaderingen gebruikt om een ​​soortgelijk effect te bereiken.
 Wanneer u de lettergrootte in pixels (px) definieert, kunt u worden geconfronteerd om wat extra CSS te schrijven om de pagina responsief te beheren. en je moet de css in elke breekpunten schrijven.

Lettergrootte in EM

Een andere manier om de lettergrootte te definiëren is met em-waarden. De grootte van een em-waarde is dynamisch. wanneer we de lettergrootte in em definiëren, is dit afhankelijk van de grootte van het bovenliggende element.
 als we de lettergrootte voor de ouder niet hebben ingesteld, neemt deze standaard de lettergrootte van de browser, dat is 16 px.
 De belangrijkste dingen om te weten met em is dat het altijd afhankelijk is van de lettergrootte van de ouder. dus als u het lettertype in geneste elementen definieert, moet u dit in gedachten houden om de lettergrootte in te stellen.

Pixel naar em conversie

Lettergrootte in REM

De remwaarden voor de lettergrootte zijn bedacht om het probleem van em met geneste elementen op te lossen.
 De remwaarde van de lettergrootte is relatief ten opzichte van het root html-element, niet het ouder-element, rest alles is hetzelfde als em.
 Hieronder is het verschil tussen rem en em als er geneste elementen zijn.

Verschil tussen geneste elementen met EM en REM

Genest Element Met EMGenest Element Met REM

Ref: https://developer.mozilla.org/en-US/docs/Web