CSS eenhedenconversie is het proces van omzetten tussen verschillende lengtematen (px, em, rem, %, vw, vh, enz.) die worden gebruikt in webdesign.
Absolute en relatieve eenheden
CSS-eenheden zijn grofweg te verdelen in absolute en relatieve eenheden. Absolute eenheden (px, pt, cm, enz.) hebben vaste afmetingen, terwijl relatieve eenheden (em, rem, %, vw, vh, enz.) als verhoudingen tot een basiswaarde worden uitgedrukt.
px (Pixel)
De meest voorkomende eenheid, die één pixel op het scherm vertegenwoordigt. Makkelijk te hanteren door vaste grootte, maar kan toegankelijkheidsproblemen veroorzaken omdat het gebruikersinstellingen negeert.
em (Em)
Een relatieve eenheid gebaseerd op de lettergrootte van het ouder-element. 1em = font-size van de ouder. Wordt cumulatief berekend in geneste structuren, wat onverwachte groottes kan geven.
rem (Root Em)
Een relatieve eenheid gebaseerd op de lettergrootte van het root-element (html). 1rem = html font-size (meestal 16px). In tegenstelling tot em wordt het niet beïnvloed door nesting en is aanbevolen in moderne CSS.
% (Procent)
Stelt een verhouding tot de grootte van het ouder-element voor. Voor font-size is het gebaseerd op de ouder; voor width op de breedte van de ouder. De referentie verschilt per eigenschap.
vw/vh (Viewport-eenheden)
Eenheden gebaseerd op de viewportgrootte. 1vw = 1% van de viewport-breedte, 1vh = 1% van de viewport-hoogte. Maakt flexibele lay-outs mogelijk die reageren op schermgrootte.
pt/pc (Druk-eenheden)
Eenheden gebruikt in de drukindustrie. 1pt = 1/72 inch, 1pc = 12pt. Gebruikt in print-CSS en PDF-generatie; voor scherm wekt men meestal px of rem.
Fysieke eenheden (cm/mm/in)
Eenheden die werkelijke fysieke lengte vertegenwoordigen. 1in = 2.54cm = 25.4mm = 96px (CSS-definitie). Gebruikt wanneer consistentie met gedrukte materialen nodig is, maar schermfysieke grootte is niet gegarandeerd.
Voordelen van realtime conversie
Deze tool ondersteunt realtime conversie en werkt resultaten onmiddellijk bij wanneer basiswaarden veranderen. Maakt snelle verificatie van uiterlijk op verschillende schermformaten en lettergrootte-instellingen mogelijk.