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 en veiligheid

Alle verwerking gebeurt lokaal in de browser. Je kunt de huidige inhoud op elk moment vervangen, wissen en opnieuw verwerken.

Veelgestelde vragen

4

Ga verder met deze gerelateerde tools voor de volgende stap.