Uitgebreide handleiding wanneer em of rem moet worden gebruikt

U bent misschien wel eens geraakt met het gebruik van flexibele maateenheden, maar u begrijpt nog steeds niet volledig wanneer u het moet gebruiken rem en wanneer te gebruiken em. Deze tutorial helpt je erachter te komen!

Beide em en rem zijn flexibele, schaalbare eenheden die door de browser worden omgezet in pixelwaarden, afhankelijk van de instellingen van de tekengrootte in uw ontwerp. Als u een waarde van gebruikt 1em of 1rem, het zou in de browser kunnen vertalen als iets van 16px naar 160px of enige andere waarde.

CSS-opvulling ingesteld op 1em Berekent tot 16px CSS-opvulling ingesteld op 1em Berekent tot 160px

Anderzijds px waarden worden door de browser gebruikt zoals deze is, dus 1px zal altijd precies zo weergeven 1px.

Probeer de schuifregelaar uit dit CodePen-voorbeeld om te zien hoe de waarde van rem en em eenheden kunnen worden vertaald in verschillende pixelwaarden, terwijl ze expliciet worden ingesteld px eenheden blijven vast in grootte:

De grote vraag

Gebruik makend van em en rem units geeft ons flexibiliteit in onze ontwerpen en de mogelijkheid om elementen op en neer te schalen, in plaats van vast te zitten met vaste maten. We kunnen deze flexibiliteit gebruiken om onze ontwerpen tijdens de ontwikkeling gemakkelijker aan te passen, reageren sneller en stellen browsergebruikers in staat om de algehele schaal van sites te regelen voor maximale leesbaarheid.

Beide em en rem eenheden bieden deze flexibiliteit en werken op vergelijkbare manieren, dus de grote vraag is, wanneer moeten we gebruiken em waarden en wanneer moeten we gebruiken rem waarden?

Cruciaal verschil

Het verschil tussen em en rem eenheden bepaalt de manier waarop de browser de px waarde waar ze naar vertalen. Inzicht in dit verschil is de sleutel tot het bepalen wanneer elke eenheid moet worden gebruikt.

We zullen beginnen door erover na te gaan rem en em eenheden werken vanaf de grond om ervoor te zorgen dat u elk detail kent. Daarna gaan we verder waarom je zou ... moeten gebruiken em of rem units.

Ten slotte bekijken we de praktische toepassing van precies welke elementen van een standaardontwerp u elk type eenheid moet gebruiken.

Hoe rem Eenheden Vertalen naar Pixelwaarden

Tijdens gebruik rem eenheden, de pixelgrootte die ze vertalen, hangt af van de lettergrootte van het rootelement van de pagina, d.w.z. de html element. Die basislettergrootte wordt vermenigvuldigd met het nummer dat u gebruikt met uw rem eenheid.

Bijvoorbeeld met een lettertype van het hoofdelement van 16px, 10rem zou gelijkstellen 160px, d.w.z. 10 x 16 = 160.

CSS-opvulling ingesteld op 10rem Berekent tot 160px

Hoe em Eenheden Vertalen naar Pixelwaarden

Tijdens gebruik em eenheden, de pixelwaarde waarmee u eindigt, is een vermenigvuldiging van de tekengrootte op het element dat wordt opgemaakt.

Als een div bijvoorbeeld een lettergrootte heeft van 18px, 10em zou gelijkstellen 180px, d.w.z. 10 x 18 = 180.

CSS-opvulling ingesteld op 10em Berekent tot 180px (of dichtbij genoeg)

Belangrijk om te weten:

Het is een enigszins wijdverspreide misvatting dat em eenheden zijn relatief ten opzichte van de tekengrootte van het bovenliggende element. In feite zijn deze volgens de W3-specificatie relatief ten opzichte van de lettergrootte "van het element waarop ze worden gebruikt".

Lettergrootte van ouderbestanddelen kan effect em waarden, maar wanneer dat gebeurt, is het alleen vanwege overerving. Laten we eens kijken waarom, en kijken hoe dit in actie werkt.

Het effect van overerving op em eenheden

Werken met em eenheden kunnen lastig worden als het gaat om overerving, omdat elk element automatisch de lettertypegrootte van het bovenliggende element erft. Het effect van overerving kan alleen worden opgeheven door expliciet een lettergrootte in te stellen met een eenheid die niet wordt overgeërfd, zoals px of vw.

De lettergrootte van het element waarop em eenheden worden gebruikt bepaalt hun grootte. Maar dat element heeft mogelijk een lettertypegrootte geërfd van het bovenliggende element, dat een tekengrootte heeft overgenomen van het bovenliggende element, enzovoort. Als zodanig is het mogelijk voor iedereen em waarde die moet worden bereikt door de tekengrootte van een van de ouders.

Laten we een voorbeeld bekijken. Voel je vrij om dit uit te proberen in CodePen als je er doorheen stapt. Terwijl u verdergaat, gebruikt u de Chrome-ontwikkelaarstools of Firebug voor Firefox om de pixelwaarden te inspecteren em eenheden worden berekend.

Voorbeeld van em Erfenis

Als we een pagina hebben met een rootlettergrootte van 16px (meestal de standaardwaarde) en een onderliggende div erin met opvulling van 1.5em, die div zal de lettergrootte van erven 16px van het wortelelement. Vandaar zijn vulling zal vertalen naar 24px, d.w.z. 1,5 x 16 = 24.

Wat gebeurt er als we een andere div om de eerste wikkelen en die instellen lettertypegrootte naar 1.25em?

Onze wrapper div erft de rootlettergrootte van 16px en vermenigvuldigt dat met zijn eigen lettertypegrootte instelling van 1.25em. Dit stelt de div in op een lettergrootte van 20px, d.w.z. 1,25 x 16 = 20.

Nu neemt onze oorspronkelijke div niet direct meer over van het rootelement, maar erft een lettergrootte van 20px van zijn nieuwe parent div. De opvulwaarde van 1.5em komt nu overeen met 30px, d.w.z. 1,5 x 20 = 30.

Dit schaaleffect kan nog worden verergerd als we een toevoegen em gebaseerd lettertype op onze originele div, laten we zeggen 1.2em.

De div erft de 20px lettertypegrootte van zijn ouder, vermenigvuldigt dat met zijn eigen 1.2em instelling, waardoor het een nieuwe lettergrootte krijgt van 24px, d.w.z. 1,2 x 20 = 24.

De 1.5em padding op onze div verandert nu weer in grootte met de nieuwe lettergrootte, deze keer naar 36px, d.w.z. 1,5 x 24 = 36.

Tot slot, om dat verder te illustreren em eenheden zijn relatief ten opzichte van de lettergrootte van het element waarop ze worden gebruikt, (niet het bovenliggende element), laten we eens kijken wat er gebeurt met onze opvulling van 1.5em als we expliciet de div instellen om een ​​lettergrootte van te gebruiken 14px, een waarde die niet onderhevig is aan overerving.

Nu is onze opvulling gezakt naar 21px, d.w.z. 1.5 x 14 = 21. Het wordt niet beïnvloed door de lettergrootte van het bovenliggende element.

Met al dit potentieel voor complicaties, kunt u zien waarom het belangrijk is om te weten hoe te gebruiken em eenheden op een beheersbare manier.

Het effect van browserinstellingen op de lettergrootte van het HTML-element

Standaard hebben browsers meestal een lettergrootte van 16px, maar dit kan door de gebruiker van 9 naar 72 px worden gewijzigd.

Belangrijk om te weten:

De wortel html element neemt de lettergrootte over van de instellingen in de browser, tenzij deze wordt overschreven met een expliciet ingestelde vaste waarde.

Dus terwijl de lettergrootte op de html element is wat direct bepaalt rem waarden, die lettergrootte mogelijk het eerst afkomstig is van browserinstellingen.

De instellingen van de browserlettergrootte kunnen dus de waarde van elke effect beïnvloeden rem eenheid gebruikt in een ontwerp, evenals elke em eenheid via overerving.

Browserinstelling-effect wanneer er geen HTML-tekengrootte is ingesteld

Tenzij ze worden overschreven, de html element het zal erven ongeacht de standaardinstelling van de tekengrootte in de browser is. Laten we bijvoorbeeld een site nemen waar nee lettertypegrootte eigenschap is ingesteld op de html element.

Als een gebruiker zijn browser heeft met de standaardlettergrootte 16px, is de rootlettertypegrootte 16px. In Chrome-ontwikkelaarstools kun je zien wat een element heeft geërfd door te controleren Overgenomen eigenschappen weergeven onder de berekende tab.

In dit geval 10rem komt overeen met 160px, d.w.z. 10 x 16 = 160.

Als de gebruiker de lettertypegrootte van de browser tot 18px ongedaan maakt, wordt de rootlettergrootte 18px. Nu 10rem vertaald naar 180px, d.w.z. 10 x 18 = 180.

Browser instellen Effect met em Eenheid HTML-lettertypegrootte

Wanneer een em op basis van de lettergrootte wordt ingesteld op de html element, de pixelwaarde die het vertaalt, is een veelvoud van de instelling van de lettergrootte van de browser.

Bijvoorbeeld als de site is html element had een lettertypegrootte eigenschap ingesteld op 1.25em, de hoofdlettergrootte zou 1,25 keer de instelling van de lettergrootte van de browser zijn.

Als de lettergrootte van de browser is ingesteld op 16px, de root-lettergrootte zou eruit zien als 20px, d.w.z. 1,25 x 16 = 20.

In dit geval 10rem zou gelijk zijn 200px, d.w.z. 10 x 20 = 200.

Als de lettergrootte van de browser echter is ingesteld op 20px, de root-lettergrootte zou in plaats daarvan naar vertalen 25px, d.w.z. 1,25 x 20 = 25.

Nu 10rem zou gelijk zijn 250px, d.w.z. 10 x 25 = 250.

Samenvatten em vs. rem Verschil

Waar het allemaal op neer komt is dit:

• Vertaling van rem eenheden naar pixelwaarde wordt bepaald door de lettergrootte van de html element. Deze lettergrootte wordt beïnvloed door overname van de instelling van de lettergrootte van de browser, tenzij deze expliciet wordt overschreven door een eenheid die niet wordt overgeërfd.

• Vertaling van em eenheden tot pixelwaarden wordt bepaald door de lettergrootte van het element waarop ze worden gebruikt. Deze lettergrootte wordt beïnvloed door overerving van bovenliggende elementen, tenzij deze expliciet wordt overschreven door een eenheid die niet wordt overgeërfd.

Waarom gebruiken rem units:

De grootste kracht die rem Eenheidsaanbieding is niet alleen dat ze een consistente dimensionering geven, ongeacht het overerven van elementen. Het is eerder zo dat ze ons een manier geven om de instellingen van de gebruikerslettertypegrootte elk aspect van de lay-out van een site te laten beïnvloeden door te gebruiken rem eenheden waar we vroeger gebruik van maakten px units.

Om deze reden is het primaire doel van het gebruik rem eenheden moeten ervoor zorgen dat, ongeacht de standaardlettergrootte waar een gebruiker zijn browser op heeft ingesteld, de lay-out wordt aangepast aan de grootte van de tekst erin.

Een site kan in eerste instantie worden ontworpen met de focus op de standaardbrowser-lettertypegrootte van 16px.

Browser lettertype 16px

Maar door te gebruiken rem eenheden, als een gebruiker de lettergrootte verhoogt, blijft de integriteit van de lay-out behouden en wordt de tekst niet samengedrukt in een stijve ruimte bedoeld voor kleinere tekst.

Browser lettergrootte 34px

En als de gebruiker de lettergrootte verkleint, wordt de hele lay-out verkleind en blijven ze niet achter met een klein beetje tekst in een woestenij van witte ruimte.

Browser lettertype 9px

Gebruikers veranderen de instellingen voor lettertypegrootte om allerlei redenen, van gespannen gezichtsvermogen tot het kiezen van optimale instellingen voor apparaten die enorm verschillen in grootte en kijkafstand. Het aanpassen van deze instellingen zorgt voor veel betere gebruikerservaringen.

Belangrijk om te weten:

Sommige ontwerpers gebruiken rem op basis van lay-outs in combinatie met een vaste px eenheid lettertypegrootte instellen op de html element. Dit wordt meestal gedaan zodat een verandering van lettergrootte op de html element kan globaal het ontwerp naar boven of beneden schalen.

Ik raad dit ten zeerste af omdat het de lettergrootte overschrijdt html element erft van de browserinstellingen van de gebruiker. Dit voorkomt dus dat de instellingen enig effect hebben en verwijdert de mogelijkheid van de gebruiker om te optimaliseren voor de beste weergave.

Als u de lettergrootte wilt wijzigen op de html element, doe dit met een em of rem waarde als de root-lettergrootte zal dan nog steeds een veelvoud zijn van de browser lettertype-instelling van de gebruiker.

Hiermee kunt u uw ontwerp nog steeds naar boven of naar beneden schalen door uw html de lettergrootte van het element, maar u behoudt het effect van de browserinstellingen van de gebruiker.

Waarom gebruiken em eenheden

De sleutelwaarde em Eenheidsaanbieding is dat ze de maatwaarden kunnen bepalen door een andere lettergrootte dan die van de html element.

Om deze reden is het primaire doel van em eenheden moeten schaalbaarheid mogelijk maken in de context van een specifiek ontwerpelement.

U kunt bijvoorbeeld de vulling, marge en lijnhoogte rond een navigatiemenu-item om te gebruiken em waarden.

Menu met een lettergrootte van 0,9 rem

Op deze manier, als u de lettergrootte van het menu wijzigt, wordt de afstand tussen de menu-items verhoudingsgewijs geschaald, onafhankelijk van de rest van de lay-out.

Menu met 1.2rem lettergrootte

In het eerdere gedeelte over erfenis zag je hoe snel het bijhouden van em eenheden kunnen uit de hand lopen. Om deze reden, adviseer ik enkel en alleen gebruik makend van em eenheden als u een duidelijke behoefte aan hen vaststelt.

Praktische toepassing

Er is misschien een discussie tussen webontwerpers en ik weet zeker dat verschillende mensen verschillende voorkeursbenaderingen hebben, maar mijn aanbeveling is als volgt.

Gebruik em Eenheden voor:

Elke maat die zou moeten schaal, afhankelijk van de lettergrootte van een ander element dan de root.

Over het algemeen is de enige reden dat u dit moet gebruiken em eenheden is om een ​​element te schalen dat niet standaard de lettergrootte heeft.

Zoals in ons voorbeeld hierboven, kunnen ontwerpcomponenten zoals menu-items, knoppen en koppen hun eigen expliciet vermelde lettergroottes hebben. Als u deze lettergroottes wijzigt, wilt u dat het volledige onderdeel proportioneel wordt geschaald.

Gemeenschappelijke eigenschappen waarop deze richtlijn van toepassing is, zijn marge, vulling, breedte, hoogte en lijnhoogte instellingen, indien gebruikt op elementen met niet standaard lettertypegrootte.

Ik raad aan dat als je in dienst hebt em eenheden, moet de lettergrootte van het element waarop ze worden gebruikt worden ingesteld rem eenheden om de schaalbaarheid te behouden, maar overervingsverwarring te voorkomen.

Meestal niet gebruiken em Eenheden voor lettergrootte

Het is heel gewoon om te zien em eenheden die worden gebruikt voor lettertype-opmaak, met name in rubrieken, maar ik zou willen voorstellen dat ontwerpen beter hanteerbaar zijn als rem eenheden worden meestal gebruikt voor lettertypen.

De reden waarom rubrieken vaak worden gebruikt em eenheden is dat ze een betere keuze zijn dan px eenheden, in verhouding tot de normale tekstgrootte. Echter rem eenheden kunnen dit doel even goed bereiken. Als er een aanpassing van de lettertypegrootte op de html Er wordt een element gemaakt, de kopgroottes worden nog steeds geschaald.

Probeer de em lettergrootte op de html element in deze CodePen om het zelf te zien:

Vaker wel dan niet, willen we niet dat onze lettergroottes worden geschaald op basis van een ander element dan de root, met slechts enkele uitzonderingen.

Een voorbeeld waar we misschien willen em op basis van lettertypen kan een vervolgkeuzemenu zijn, waarbij de grootte van het tekstvak op het tweede niveau is afhankelijk van de lettergrootte van het eerste niveau. Een ander voorbeeld is een lettertypepictogram dat in een knop wordt gebruikt, waarbij de grootte van het pictogram gerelateerd moet zijn aan de tekstgrootte van de knop.

De meeste elementen in een webontwerp hebben echter de neiging om dit type vereiste niet te hebben, dus u wilt dit over het algemeen gebruiken rem eenheden voor lettergrootte, met em eenheden alleen waar specifiek nodig.

Gebruik rem eenheden voor:

Elke maat die niet nodig is em eenheden om de hierboven beschreven redenen, en dat zou moeten schaal, afhankelijk van de instellingen van de lettertype van de browser.

Dit is goed voor bijna alles in een standaardontwerp, inclusief de meeste hoogten, de meeste breedten, de meeste opvulling, de meeste marges, randbreedten, de meeste lettergroottes, schaduwen, eigenlijk bijna elk deel van uw lay-out.

In een notendop alles wat schaalbaar gemaakt kan worden rem eenheden zouden moeten zijn.

Tip

Bij het maken van lay-outs is het vaak gemakkelijker om in pixels te denken, maar om in te geven rem units.

Je kunt pixel naar hebben rem berekeningen worden automatisch uitgevoerd via een preprocessor zoals Stylus / Sass / Less of een postprocessor zoals PostCSS met de PXtoRem-plug-in.

U kunt ook PXtoEM gebruiken om uw conversies handmatig uit te voeren.

Altijd gebruiken rem Media Queries

Belangrijk, bij gebruik rem om een ​​uniform schaalbaar ontwerp te maken, moeten uw mediaquery's ook aanwezig zijn rem units. Dit zorgt ervoor dat ongeacht de browserdiktergrootte van een gebruiker, uw mediaquery's erop reageren en uw lay-out aanpassen.

Als een gebruiker bijvoorbeeld tekst erg hoog schaalt, moet uw lay-out mogelijk van twee kolommen naar één kolom snappen, net als op een kleiner afgeschermd mobiel apparaat.

Als uw onderbrekingspunten vaste pixelbreedten hebben, kan alleen een andere viewportgrootte ze activeren. Echter met rem op basis van breekpunten zullen ze ook reageren op verschillende lettertypen.

Niet gebruiken em of rem Voor:

Meerdere kolomlay-outbreedten

Kolombreedten in een lay-out moeten kenmerkend zijn % zodat ze vloeiend kunnen passen op onvoorspelbare viewports.

Echter, enkele kolommen moeten over het algemeen nog steeds worden opgenomen rem waarden via een Maximale wijdte omgeving.

Bijvoorbeeld:

css .container width: 100%; maximale breedte: 75rem;

Hierdoor blijft de kolom flexibel en schaalbaar, maar wordt voorkomen dat deze te breed wordt zodat de tekst daarin gemakkelijk leesbaar is.

Wanneer een element strikt ongeschaalbaar moet zijn

In een typisch webontwerp zullen er niet veel delen van uw lay-out zijn die niet kunnen worden ontworpen voor schaalbaarheid. Maar af en toe kom je elementen tegen die echt expliciete vaste waarden moeten gebruiken om schaalvergroting te voorkomen.

De voorwaarde voor het hanteren van vaste groottewaarden moet zijn dat als het betreffende element geschaald zou zijn, het zou breken. Dit komt echt niet vaak voor, dus voordat je in de verleiding komt om die uit te schakelen px eenheden, stel jezelf de vraag of het gebruik ervan een absolute noodzaak is.

Afsluiten

Laten we een korte samenvatting geven van wat we hebben behandeld:

• rem en em eenheden worden door de browser omgezet in pixelwaarden, op basis van lettergroottes in uw ontwerp.
• em eenheden zijn gebaseerd op de lettergrootte van het element waarop ze worden gebruikt.
• rem eenheden zijn gebaseerd op de lettergrootte van de html element.
• em eenheden kunnen worden beïnvloed door overerving van lettertypen van elk bovenliggend element

• rem eenheden kunnen worden beïnvloed door de overerving van lettertypen van de instellingen van het browserlettertype.

• Gebruik em eenheden voor de grootte die moeten worden geschaald afhankelijk van de tekengrootte van een ander element dan de hoofdmap.
• Gebruik rem eenheden voor dimensionering die niet nodig zijn em eenheden, en dat zou moeten worden geschaald afhankelijk van de instellingen van de lettertype van de browser.
• Gebruik rem eenheden, tenzij je zeker weet dat je nodig hebt em eenheden, inclusief lettergrootte.
• Gebruik rem eenheden op mediaquery's
• Niet gebruiken em of rem in breedtegraden met meerdere kolommen - gebruik % in plaats daarvan.
• Niet gebruiken em of rem als schalen onvermijdelijk zou leiden tot het breken van een lay-outelement.

Ik hoop dat je nu een robuust en compleet beeld hebt opgebouwd van hoe em en rem eenheden werken, en via die knowhow hoe ze het beste kunnen worden gebruikt in uw ontwerpen.

Ik raad u aan om de gebruiksrichtlijnen in deze tutorial zelf te proberen en te genieten van de volwaardige schaalbaarheid en responsiviteit van de lay-outs die ze u zullen toelaten te creëren.