Wat is CSS-eenhedenconverter?
CSS ondersteunt verschillende eenheden voor afmetingen — absolute eenheden zoals px en pt, en relatieve eenheden zoals rem, em, vw, vh en %. Relatieve eenheden zijn essentieel voor responsief, toegankelijk ontwerp (rem respecteert met name de lettergrootte-voorkeur van de browser van een gebruiker), maar ertussen omrekenen in je hoofd is echt lastig, omdat het resultaat afhangt van de context: de root-lettergrootte, de lettergrootte van het huidige element, of de viewportafmetingen.
Deze converter doet dat rekenwerk voor je: stel je basislettergrootte, viewportafmetingen en de waarde die je wilt omzetten in, en zie direct de equivalente waarde in elke andere eenheid — handig om de pixelmaten van een ontwerpmockup om te zetten naar responsieve rem/vw-waarden, of om te controleren wat een bestaande CSS-regel daadwerkelijk op het scherm weergeeft.
Wanneer gebruik je deze rekenmachine
- Wanneer u de kosten van de tool moet evalueren voordat u een project start
- Wanneer u resultaten vergelijkt met vergelijkbare tools
- Wanneer u leert hoe u de tool in verschillende scenario's gebruikt
- Wanneer u resultaten deelt met het team of klanten
- Wanneer u de nauwkeurigheid van de toolberekeningen verifieert
- Wanneer u een snelle en eenvoudige oplossing zoekt voor een specifiek probleem
Stappen:
- Voer de waarde in die je wilt omzetten en selecteer de beginwaardeeenheid.
- Stel je basislettergrootte in (standaard de browserstandaard van 16px).
- Voer voor vw/vh-omzettingen je doelviewportbreedte en -hoogte in.
- Bekijk direct de equivalente waarde in elke andere eenheid.
Formule
1rem = 1em = basislettergrootte (standaard 16px)
1pt = 96/72 px ≈ 1,333px
1vw = viewportbreedte / 100
1vh = viewporthoogte / 100
1% = referentiewaarde / 100
Gebruikscases
- Een op pixels gebaseerde Figma/Sketch-specificatie van een ontwerper omzetten naar rem-waarden voor toegankelijke CSS
- Controleren wat een op vw gebaseerde responsieve lettergrootte daadwerkelijk weergeeft bij een specifieke schermbreedte
- Verouderde op pt gebaseerde print- of e-mail-CSS omzetten naar webstandaard px of rem
- Controleren of de afstandsschaal van een designsysteem netjes op elkaar aansluit tussen eenheden
- Snel een CSS-waarde controleren tijdens een codereview zonder devtools te openen
Belangrijkste voordelen
- Zet alle 7 gangbare CSS-eenheden op één plek om
- Gebruikt je werkelijke basislettergrootte en viewport, geen vaste aanname
- Direct resultaten terwijl je typt — geen browser-devtools nodig
- Gratis, geen aanmelding, draait volledig in je browser
Pro-tips
- Geef de voorkeur aan rem boven em voor lettergroottes om onverwachte opstapeling in geneste componenten te voorkomen
- Gebruik dvh/svh in plaats van vh voor mobiele volledige-schermlayouts als je doelbrowsers dit ondersteunen
- Houd een consistente basislettergrootte aan in je hele designsysteem zodat rem-omzettingen voorspelbaar blijven
- Zet bij het vertalen van een pixelperfect ontwerp afstanden om naar rem, maar houd randdiktes en andere fijne details in px
Veelgemaakte fouten
- Aannemen dat 1rem altijd gelijk is aan 16px, zonder te controleren of de root-lettergrootte is gewijzigd
- vh gebruiken voor mobiele volledige-hoogtelayouts zonder rekening te houden met adresbalkgedrag
- Op em gebaseerde lettergroottes nesten en verrast zijn wanneer ze onverwacht opstapelen
- px en rem inconsistent mengen binnen hetzelfde component, waardoor toegankelijkheidsschaling kapotgaat
Sleutelbegrippen
- Root-lettergrootte: De lettergrootte ingesteld op het html-element, waar alle rem-eenheden relatief aan zijn
- Viewport: Het zichtbare gebied van een webpagina in het browservenster
- Absolute eenheid: Een eenheid zoals px of pt met een vaste werkelijke grootte, niet relatief aan enige context
- Relatieve eenheid: Een eenheid zoals rem, em, vw of % waarvan de grootte afhangt van een andere waarde
Gerelateerde concepten
- Kleurconverter: Converteer tussen HEX-, RGB- en HSL-kleurformaten
- Lengteconverter: Converteer tussen inches, centimeters, pixels en meer
- Eenhedenconverter: Converteer tussen diverse meeteenheden
- Beeldverhoudingscalculator: Bereken en converteer beeldverhoudingen
- Gegevensconverter: Converteer tussen bytes, KB, MB, GB en TB
Voorbeeld
Bij een basislettergrootte van 16px wordt 1,5rem omgezet naar 24px. Bij een viewportbreedte van 1440px wordt 5vw omgezet naar 72px.
Resultaten interpreteren
Deze tool toont gedetailleerde resultaten op basis van uw invoer. Bekijk elk onderdeel zorgvuldig om te begrijpen hoe u de cijfers moet interpreteren en welke beslissingen u daaruit kunt nemen.
Heeft u vragen over hoe de tool werkt of hoe u bepaalde resultaten moet interpreteren? Raadpleeg dan het FAQ-gedeelte hieronder of neem contact op met de klantenservice.