CSS-eenhedenconverter

Ondersteunt conversie tussen CSS-eenheden zoals px, em, rem, %, vw, vh, met responsieve breekpuntinstellingen. Berekent automatisch contextafhankelijke waarden, geschikt voor responsieve lay-outontwikkeling, frontend-implementatie en stijlaanpassing.

Gebruiksinstructies

🚀 Snelstart

Voer waarde en eenheid in: bijvoorbeeld 16 + px of 1 + rem.
Kies eerst de Van-eenheid en voer een waarde in, kies daarna Naar; gebruik de wisselknop om te ruilen.
Op mobiel: gebruik de pijl rechtsboven in het paneel om tussen Van/Naar te schakelen.
Instellingen zijn beschikbaar voor rem/em/%/vw/vh; bij absolute eenheden zijn ze uitgeschakeld.
Resultaten bekijken: overige eenheden worden direct omgerekend en kunnen worden gekopieerd.
Breakpoints: schakel tussen mobiel/tablet/desktop-presets om conversies op verschillende schermen na te lopen.

📌 Veelvoorkomende scenario's

Gebruik: responsieve layouts, design‑naar‑dev overdracht, mapping tussen densiteiten/print, uniforme stijlafspraken.

🧭 Gebruiksadvies

Basisschrift instellen: 16px als root is gebruikelijk en maakt rem ↔ px in het hoofd eenvoudiger.
Voor tekst bij voorkeur rem gebruiken: ondersteunt globale schaal en toegankelijkheid; gebruik em voor lokale schaal in componenten.
Gebruik viewport-eenheden voor layout: combineer met breakpoints en min/max-constraints om extreme rek te vermijden.
Decimalen & afronding: houd een redelijke precisie om onleesbare waarden te vermijden.

🎛️ Conversieparameters & context

REM-basis (Root Font Size): bepaalt de conversieverhouding tussen rem en px. Op het web is 16px als root gebruikelijk (1rem ≈ 16px); als je ontwerp een andere basis gebruikt, kun je de waarde tijdelijk aanpassen om rem‑waarden snel te schatten.
EM-basis (Parent Font Size): bepaalt de conversie tussen em en % wanneer de referentie de lettergrootte is. Geschikt voor lokale component‑schaal: door de parent-lettergrootte te wijzigen schaalt de hele component mee.
%-referentie: kies 'lettergrootte / breedte / hoogte' als referentiemaat voor %. Voor layouts kies je meestal 'breedte/hoogte'; voor typografie (bijvoorbeeld line-height) 'lettergrootte'.
Breakpoint-presets: mobiel/tablet/desktop/groot scherm stellen viewportbreedte en -hoogte tegelijk in zodat je conversies bij verschillende schermbreedtes snel kunt nalopen. Alleen bedoeld voor schatting, niet als runtime media-query.
Viewport-afmetingen: gebruikt voor vw/vh/vmin/vmax en % wanneer de referentie breedte of hoogte is. Op echte apparaten beïnvloeden adresbalk, safe-area en scrollbar de effectieve waarde; kleine afwijkingen zijn normaal.
DPI (dots per inch): gebruikt voor conversie tussen fysieke eenheden pt/pc/in/cm/mm/q en px. Op het web is 96 DPI gebruikelijk; voor print- en high‑dpi-schermen stel je bij voorkeur de werkelijke DPI in, anders is de uitkomst slechts een benadering.
Aanbevelingen: 1) gebruik vaak 16px en 96 DPI als basis; 2) combineer bij %‑schattingen voor layouts met het wisselen van breakpoints; 3) deze parameters zijn bedoeld voor snelle ontwerp/communicatie‑conversies en vervangen niet de uiteindelijke berekening door de browser op echte DOM/CSS.

⚠️ Beperkingen & compatibiliteit

%-referentie is afhankelijk van de eigenschap (breedte/hoogte/line-height enz.).
ex/ch zijn gebaseerd op font-metriek; verschillende lettertypen en browsers kunnen deze waarden anders interpreteren.
Viewport-eenheden worden beïnvloed door scrollbar, adresbalk en safe-area; de werkelijke waarde kan licht afwijken van het ontwerp.
Conversie tussen fysieke eenheden en px hangt af van de DPI; voor print- en high‑dpi-apparaten is een praktijktest aan te raden.

🔒 Privacy & veiligheid

Alle verwerking gebeurt in uw browser; gegevens verlaten uw apparaat niet.

❓ Veelgestelde vragen

Wat is het verschil tussen rem en em?

rem is relatief ten opzichte van de root-lettergrootte en daardoor voorspelbaar en geschikt voor globale schaal; em is relatief ten opzichte van de parent-lettergrootte en handig voor relatieve schaal binnen componenten.

Hoe zet ik ontwerpwaarden uit px om naar rem?

Stel de root-lettergrootte (bijvoorbeeld 16px) in en voer px-waarden in; 16px → 1rem, 24px → 1.5rem, enzovoort. Gebruik rem voor tekst en spacing.

Wanneer gebruik ik vw/vh in plaats van %?

vw/vh zijn op viewport gebaseerd; % hangt van het element af. Voor full-width secties zijn vw/vh handig; voor relatieve breedte binnen een container past % beter.

Hoe relateer ik px en print-eenheden (pt/cm)?

Print-eenheden zijn DPI-afhankelijk. Stel DPI in (standaard 96) en gebruik de converter om px ↔ pt/cm te schatten; houd er rekening mee dat printerdrivers hiervan kunnen afwijken.