Het is niet altijd even duidelijk welke eenheid je nu precies wanneer moet gebruiken — en eerlijk is eerlijk, dat hoeft ook niet meteen. Maar geen zorgen: hieronder leggen we je stap voor stap uit wat de verschillende eenheden betekenen, en geven we je praktische tips over wanneer je welke het best kunt gebruiken. Zo raak je snel wegwijs en leer je intuïtief de juiste keuzes maken voor elk ontwerp.
De verschillende eenheden
We hebben in grote lijnen 5 verschillende eenheden die we het meest gebruiken, namelijk: px, em, rem, vw en vh. Al deze eenheden hebben elk hun eigen voor- en nadelen.
- px (pixels)
Pixels zijn vaste meeteenheden. Ze geven een exacte waarde aan, wat handig is als je nauwkeurige controle wilt over je layout. Bijvoorbeeld:20pxbetekent altijd exact 20 pixels, ongeacht de schermgrootte.
📌 Voordeel: eenvoudig en voorspelbaar. Nadeel: niet schaalbaar op kleinere schermen.
- em (relatief aan het element zelf)
emis een relatieve eenheid die gebaseerd is op de lettergrootte van het element zelf. Als de tekstgrootte van een element bijvoorbeeld 16px is, dan is1emgelijk aan 16px.2emis dan 32px.
📌 Voordeel: handig voor schaalbare designs. Nadeel: kan lastig zijn als meerdere niveaus van nesting zijn.
- rem (root em)
remlijkt opem, maar is gebaseerd op de lettergrootte van het root-element (meestal de<html>-tag). Dit zorgt voor meer consistentie, omdat de waarde niet verandert afhankelijk van de hiërarchie van elementen.
📌 Voordeel: consistent en schaalbaar. Ideaal voor toegankelijke websites.
- vw (viewport width)
vwstaat voor viewport width. 1vw = 1% van de breedte van het zichtbare scherm (de viewport). Dit is handig om elementen automatisch mee te laten schalen met het schermformaat.
📌 Voorbeeld: 50vw = de helft van de schermbreedte.
- vh (viewport height)
vhstaat voor viewport height. 1vh = 1% van de hoogte van het scherm. Dit wordt vaak gebruikt voor elementen die een schermvullende hoogte moeten hebben (zoals headers of fullscreen secties).
📌 Voorbeeld: 100vh = volledige schermhoogte.
Wanneer gebruik je welke eenheid?
- Gebruik
pxals je precieze controle wilt over kleine elementen of margins.
- Gebruik
emofremals je een schaalbare, toegankelijke layout wilt (vooral voor tekst).
- Gebruik
vwenvhals je elementen wilt laten reageren op de schermgrootte (zoals fullscreen covers).