CSS Unit Converter

Was ist CSS-Einheitenkonvertierung?

Ein CSS-Einheitenkonverter ist ein Werkzeug, das Längenwerte zwischen verschiedenen CSS-Maßsystemen umrechnet. CSS definiert über ein Dutzend Längeneinheiten, aufgeteilt in zwei Gruppen: absolute Einheiten wie px, pt, cm und in, die festen physischen Maßen entsprechen, und relative Einheiten wie rem, em, vw, vh und %, die vom Kontext abhängen — etwa vom Schriftgrad oder von den Viewport-Abmessungen.

Browser lösen alle CSS-Längen beim Rendern in Pixel auf. Wenn du 1.5rem schreibst, multipliziert der Browser 1,5 mit dem Root-Schriftgrad (standardmäßig 16px) und erhält 24px. Bei 50vw nimmt er die Hälfte der aktuellen Viewport-Breite. Das Verständnis dieser Zusammenhänge ist notwendig, um Layouts zu erstellen, die über Geräte hinweg skalieren und Nutzereinstellungen wie benutzerdefinierte Schriftgrößen im Browser berücksichtigen.

Die CSS Values and Units Module Level 4 Spezifikation (W3C) definiert die genauen Umrechnungsverhältnisse zwischen allen absoluten Einheiten: 1in = 96px = 72pt = 2.54cm = 25.4mm. Relative Einheiten haben kein festes Verhältnis, da sie vom Laufzeit-Kontext abhängen. Ein kostenloser CSS-Einheitenkonverter ermöglicht es dir, diese Zusammenhänge sofort für deinen spezifischen Root-Schriftgrad und deine Viewport-Abmessungen zu berechnen — ohne Code schreiben zu müssen.

Warum einen CSS-Einheitenkonverter verwenden?

CSS-Einheiten von Hand umzurechnen bedeutet, sich Verhältnisse zu merken, einen Taschenrechner zu öffnen und das Ergebnis nochmals zu überprüfen. Dieses Werkzeug erledigt die Konvertierung im Browser — ohne Aufwand.

Anwendungsfälle für den CSS Unit Converter

Referenz der CSS-Längeneinheiten

CSS definiert 10 häufig verwendete Längeneinheiten. Absolute Einheiten haben eine feste Umrechnung in Pixel. Relative Einheiten hängen vom Kontext ab: dem Root-Schriftgrad für rem, dem übergeordneten Schriftgrad für em und dem Browser-Viewport für vw und vh.

Absolute vs. relative CSS-Einheiten

Die Wahl zwischen absoluten und relativen Einheiten beeinflusst, wie dein Layout auf verschiedene Bildschirme und Nutzereinstellungen reagiert. Jede Gruppe hat eigene Vor- und Nachteile.

Häufige px-zu-rem-Umrechnungstabelle

Diese Tabelle setzt einen Root-Schriftgrad von 16px voraus (der Browser-Standard). Wenn dein Projekt eine andere Basis verwendet, teile den Pixelwert durch deine Basis, um den rem-Äquivalent zu erhalten.

Code-Beispiele

Diese Beispiele zeigen, wie CSS-Einheiten programmatisch in JavaScript, Python, CSS-Custom-Properties und Sass konvertiert werden.

// 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
}

Häufig gestellte Fragen