u bent het misschien eens geworden met het gebruik van flexibele meeteenheden, maar u begrijpt nog steeds niet volledig wanneer u rem moet gebruiken en wanneer u emmoet gebruiken. Deze tutorial zal u helpen erachter te komen!

beide em en rem zijn flexibele, schaalbare eenheden die door de browser worden vertaald naar pixelwaarden, afhankelijk van de instellingen voor de lettergrootte in uw ontwerp. Als u een waarde van 1em of 1rem gebruikt, kan het in de browser worden vertaald als iets van 16px naar 160px of een andere waarde.

On the other hand px values are used by the browser zoals deze is, dus 1px zal altijd precies worden weergegeven als 1px.

Probeer de schuifregelaar op dit CodePen voorbeeld om te zien hoe de waarde van rem en em eenheden kan vertalen in verschillende pixel waarden, terwijl ze expliciet px eenheden verblijf een vast formaat:

De Grote Vraag

met Behulp van em en rem eenheden geeft ons de flexibiliteit in onze ontwerpen, en de mogelijkheid op te schalen elementen omhoog en omlaag, in plaats van vast te zitten met vaste maten. We kunnen deze flexibiliteit gebruiken om onze ontwerpen gemakkelijker aan te passen tijdens de ontwikkeling, meer responsief te maken en om browsergebruikers in staat te stellen de totale schaal van sites te controleren voor maximale leesbaarheid.

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

cruciaal verschil

het verschil tussenem enrem eenheden is hoe de browser depx waarde bepaalt waarin ze worden vertaald. Het begrijpen van dit verschil is de sleutel tot het bepalen wanneer elke eenheid te gebruiken.

We gaan beginnen met te bespreken hoe rem en em eenheden vanaf de basis werken om ervoor te zorgen dat u elk detail kent. Dan gaan we verder met waarom je em of rem eenheden moet gebruiken.

ten slotte zullen we kijken naar de praktische toepassing van precies welke elementen van een typisch ontwerp u elk type eenheid moet gebruiken.

hoe rem-eenheden naar pixelwaarden vertalen

bij gebruik van rem eenheden, hangt de pixelgrootte af van de lettergrootte van het root-element van de pagina, d.w.z. het html element. Die root lettergrootte wordt vermenigvuldigd met het getal dat je gebruikt met jerem eenheid.

bijvoorbeeld, met een root element lettergrootte van 16px, zou 10rem gelijk zijn aan 160px, d.w.z. 10 x 16 = 160.

Hoe em-Eenheden te Vertalen naar de Pixel Waarden

Bij gebruik van em eenheden, de pixel waarde die u uiteindelijk met een vermenigvuldiging van de grootte van het lettertype op het element gestyled.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

het is een wijdverbreide misvatting dat em eenheden relatief zijn ten opzichte van de lettergrootte van het bovenliggende element. In feite, volgens de W3 spec, ze zijn ten opzichte van de lettergrootte “van het element waarop ze worden gebruikt”.

ouder element lettergroottes kunnen effect hebben op em waarden, maar als dat gebeurt is het alleen vanwege overerving. Laten we eens kijken waarom, en zien hoe dit werkt in actie.

het Effect van overerving op em-eenheden

werken met em eenheden kunnen lastig worden als het gaat om overerving, omdat elk element automatisch de lettergrootte van zijn ouder erft. Het effect van overerving kan alleen worden overschreven door expliciet een lettergrootte in te stellen met een eenheid die niet onderworpen is aan overerving, zoals px of vw.

de lettergrootte van het element waarop em eenheden worden gebruikt bepaalt hun grootte. Maar dat element kan een lettergrootte geërfd hebben van zijn ouder, die een lettergrootte geërfd heeft van zijn ouder, enzovoort. Als zodanig is het mogelijk dat elke em waarde wordt beïnvloed door de lettergrootte van een van de ouders.

laten we een voorbeeld bekijken. Voel je vrij om dit uit te proberen in CodePen voor jezelf als we stap door het. Gebruik ondertussen Chrome Developer Tools of Firebug voor Firefox om de pixelwaarden te inspecteren waarin onze em eenheden zijn berekend.

voorbeeld van Em overerving

als we een pagina hebben met een root lettergrootte van 16px (meestal de standaard) en een dochter div erin met opvulling van 1.5em, zal die div de lettergrootte van 16px van het root element overnemen. Vandaar dat de opvulling zal vertalen naar 24px, d.w.z. 1,5 x 16 = 24.

Wat als we een andere div om de eerste wikkelen en zijn font-size instellen op 1.25em?

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

nu erft onze oorspronkelijke div niet langer direct van het root-element, in plaats daarvan erft het een lettergrootte van 20px van zijn nieuwe bovenliggende div. De opvulwaarde van 1.5em komt nu overeen met 30px, d.w.z. 1,5 x 20 = 30.

dit schaaleffect kan nog verder worden aangevuld als we een em gebaseerde lettergrootte toevoegen aan onze oorspronkelijke div, laten we zeggen 1.2em.

De div erft de20px lettergrootte van zijn ouder, vermenigvuldigt die dan met zijn eigen1.2em instelling, waardoor het een nieuwe lettergrootte krijgt van24px, d.w.z. 1,2 x 20 = 24.

De1.5em padding op onze div zal nu weer veranderen in grootte met de nieuwe lettergrootte, dit keer naar 36px, dat wil zeggen 1,5 x 24 = 36.

ten slotte, om verder te illustreren dat em eenheden relatief zijn aan 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 de div expliciet instellen op een lettergrootte van 14px, een waarde die niet onderhevig is aan overerving.

nu is onze opvulling gedaald naar 21px, d.w.z. 1,5 x 14 = 21. Het wordt niet beïnvloed door de lettergrootte van het bovenliggende element.

met al deze mogelijke complicaties, kunt u zien waarom het belangrijk is om te weten hoe em eenheden op een beheersbare manier te gebruiken.

het Effect van browserinstellingen op het HTML-Element lettergrootte

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

belangrijk om te weten:

het root html element erft zijn lettergrootte van de instellingen in de browser, tenzij overschreven met een expliciet ingestelde vaste waarde.

dus hoewel de lettergrootte op het html element direct bepaalt rem waarden, kan die lettergrootte eerst afkomstig zijn van browserinstellingen.

dus instellingen voor browser lettergrootte kunnen de waarde van elke rem eenheid die in een ontwerp wordt gebruikt, beïnvloeden, evenals elke em eenheid via overerving.

Browser Setting Effect als er geen HTML lettergrootte is ingesteld

tenzij deze is vervangen, zal het elementhtml erven wat de standaard lettergrootte in de browser ook is. Laten we bijvoorbeeld een site nemen waar geen font-size eigenschap is ingesteld op het html element.

als een gebruiker zijn browser heeft met de standaard lettergrootte van 16px, zal de root-lettergrootte 16px zijn. In Chrome Developer Tools kunt u zien wat een element heeft geërfd door te controleren toon overgenomen eigenschappen onder het tabblad berekend.

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

als de gebruiker zijn browser lettergrootte tot 18px verhoogt, wordt de root lettergrootte 18px. Nu 10rem vertaalt zich naar 180px, d.w.z. 10 x 18 = 180.

Browser Setting Effect with em Unit HTML Font Size

When an em based font size is set on the html element, de pixelwaarde waarnaar het wordt vertaald zal een veelvoud zijn van de instelling voor de lettergrootte van de browser.

bijvoorbeeld, als het html element van de site een font-size eigenschap had ingesteld op 1.25em, zou de hoofdlettergrootte 1,25 keer de instellingen voor de browserlettergrootte zijn.

als de browser lettergrootte was ingesteld op 16px, zou de root lettergrootte uitkomen als 20px, d.w.z. 1,25 x 16 = 20.

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

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

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

samenvattende em vs.rem verschil

waar het hierboven op neer komt is dit:

• vertaling van rem eenheden naar pixelwaarde wordt bepaald door de lettergrootte van het html element. Deze lettergrootte wordt beà nvloed door overerving vanuit de instelling voor de lettergrootte van de browser, tenzij expliciet overschreven met een eenheid die niet onderworpen is aan overerving.

• vertaling van em eenheden naar pixelwaarden wordt bepaald door de lettergrootte van het element waarop ze worden gebruikt. Deze lettergrootte wordt beïnvloed door overerving van bovenliggende elementen, tenzij expliciet overschreven met een eenheid die niet onderworpen is aan overerving.

waarom rem-eenheden gebruiken:

de grootste kracht die rem eenheden bieden, is niet alleen dat ze consistente dimensionering geven, ongeacht overerving van elementen. In plaats daarvan geven ze ons een manier om de instellingen van de lettergrootte van gebruikers elk aspect van de lay-out van een site te laten beïnvloeden door rem eenheden te gebruiken waar we px eenheden gebruikten.

om deze reden moet het primaire doel van het gebruik van rem eenheden zijn om ervoor te zorgen dat welke standaard lettergrootte een gebruiker zijn browser ook heeft ingesteld, de lay-out zal worden aangepast aan de grootte van de tekst erin.

een site kan worden ontworpen in eerste instantie gericht op de meest voorkomende standaard browser lettergrootte van 16px.

maar door gebruik te maken van rem eenheden, als een gebruiker zijn lettergrootte vergroot, kan de integriteit van de lay-out blijft behouden en de tekst wordt niet geplet in een stijve ruimte die bedoeld is voor kleinere tekst.

en als de gebruiker zijn lettergrootte verkleint, schaalt de gehele opmaak naar beneden en blijft er geen klein beetje tekst over in een woestenij met witruimte.

gebruikers veranderen de instellingen voor de lettergrootte om allerlei redenen, van gespannen gezichtsvermogen tot het kiezen van optimale instellingen voor apparaten die sterk kunnen verschillen in grootte en kijkafstand. Het accommoderen van deze instellingen zorgt voor veel betere gebruikerservaringen.

belangrijk om te weten:

sommige ontwerpers gebruiken rem gebaseerde lay-outs in combinatie met een vaste px eenheid font-size instelling op het html element. Dit wordt meestal gedaan zodat een verandering van de lettergrootte op het html element het ontwerp naar boven of naar beneden kan schalen.

Ik raad dit ten zeerste af omdat het de lettergrootte overschrijft.het element html erft van de browserinstellingen van de gebruiker. Vandaar dat dit voorkomt dat de Instellingen enig effect hebben, en verwijdert de mogelijkheid van de gebruiker om te optimaliseren voor de beste weergave.

Als u de lettergrootte van het html element wilt wijzigen, moet u dit doen met een em of rem omdat de hoofdlettergrootte dan nog steeds een veelvoud is van de instelling voor de lettergrootte van de browser van de gebruiker.

Hiermee kunt u uw ontwerp omhoog of omlaag schalen door de lettergrootte van uw html te wijzigen, maar u behoudt het effect van de instellingen van de browser.

waarom em-eenheden gebruiken

de sleutelwaarde em eenheden bieden is dat ze toestaan dat dimensioneringswaarden worden bepaald door een andere lettergrootte dan die van het html element.

daarom moet het primaire doel van em eenheden zijn om schaalbaarheid mogelijk te maken binnen de context van een specifiek ontwerpelement.

u kunt bijvoorbeeld de paddingmargin en line-height rondom een menu-item instellen om em waarden te gebruiken.

op deze manier zal de spatiëring rond de menu-items proportioneel schalen, onafhankelijk van de rest van de opmaak.

in het vorige gedeelte over overerving zag u hoe snel het bijhouden van em units eruit kunnen komen hand. Om deze reden raad ik aan om alleen em eenheden te gebruiken als je een duidelijke behoefte aan hen identificeert.

praktische toepassing

Er kan enige discussie zijn tussen webdesigners en ik ben er zeker van dat verschillende mensen verschillende voorkeuren hebben, maar mijn aanbeveling is als volgt.

gebruik em-eenheden voor:

elke grootte die moet worden geschaald afhankelijk van de lettergrootte van een ander element dan de root.

in het algemeen is de enige reden dat u em eenheden moet gebruiken om een element met een niet-standaard lettergrootte te schalen.

volgens ons voorbeeld hierboven, kunnen ontwerpcomponenten zoals menu-items, knoppen en koppen hun eigen expliciet aangegeven lettergroottes hebben. Als u deze lettergroottes wijzigt, wilt u dat de gehele component proportioneel wordt geschaald.

Common properties this guideline will apply to are marginpaddingwidthheight and line-height settings, when used on elements met niet-standaard lettertype grootte.

Ik adviseer dat wanneer u em eenheden gebruikt, de lettergrootte van het element waarop ze worden gebruikt moet worden ingesteld in rem eenheden om schaalbaarheid te behouden maar overerving verwarring te voorkomen.

gebruik meestal niet em eenheden voor lettergroottes

het is vrij gebruikelijk om em eenheden te zien die gebruikt worden voor de lettergrootte, vooral in koppen, maar ik stel voor dat ontwerpen beter beheersbaar zijn als rem eenheden meestal gebruikt worden voor de lettergrootte.

de reden dat headings vaak em eenheden gebruiken is dat ze een betere keuze zijn dan px eenheden, relatief ten opzichte van de normale tekstgrootte. rem eenheden kunnen dit doel even goed bereiken. Als een aanpassing van de lettergrootte op het html element wordt gemaakt, zullen de kopgroottes nog steeds schalen.

verander hetem lettergrootte op hethtml 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 een paar uitzonderingen.

een voorbeeld waar we em gebaseerd lettertype grootte zou een drop down menu kunnen zijn, waar we het tweede niveau menu-item Tekst grootte afhankelijk van de lettergrootte van het eerste niveau. Een ander voorbeeld kan zijn een lettertype pictogram gebruikt in een knop, waar de grootte van het pictogram moet betrekking hebben op de tekstgrootte van de knop.

De meeste elementen in een webdesign hebben echter niet dit type vereiste, dus u zult over het algemeen rem eenheden willen gebruiken voor lettergrootte, met em eenheden alleen wanneer dit specifiek nodig is.

Gebruik rem-eenheden voor:

elke grootte die em eenheden niet nodig heeft om de hierboven beschreven redenen, en die moet worden geschaald afhankelijk van browser lettergrootte instellingen.

Dit is verantwoordelijk voor bijna alles in een standaard ontwerp, waaronder de meeste hoogten, de meeste breedtes, de meeste opvulling, de meeste marges, randbreedtes, de meeste lettergroottes, schaduwen, in principe bijna elk deel van uw lay-out.

In een notendop zou alles dat schaalbaar gemaakt kan worden met rem eenheden, dat moeten zijn.

Tip

bij het maken van lay-outs is het vaak makkelijker om in pixels te denken, maar uitvoer inrem eenheden.

u kunt pixel naar rem berekeningen automatisch laten uitvoeren via een preprocessor zoals Stylus / Sass / Less, of een postprocessor zoals PostCSS met de pxtorem plugin.

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

Gebruik altijd rem Media Queries

belangrijk is dat als u rem eenheden gebruikt om een uniform schaalbaar ontwerp te maken, uw media queries ook in rem eenheden moeten zijn. Dit zal ervoor zorgen dat wat de browser lettergrootte van een gebruiker, uw media queries zal reageren op het en uw lay-out aan te passen.

bijvoorbeeld, als een gebruiker tekst zeer hoog schaalt, moet uw lay-out mogelijk van twee kolommen naar één kolom worden geklapt, net als op een kleiner gescreend mobiel apparaat.

als uw breekpunten een vaste pixelbreedte hebben, kan alleen een andere viewportgrootte ze activeren. Maar met rem gebaseerde breekpunten zullen ze ook reageren op verschillende lettergrootte.

gebruik geen em of rem voor:

Opmaakbreedtes voor meerdere kolommen

kolombreedtes in een opmaak moeten gewoonlijk % gebaseerd zijn, zodat ze vloeiend kunnen passen in onvoorspelbare weergaven.

echter enkele kolommen moeten over het algemeen rem waarden bevatten via een max-width instelling.

bijvoorbeeld:

.container { width: 100%; max-width: 75rem;}

Dit houdt de kolom flexibel en schaalbaar, maar voorkomt dat de tekst te breed wordt om gemakkelijk leesbaar te zijn.

wanneer een Element strikt Unscalable moet zijn

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

De voorwaarde voor het gebruik van vaste dimensioneringswaarden moet zijn dat als het element in kwestie zou worden geschaald het zou breken. Dit komt echt niet vaak voor, dus voordat je in de verleiding komt om die px eenheden eruit te halen, vraag jezelf af of het gebruik ervan een absolute noodzaak is.

afbreken

laten we een kort overzicht geven van wat we hebben behandeld:

• rem en em eenheden worden berekend in pixelwaarden door de browser, gebaseerd op 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 het html element.
• em eenheden kunnen worden beà nvloed door overerving van de lettergrootte van elk ouderelement

• rem eenheden kunnen worden beà nvloed door overerving van de lettergrootte vanuit de instellingen van de browser.

• gebruik em eenheden voor dimensionering die moet worden geschaald afhankelijk van de lettergrootte van een ander element dan de root.
• gebruik rem eenheden voor dimensionering die em eenheden niet nodig heeft, en die moet worden geschaald afhankelijk van de instellingen voor de lettergrootte van de browser.
• gebruik rem eenheden tenzij u zeker weet dat u em eenheden nodig hebt, ook voor lettergroottes.
• gebruik rem eenheden op media queries
• gebruik em of rem in opmaakbreedtes met meerdere kolommen – gebruik % in plaats daarvan.
• gebruik em of rem als schalen onvermijdelijk zou leiden tot een opmaakelement breken.

Ik hoop dat u nu een robuust en compleet beeld hebt opgebouwd van precies hoe em en rem eenheden werken, en daardoor weet u hoe u ze het beste kunt gebruiken in uw ontwerpen.

Ik raad u aan om de gebruiksrichtlijnen in deze handleiding zelf te proberen, en te genieten van de volledige schaalbaarheid en responsiviteit van de lay-outs die u kunt maken.