CSS-eenheidconvertergids: px, rem, em, vw, vh uitgelegd

Het kiezen van de juiste CSS-eenheid is een van de meest impactvolle beslissingen die je neemt bij het schrijven van stylesheets. De eenheid die je kiest, bepaalt hoe elementen schalen over verschillende schermgrootten, hoe ze reageren op gebruikersvoorkeuren zoals de lettergrootte-instelling van de browser, en hoe voorspelbaar je lay-out zich gedraagt. Toch gebruiken veel ontwikkelaars uit gewoonte pixels, waardoor ze de flexibiliteit en toegankelijkheidsvoordelen missen die relatieve eenheden bieden. Deze gids behandelt elke belangrijke CSS-eenheid, legt uit wanneer je welke moet gebruiken, laat zien hoe je tussen ze converteert en biedt praktische best practices voor modern responsief ontwerp.

CSS-eenheidcategorieën begrijpen

CSS-eenheden vallen in twee brede categorieën: absoluut en relatief. Absolute eenheden hebben een vaste fysieke grootte, terwijl relatieve eenheden hun berekende waarde afleiden van een ander referentiepunt. Dit onderscheid begrijpen is de basis voor het maken van weloverwogen eenheidkeuzes.

Absolute eenheden

Absolute eenheden zijn afmetingen met een vaste grootte. De meest gebruikte absolute eenheid in webontwikkeling is de pixel ( px ). Andere absolute eenheden zijn punten ( pt ), centimeter ( cm ), millimeter ( mm ) en inch ( in ). Deze eenheden zijn voornamelijk nuttig voor print-stylesheets of wanneer je een meting nodig hebt die niet mag veranderen, ongeacht de context. In schermgebaseerde CSS is px de enige absolute eenheid die je regelmatig zult gebruiken.

Relatieve eenheden

Relatieve eenheden berekenen hun uiteindelijke waarde op basis van een referentie. em is relatief ten opzichte van de lettergrootte van het huidige element, rem is relatief ten opzichte van de lettergrootte van het root-element, vw en vh zijn relatief ten opzichte van de viewport-afmetingen, en percentages zijn relatief ten opzichte van het bovenliggende element. Relatieve eenheden vormen de ruggengraat van responsief en toegankelijk ontwerp omdat ze je lay-out automatisch laten aanpassen aan verschillende contexten.

Pixels (px): De basislijn

De pixel is de meest intuïtieve CSS-eenheid omdat deze direct overeenkomt met schermpixels (met enige kanttekeningen rondom apparaat-pixelverhoudingen). Een px-waarde is altijd hetzelfde, ongeacht de context, wat het voorspelbaar en gemakkelijk te beredeneren maakt. Deze voorspelbaarheid heeft echter een prijs: op pixels gebaseerde formaatbepaling schaalt niet wanneer gebruikers de standaardlettergrootte van hun browser wijzigen, wat toegankelijkheidsproblemen veroorzaakt.

Wanneer px gebruiken

• Randbreedtes: een 1px-rand moet 1px blijven, ongeacht de instellingen voor lettergrootte.
• Boxschaduwen: Schaduwoffsets en vervagingsradii zijn doorgaans het beste in pixels voor consistente visuele effecten.
• Fijne details: elke waarde waarbij schaling het visuele ontwerp zou breken, zoals haardunne scheidingslijnen of precieze pictogrampositionering.
• Root-lettergrootte: Het instellen van html { font-size: 16px; } als basislijn is een veelvoorkomend patroon, hoewel je de browserstandaard van de gebruiker moet respecteren.

Wanneer px vermijden

Vermijd het gebruik van px voor lettergroottes, padding, marges en lay-outafmetingen die zich moeten aanpassen aan gebruikersvoorkeuren. Een gebruiker die de lettergrootte van de browser verhoogt naar 20px, verwacht dat alle tekst dienovereenkomstig schaalt, maar op px gebaseerde lettergroottes reageren niet op deze wijziging.

rem: Formaat ten opzichte van root

). In de meeste browsers is de standaard root-lettergrootte 16px, dus 1rem = 16px , 0.5rem = 8px en 2rem = 32px . Het belangrijkste voordeel van rem is dat het schaalt wanneer gebruikers de standaardlettergrootte van hun browser wijzigen, waardoor het de beste keuze is voor toegankelijkheid.

px naar rem converteren

De conversieformule is eenvoudig: deel de pixelwaarde door de root-lettergrootte.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

De 62.5%-truc

Veel ontwikkelaars vinden de wiskunde van delen door 16 omslachtig. Een populaire techniek is om de root-lettergrootte in te stellen op 62.5%, waardoor 1rem gelijk wordt aan 10px. Dit vereenvoudigt het hoofdrekenen: 14px wordt 1.4rem, 24px wordt 2.4rem, enzovoort.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: Formaat ten opzichte van context

De em-eenheid is relatief ten opzichte van de lettergrootte van het huidige element (of het bovenliggende element voor eigenschappen anders dan font-size ). Dit betekent dat 1em gelijk is aan de huidige lettergrootte, en em-waarden stapelen zich op wanneer elementen genest zijn. Dit cumulatieve gedrag kan zowel krachtig als verwarrend zijn.

Het cumulatieve probleem

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Elk genest element vermenigvuldigt de lettergrootte, wat leidt tot exponentiële groei. Daarom wordt rem over het algemeen de voorkeur gegeven voor lettergroottes. em blinkt echter uit in specifieke gebruiksscenario's waar je schaling op componentniveau wilt.

Wanneer em gebruiken

• Component-padding en marges: Wanneer je wilt dat afstand schaalt met de lettergrootte van de component, houdt em alles proportioneel. Als je de lettergrootte van een knop verhoogt, schaalt de padding automatisch.
• Media query-breakpoints: Sommige ontwikkelaars geven de voorkeur aan op em gebaseerde breakpoints omdat ze schalen met de lettergroottevoorkeuren van de gebruiker, zodat lay-outs zich aanpassen bij passende inhoudsbreedtes.
• Pictogramformaatbepaling binnen componenten: Pictogrammen in em schalen proportioneel met de omringende tekst.

Viewport-eenheden: vw, vh, vmin, vmax

Viewport-eenheden zijn relatief ten opzichte van de afmetingen van het browservenster. 1vw is gelijk aan 1% van de viewport-breedte en 1vh is gelijk aan 1% van de viewport-hoogte. vmin is de kleinste van vw en vh , terwijl vmax de grootste is. Deze eenheden zijn essentieel voor het maken van lay-outs die reageren op de beschikbare schermruimte.

Veelvoorkomende gebruiksscenario's voor viewport-eenheden

Het mobiele vh-probleem

Op mobiele browsers is 100vh niet altijd gelijk aan de zichtbare viewporthoogte. De adresbalk en navigatie-elementen van de browser nemen ruimte in beslag, maar 100vh omvat het gebied achter deze besturingselementen. Dit leidt ertoe dat inhoud onderaan wordt afgesneden in secties met volledige hoogte. Modern CSS biedt dvh (dynamic viewport height) als oplossing, wat rekening houdt met de dynamische werkbalk. Als alternatief kun je JavaScript gebruiken om een CSS-custom property in te stellen op basis van window.innerHeight .

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Nieuwe viewport-eenheden: svh, lvh, dvh

CSS introduceerde drie nieuwe viewporthoogte-eenheden om het mobiele viewportprobleem op te lossen:

• svh (small viewport height): De viewporthoogte wanneer alle browser-UI zichtbaar is (adresbalk uitgeklapt).
• lvh (large viewport height): De viewporthoogte wanneer browser-UI is geminimaliseerd (adresbalk ingeklapt).
• dvh (dynamic viewport height): De huidige viewporthoogte, veranderend naarmate de browser-UI uit- of inklapt.

Dezelfde small/large/dynamic-varianten bestaan voor breedte ( svw , lvw , dvw ) en de min/max-eenheden ( svmin , lvmin , dvmin , enz.). Gebruik dvh voor volledig-scherm lay-outs op mobiel, svh wanneer je moet garanderen dat inhoud past zonder te scrollen, en lvh wanneer je de maximaal mogelijke ruimte wilt vullen.

Vloeiende typografie met clamp()

De CSS-functie clamp() is een game-changer voor responsieve typografie. Het heeft drie waarden nodig: een minimum, een voorkeurswaarde en een maximum. De browser selecteert de voorkeurswaarde maar klemt deze tussen de minimum- en maximumgrenzen.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

Deze aanpak geeft je de voordelen van viewport-gebaseerde schaling zonder het risico dat tekst te klein wordt op mobiel of te groot op desktop. Het elimineert de behoefte aan media query-breakpoints voor lettergrootte, wat de CSS-complexiteit aanzienlijk vermindert.

Conversietabel ter referentie

Gebruik deze tabel als een snelle referentie voor veelvoorkomende conversies. Alle waarden gaan uit van een 16px root-lettergrootte en een 1920x1080 viewport.

Best practices voor CSS-eenheden

• Gebruik rem voor lettergroottes: Dit is de belangrijkste regel. Op rem gebaseerde lettergroottes respecteren gebruikersvoorkeuren en schalen consistent over je hele applicatie.
• Gebruik em voor componentafstand: Padding en marges binnen componenten profiteren van em omdat ze proportioneel schalen wanneer de lettergrootte van de component verandert.
• Gebruik px voor randen en fijne details: Waarden die niet mogen schalen met lettergrootte, zoals 1px-randen en schaduwoffsets, horen in pixels.
• Gebruik percentages voor lay-outbreedtes: Flexibele lay-outs gebruiken op percentages gebaseerde breedtes voor kolommen en containers, waardoor inhoud kan doorstromen over schermgrootten.
• Gebruik viewport-eenheden voor volledig-scherm elementen: Hero-secties, overlays en elk element dat de viewport moet vullen, profiteren van vh en vw .
• Gebruik clamp() voor vloeiende typografie: Vervang media query-breakpoints voor lettergroottes door clamp() om soepele schaling te creëren tussen minimum- en maximumwaarden.
• Stel root font-size nooit in op px: Gebruik altijd een percentage (zoals 62.5%) of laat het op de browserstandaard staan. Het in pixels instellen overschrijft de toegankelijkheidsvoorkeuren van de gebruiker.
• Wees consistent: Kies een eenheidsstrategie voor je project en houd je eraan. Willekeurig eenheden mengen maakt de codebase moeilijker te onderhouden en te debuggen.