Je droomt waarschijnlijk ‘s nachts niet over de grootte van CSS-elementen, maar als je een website of app bouwt, is dit onderwerp zeker het overdenken waard.
Terwijl sommige CSS-eenheden goed samenspelen met je responsieve ontwerp, kunnen anderen een rebelse kant vertonen. In staat zijn om de verschillende karakters te onderscheiden kan je in de toekomst veel hoofdpijn besparen.
Neem de combinatie van REM en EM. Welke zou je moeten gebruiken, en waarom?
Blijf bij ons voor de volgende paar alinea’s, en we zullen alles onthullen!
REM vs. EM in Een Notendop
Als je snel een antwoord wilt, hier is de korte versie:
- REM: Deze eenheid is gebaseerd op het root-element (meestal de
<html>tag.) Wat er verder ook op de pagina gebeurt, je dimensionering blijft consistent. - EM: Deze eenheid zoekt naar richtlijnen. Als het bovenliggende element verandert, zal je dimensionering volgen.
Als je het verschil wilt onthouden, onthoud dan dat de “R” in REM staat voor “Root”.
Nerd Opmerking: Waarom eindigen beide eenheden met “EM”? Dit is geen afkorting. Vroeger, toen alle tekst nog werd gedrukt, gebruikten typografen de breedte van een hoofdletter M als maatstaf voor tekstgrootte. Best slim, toch?
Dus, welke zou je moeten gebruiken?
Nou, dat hangt ervan af.
Als je wilt dat tekst zich aanpast aan de omgeving, is EM misschien de betere optie. Maar als je wilt dat de grootte over je hele website consistent blijft, moet je overschakelen naar REM.
Waarom?
- EM: Flexibeler, maar kan rommelig worden als je niet voorzichtig bent.
- REM: Consistente afmetingen, geweldig voor responsief ontwerp.
Responsief Ontwerp
Responsief ontwerp stelt een website in staat zich aan te passen aan de schermgrootte van het apparaat waarop het bekeken wordt. De website zal er daarom anders uitzien op verschillende apparaten.
Lees MeerNog steeds verward? Maak je geen zorgen, we gaan zo dadelijk dieper in op de materie.
Onthoud dit voor nu: REM is meestal de veiligere keuze voor de meeste websites.
REM en EM Begrijpen
Oké, laten we wat dieper ingaan.
Zowel REM als EM zijn relatieve eenheden. Dat betekent dat ze dezelfde grootte behouden relatief ten opzichte van een specifieke maatstaf.
Dit type grootte speelt een sleutelrol in responsief ontwerp.
Absolute groottes (bijv. px) blijven altijd hetzelfde, wat betekent dat tekst piepklein kan lijken op een desktop en enorm op een telefoon. In tegenstelling tot relatieve eenheden kunnen deze zich aanpassen aan verschillende apparaten en lay-outs.
In een digitale context worden REM en EM nog steeds voornamelijk gebruikt om tekst te meten. Je kunt deze eenheden echter ook gebruiken voor:
- Marges
- Opvulling
- Breedte en hoogte
- Regelhoogte
- Randeigenschappen
- Doosschaduw
- Positionering
- Mediaquery’s
Met andere woorden, REM en EM zijn nuttig wanneer je flexibele afmetingen in je ontwerp wilt.
Oké, dat dekt grotendeels de gemeenschappelijke basis tussen deze twee eenheden.
Laten we nu eens nader bekijken wat elk van hen uniek maakt.
REM Leren Kennen
REM staat voor “root em”. Wanneer je deze eenheid gebruikt, definieer je hoe groot iets moet zijn, relatief ten opzichte van de lettergrootte van je root-element (meestal je <html>-tag).
De meeste browsers gebruiken standaard 16px voor het root-element. Het is echter een goed idee om je standaard lettergrootte te definiëren met behulp van CSS.
Je kunt het zo doen:
html { font-size: 16px; /* Je basis lettergrootte */ }
Welke grootte je ook kiest, wordt 1rem. Dit is je nieuwe basislijn voor de hele pagina.
Elk figuur dat groter of kleiner is, zal de grootte van je doelelement veranderen, relatief aan je gekozen standaard.
Het is een beetje ingewikkeld om duidelijk uit te leggen, dus hier is een eenvoudig voorbeeld:
html { font-size: 16px; /* Je basis lettergrootte */ }
body { font-size: 1.2rem; /* 19.2px */ }
h1 { font-size: 2.4rem; /* 38.4px */ }
In dit scenario hebben we de lettergrootte van de <html> tag gedefinieerd als 16px. Dit is onze basislijn van 1rem.
We willen dat onze hoofdtekst iets groter is dan dat. Dus we stellen de <body> lettergrootte in op 1.2rem. Dat is 120% van de basislijn.
De hoofdkop op onze pagina moet veel groter zijn. Door de lettergrootte van <h1> in te stellen op 2.4rem, kunnen we de kop 240% zo groot maken als onze basislijn.
Je eindigt met zoiets als dit:
Waarom REM Gebruiken?
Wat zijn de voordelen van dit systeem?
In CSS bieden REM-eenheden enkele behoorlijk goede voordelen:
- Echte Consistentie: Alles schaalt proportioneel op basis van de rootgrootte, dus je ontwerp zal er altijd precies uitzien zoals je bedoeld hebt op elk apparaat.
- Responsiviteit: Proportionele schaling betekent dat je website of app zich kan aanpassen aan een breed scala aan apparaten.
- Eenvoudig Onderhoud: Wanneer al je stijlen gebaseerd zijn op dezelfde rootinstelling, is het eenvoudig om indien nodig grootschalige wijzigingen aan te brengen — Je hoeft niet elk afzonderlijk element te bezoeken en de lettergrootte handmatig te wijzigen. Dit bespaart je ook veel tijd.
- Geweldige Toegankelijkheid: Heel veel mensen wijzigen daadwerkelijk de standaard lettergrootte van hun browsers om tekst gemakkelijker te kunnen lezen. Door REM-maatvoering te gebruiken, kan je ontwerp zich aanpassen aan deze gebruikersvoorkeuren.
Natuurlijk is het niet allemaal rozengeur en maneschijn. Er zijn enkele nadelen:
- Derde-partij Wildcards: Als je site ingesloten inhoud bevat, merk je misschien dat tekst en andere elementen je REM-regels niet volgen.
- Lastige berekeningen: Uitzoeken hoe groot 1,2rem gaat zijn vereist wat rekenwerk.
- Grote macht, grotere verantwoordelijkheid: Wanneer je de tekstgrootte op je website zo gemakkelijk kunt wijzigen, moet je voorzichtig zijn met bewerkingen om designrampen over de hele site te voorkomen!
Als algemene regel geldt, REM moet je standaardkeuze zijn voor de meeste projecten. Het is makkelijker te hanteren dan EM-afmetingen, en de resultaten zijn voorspelbaarder.
Echter, er zijn momenten waarop EM nuttig is.
Kennismaking Met EM
EM is een lastige klant. Deze eenheid is gebaseerd op de lettergrootte van zijn bovenliggende element — net als een kameleon die zich aan zijn omgeving aanpast.
De verwarring begint als je gaat nesten. De meeste elementen erven hun standaard lettergrootte van hun ouder. Maar wat als de ouder ook EM-afmetingen gebruikt? Je kunt vrij gemakkelijk verstrikt raken in een wirwar van proportionaliteit.
Hier is een eenvoudig voorbeeld:
Stel je voor dat je een pagina hebt die een <div> bevat. In die box hebben we een <p> tag met wat tekst.
<html>
<div>
<p>Hier wat tekst.</p>
</div>
</html>
Bekijk nu de CSS voor dit HTML-fragment:
html { font-size: 16px; /* Standaard beginformaat */ }
div { font-size: 1.2em; /* 19.2px */ }
p { font-size: 1.2em; /* 23.04px */ }
We zijn begonnen met het definiëren van de standaard lettergrootte voor de hele pagina. Tot nu toe gaat alles goed.
Hierna zeiden we dat de <div> inhoud 1.2em moet zijn. Met andere woorden, onze tekst zou 120% van het standaardformaat van het bovenliggende element moeten zijn.
Om af te ronden, maken we ook de <p> lettergrootte 1.2em.
Wacht even! Er is een aanzienlijke toename in de grootte van de tekst, gemeten in pixels.
Waarom is dat zo?
Het <p> element heeft de lettergrootte van zijn ouder <div> (19.2px) bekeken en deze als standaard genomen. En omdat we om 1.2em vroegen, krijgen we tekst die 120% van de standaardgrootte is.
Deze soort fouten zijn gemakkelijk te maken als je werkt met de EM-eenheid.
EM Is Geweldig Voor Specifieke Afmetingen
Afgezien van de nadelen, kan de EM-eenheid echt nuttig zijn voor het dimensioneren van specifieke componenten.
Stel je wilt een knop maken die ongeveer altijd dezelfde hoeveelheid ruimte inneemt binnen zijn bovenliggende element.
Je HTML-code zou kunnen zijn:
<button class='button'>Klik op Mij</button>
Om je knop te stijlen, kun je EM-eenheden gebruiken voor font-size en padding.
De CSS ziet er ongeveer zo uit:
.button {
font-size: 1em; /* Grootte relatief aan de tekstgrootte van de ouder */
padding: 0.5em 1em; /* Padding schaalt mee met de lettergrootte */
}
De bovenstaande code geeft ons een eenvoudige knop met een beetje ruimte rond de tekst.
Als de lettergrootte van het bovenliggende element omhoog schaalt, zullen de lettergrootte en de opvulling van de knop volgen.
Op deze manier kun je dezelfde visuele balans tussen elementen binnen de parent behouden, zelfs als je van apparaat wisselt of inzoomt.
Waarom EM Gebruiken?
Gezien alle verwarring, waarom zou je EM überhaupt gebruiken?
Nou, het biedt wel enkele voordelen:
- Contextuele schaling: Elementen schalen op basis van de grootte van hun ouder, waardoor je meer genuanceerde controle krijgt over de afmetingen in je ontwerp.
- Componentgebaseerd ontwerp: EM-eenheden zijn geweldig voor het creëren van zelfstandige, herbruikbare componenten die dezelfde verhoudingen behouden.
- Nauwkeurige controle: Je kunt de groottes op elk niveau van de documentstructuur nauwkeurig afstemmen, zonder grootschalige wijzigingen te hoeven maken.
- Responsiviteit: Net als REM laten EM-eenheden je ontwerp toe om zich aan te passen aan verschillende schermformaten en gebruikersvoorkeuren via adapt to different screen sizes.
Zoals we hebben gezien, zijn er ook enkele nadelen:
- Versterkende effecten: Geneste elementen kunnen leiden tot onverwachte groottes, aangezien EM-waarden beginnen op te stapelen.
- Onderhoudsuitdagingen: Het wijzigen van de lettergrootte van een bovenliggend element beïnvloedt alle onderliggende elementen, wat kan leiden tot onbedoelde gevolgen — zoals enorme lichaamstekst en piepkleine titels.
- Complexiteit in grote projecten: Naarmate je project groeit, kan het bijhouden van alle relatieve groottes uitdagend worden.
Samenvattend kan EM ongelooflijk nuttig zijn voor op componenten gebaseerde ontwerpen en wanneer je precieze controle over elementrelaties nodig hebt. Het is flexibeler dan op pixels gebaseerde afmetingen, maar vereist zorgvuldiger planning dan REM.
REM of EM: Welke Moet Je Gebruiken?
Nou, dat was een hoop interessante informatie. Echter, als je iets bouwt, moet je gewoon weten welke CSS-eenheid je moet gebruiken.
Hier is ons oordeel:
- REM is de betere keuze voor de meeste projecten omdat het schaalbaarder is en meer controle biedt.
- EM kan een waardevol hulpmiddel zijn voor specifieke scenario’s die geneste stijlen bevatten.
Het is ook de moeite waard om te vermelden dat zowel REM als EM over het algemeen beter zijn voor modern ontwerp dan absolute eenheden zoals px.
Ze zijn ook praktischer voor het aanpassen van tekstgrootte in vergelijking met andere relatieve eenheden, zoals viewport-eenheden (vh/vw) en percentage (%).
Laten we REM vs. EM vanuit een vogelperspectief bekijken:
| Functie | REM | EM |
| Erfenis | Consistent met het root element | Relatief aan het bovenliggende element |
| Schaalbaarheid | Uitstekend | Beperkter |
| Complexiteit | Lager, vanwege consistentie | Hoger, vanwege contextuele afmetingen |
| Onderhoud | Makkelijk — veranderingen in root grootte verspreiden zich | Kan lastiger zijn met geneste elementen |
| Toegankelijkheid | Werkt goed met gebruikersvoorkeuren | Kan aanpassingen vereisen |
| Best voor | Wereldwijde afstand en lay-out | Component-specifieke schaling |
REM en EM: Veelgestelde Vragen Over Lettergrootte
De gids zou veel van de verwarring rond deze zeer vergelijkbare eenheden moeten hebben opgehelderd.
Maar als je nog vragen hebt, hier is wat je moet weten!
Moet ik REM of EM gebruiken voor responsief ontwerp?
REM is over het algemeen de betere keuze voor responsieve ontwerpen omdat het je in staat stelt consistente en schaalbare lay-outs te creëren die zich aanpassen aan verschillende schermformaten.
De enige uitzondering is wanneer je discrete eenheden wilt creëren, waarbij alle elementen dezelfde grootteverhouding behouden.
Hoe kan ik complexiteit vermijden bij het gebruik van EM-eenheden?
Om complexiteit met EM-eenheden te vermijden, probeer het nestelen van elementen te beperken. Gebruik REM voor globale afmetingen en EM voor kleine aanpassingen binnen specifieke componenten.
Is er een aanbevolen basislettergrootte voor REM?
Hoewel er geen strikte regel is, is een gangbare basislettergrootte voor REM 16px. Je kunt echter elke waarde kiezen die past bij je ontwerpvoorkeuren en toegankelijkheidseisen.
Duik Dieper In CSS
Wil je meer leren over digitaal ontwerp? We hebben veel geweldige leermiddelen voor CSS:
- Kennismaking Met De CSS Transform Eigenschap
- Tailwind versus Bootstrap: Welk CSS Framework Heb Je Nodig?
- Je Complete Tailwind CSS Primer
- 16 Populaire CSS Frameworks Die Je Tijd Zullen Besparen (Met Stijl)
- CSS Animaties: Verrijk Je Website Met Deze 17 Opties
Responsief Ontwerp Is Belangrijk
De CSS-eenheid is een component dat vaak over het hoofd wordt gezien, zoals we aan het begin van deze gids hebben vermeld.
Echter, als je een website of app wilt maken die er goed uitziet op elk apparaat en werkt voor elke gebruiker, is het belangrijk om na te denken over de details van het ontwerp.
Het debat tussen REM of EM doet er uiteindelijk niet echt toe — Het belangrijkste is dat je site toegankelijk, responsief en gebruiksvriendelijk is!
Onthoud gewoon dat een mooie interface niets betekent als je site of app niet laadt. Als het gaat om het bieden van de beste ervaring aan je gebruikers, overweeg dan om je hosting te upgraden bij DreamHost.
We bieden een uptime-garantie van 100% op al onze shared hosting plannen, met geoptimaliseerde servers en uitstekende beveiligingsfuncties. Meld je vandaag nog aan om zelf het verschil te zien!
Ultieme in Kracht, Beveiliging en Controle
Dedicated servers van DreamHost gebruiken de beste hardware en software die beschikbaar is om ervoor te zorgen dat je site altijd online is en altijd snel.
Zie Meer