CSS Unit Converter

Wat is CSS-eenheidsconversie?

Een CSS-eenheidconverter is een hulpmiddel dat lengtewaarden omzet tussen verschillende CSS-meetsystemen. CSS definieert meer dan een dozijn lengte-eenheden, verdeeld in twee groepen: absolute eenheden zoals px, pt, cm en in die overeenkomen met vaste fysieke afmetingen, en relatieve eenheden zoals rem, em, vw, vh en % die afhankelijk zijn van de context, zoals de lettergrootte of de viewport-afmetingen.

Browsers zetten alle CSS-lengtes om naar pixels tijdens het weergeven. Wanneer u 1.5rem schrijft, vermenigvuldigt de browser 1,5 met de root-lettergrootte (meestal 16px) om 24px te krijgen. Wanneer u 50vw schrijft, neemt de browser de helft van de huidige viewport-breedte. Inzicht in deze relaties is noodzakelijk voor het bouwen van indelingen die schaalbaar zijn op apparaten en de gebruikersinstellingen respecteren, zoals aangepaste lettergroottes die in de browser zijn ingesteld.

De CSS Values and Units Module Level 4-specificatie (W3C) definieert de exacte conversieverhoudingen tussen alle absolute eenheden: 1in = 96px = 72pt = 2,54cm = 25,4mm. Relatieve eenheden hebben geen vaste verhouding omdat ze afhankelijk zijn van de runtime-context. Een gratis CSS-eenheidconverter laat u deze relaties direct berekenen op basis van uw specifieke root-lettergrootte en viewport-afmetingen, zonder enige code te schrijven.

Waarom een CSS-eenheidconverter gebruiken?

CSS-eenheden handmatig omzetten betekent verhoudingen onthouden, een rekenmachine erbij pakken en uw berekeningen dubbel controleren. Dit hulpmiddel voert de conversie uit in uw browser zonder enige omweg.

Toepassingen van de CSS-eenheidconverter

Referentie voor CSS-lengte-eenheden

CSS definieert 10 veelgebruikte lengte-eenheden. Absolute eenheden hebben een vaste conversie naar pixels. Relatieve eenheden zijn afhankelijk van de context: de root-lettergrootte voor rem, de bovenliggende lettergrootte voor em, en de browser-viewport voor vw en vh.

Absolute versus relatieve CSS-eenheden

De keuze tussen absolute en relatieve eenheden beïnvloedt hoe uw indeling reageert op verschillende schermen en gebruikersinstellingen. Elke groep heeft duidelijke afwegingen.

Veelgebruikte conversietabel px naar rem

Deze tabel gaat uit van een root-lettergrootte van 16px (de standaard in browsers). Als uw project een andere basis gebruikt, deelt u de pixelwaarde door uw basis om de rem-equivalent te krijgen.

Codevoorbeelden

Deze voorbeelden laten zien hoe u CSS-eenheden programmatisch kunt omzetten in JavaScript, Python, CSS custom properties en Sass.

// px to rem (given root font-size of 16px)
const pxToRem = (px, base = 16) => px / base
pxToRem(24)  // → 1.5

// rem to px
const remToPx = (rem, base = 16) => rem * base
remToPx(1.5) // → 24

// px to vw (given viewport width of 1440px)
const pxToVw = (px, viewport = 1440) => (px / viewport) * 100
pxToVw(360)  // → 25

// Dynamic calculation using getComputedStyle
const rootFontSize = parseFloat(
  getComputedStyle(document.documentElement).fontSize
) // → 16 on most browsers

# CSS unit converter functions

def px_to_rem(px: float, base: float = 16) -> float:
    return px / base

def rem_to_px(rem: float, base: float = 16) -> float:
    return rem * base

def px_to_vw(px: float, viewport: float = 1440) -> float:
    return (px / viewport) * 100

def px_to_pt(px: float) -> float:
    return px * 72 / 96

print(px_to_rem(24))     # → 1.5
print(rem_to_px(2.5))    # → 40.0
print(px_to_vw(720))     # → 50.0
print(px_to_pt(16))      # → 12.0

/* Define a base scale using rem */
:root {
  --base: 16px;       /* root font-size */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem;  /* 8px */
  --space-4: 1rem;    /* 16px */
  --space-8: 2rem;    /* 32px */
}

/* Fluid typography: scales between 1rem (16px) and 2.5rem (40px) */
h1 {
  font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Viewport-relative hero height */
.hero {
  height: calc(100vh - 4rem); /* full viewport minus 64px header */
}

/* Percentage-based grid */
.sidebar { width: 25%; }     /* 360px on 1440px screen */
.content { width: 75%; }     /* 1080px on 1440px screen */

// Reusable px-to-rem function in Sass
@use "sass:math";

$base-font-size: 16px !default;

@function rem($px) {
  @return math.div($px, $base-font-size) * 1rem;
}

// Usage
.card {
  padding: rem(24px);       // → 1.5rem
  margin-bottom: rem(32px); // → 2rem
  border-radius: rem(8px);  // → 0.5rem
  font-size: rem(14px);     // → 0.875rem
}

Veelgestelde vragen