CSS Unit Converter: px, rem, em, and More

Wat zijn CSS-eenheden?

CSS-eenheden definiëren de grootte van elementen op een webpagina. Ze vallen in twee categorieën: absolute eenheden (px, cm, mm, in, pt, pc) met vaste fysieke afmetingen, en relatieve eenheden (rem, em, vw, vh, vmin, vmax, %) die schalen op basis van context zoals lettergrootte of viewport-afmetingen.

Modern responsive design leunt sterk op relatieve eenheden. De rem-eenheid schaalt met de root-lettergrootte (meestal 16px), em schaalt met de lettergrootte van het ouderelement, en viewport-eenheden (vw, vh) schalen met het browservenster, waardoor lay-outs vloeiend zijn op alle apparaten.

Hoe CSS-eenheidsconversie werkt

Converteren tussen CSS-eenheden vereist kennis van de basiscontext: de root-lettergrootte voor rem, de ouder-lettergrootte voor em, en de viewport-afmetingen voor vw/vh.

• px naar rem — deel de pixelwaarde door de root-lettergrootte (standaard 16px), dus 24px = 1.5rem wanneer de root 16px is
• rem naar em — rem en em zijn gelijk wanneer het element de root-lettergrootte erft; anders vermenigvuldig met de verhouding ouder/root lettergrootte
• px naar vw/vh — deel de pixelwaarde door de viewport-breedte (of -hoogte) en vermenigvuldig met 100, dus 192px = 10vw op een viewport van 1920px breed

Wanneer CSS-eenheidsconversie gebruiken

Converteren tussen CSS-eenheden is een dagelijkse taak in moderne front-end ontwikkeling.

• Responsive design — converteer vaste pixel-mockups naar rem- of vw-gebaseerde lay-outs die elegant schalen van mobiel tot desktop
• Toegankelijkheid — rem-eenheden zorgen ervoor dat tekst correct schaalt wanneer gebruikers de standaard lettergrootte van hun browser aanpassen
• Design system tokens — converteer ontwerperspecificaties (meestal in pixels) naar rem-gebaseerde tokens die consistente verhoudingen behouden

Veelgestelde vragen

Moet ik rem of em gebruiken voor lettergroottes?

Gebruik rem in de meeste gevallen. Rem-eenheden zijn relatief aan de root-lettergrootte, waardoor ze voorspelbaar zijn ongeacht de nestdiepte. Em-eenheden stapelen bij nesting (een 1.2em binnen een andere 1.2em wordt 1.44x). Reserveer em voor specifieke componenten waar schaling relatief aan de ouder opzettelijk is.

Wat is de standaard root-lettergrootte in browsers?

Alle grote browsers gebruiken standaard 16px als root-lettergrootte. Dit betekent dat 1rem = 16px tenzij overschreven door CSS. Gebruikers kunnen dit wijzigen in browserinstellingen voor toegankelijkheid, daarom is het gebruik van rem in plaats van px belangrijk voor toegankelijk design.

Wanneer moet ik viewport-eenheden gebruiken in plaats van rem?

Gebruik viewport-eenheden (vw, vh) voor elementen die met het browservenster moeten schalen in plaats van de lettergrootte. Veelvoorkomende voorbeelden zijn full-screen hero-secties (height: 100vh), vloeiende typografie (clamp met vw) en responsive padding op containers. Vermijd vw voor bodytekst — het negeert gebruikerslettervoorkeuren.