Ga naar inhoud
CrateX.app-logo

CrateX.app

CSS-eenhedenconverter

CSS-eenhedenconverter

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.

Pixels
px
Tik op de pijl om eenheid te wisselen

Lengte-eenheden

Lettertype/typografie

Viewport-eenheden

Verhoudingen/procenten

Relatief t.o.v. root-lettergrootte
rem
Tik op de pijl om eenheid te wisselen

Lengte-eenheden

Lettertype/typografie

Viewport-eenheden

Verhoudingen/procenten
CSS-eenhedenconverter

Snelstart

1
Voer waarde en eenheid in: bijvoorbeeld 16 + px of 1 + rem.
2
Kies eerst de Van-eenheid en voer een waarde in, kies daarna Naar; gebruik de wisselknop om te ruilen.
3
Op mobiel: gebruik de pijl rechtsboven in het paneel om tussen Van/Naar te schakelen.
4
Instellingen zijn beschikbaar voor rem/em/%/vw/vh; bij absolute eenheden zijn ze uitgeschakeld.
5
Resultaten bekijken: overige eenheden worden direct omgerekend en kunnen worden gekopieerd.
6
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.

Aanvullend scenario

rem naar px, em converter en viewport units passen in dezelfde controleflow, zodat u het resultaat sneller kunt nalopen vóór kopiëren of exporteren.

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

4

Ga verder met deze gerelateerde tools voor de volgende stap.