CSS-Einheiten-Rechner Wandeln Sie zwischen px, em, rem, %, vw, vh, vmin und vmax mit konfigurierbarer Ansichtsfläche und Schriftgröße um.

⚖️

CSS-Einheiten-Rechner

Wandeln Sie zwischen px, em, rem, %, vw, vh, vmin und vmax mit konfigurierbarer Ansichtsfläche und Schriftgröße um.

Kontext konfigurieren

Legen Sie die Dimensionen des Viewports, die Basis-Schriftgröße und die Größe des übergeordneten Elements fest.

Einen Wert eingeben

Geben Sie den CSS-Wert ein, den Sie umwandeln möchten.

Einheiten auswählen

Wählen Sie die Quell- und Zieleinheiten für CSS.

Loading tool...

What Is CSS-Einheiten-Rechner?

Ein CSS-Einheiten-Konverter übersetzt zwischen den verschiedenen Längeneinheiten, die in CSS verfügbar sind, und berücksichtigt kontextabhängige Einheiten. Feste Einheiten (px) stellen immer dieselbe visuelle Größe dar. Relative Einheiten hängen vom Kontext ab: em und rem beziehen sich auf Schriftgrößen, % bezieht sich auf das Elternelement und Viewport-Einheiten (vw, vh, vmin, vmax) beziehen sich auf die Browserfenster-Dimensionen. Mit diesem Konverter können Sie alle Kontextvariablen (Viewport-Größe, Basis-Schriftgröße, Eltern-Größe) für genaue Umrechnungen zwischen allen CSS-Einheiten konfigurieren und machen so responsive Design-Berechnungen schnell und präzise.

Why Use CSS-Einheiten-Rechner?

Konfigurierbare Viewport-Dimensionen für genaue vw/vh-Berechnungen.
Anpassbare Basis-Schriftgröße für em/rem-Umwandlungen.
Größe des übergeordneten Elements für Prozentsatzberechnungen.
Alle acht essentiellen CSS-Länge-Einheiten.
Perfekt für den Workflow von responsivem Design.

Common Use Cases

Responsives Design

Berechnen Sie vw-Werte für flüssige Typografie und Layouts.

Design-to-Code

Wandeln Sie pixelbasierte Designspezifikationen in responsiven CSS-Einheiten um.

Barrierefreiheit

Wandeln Sie feste Pixelgrößen in relative rem-Einheiten um.

Layout-Debugging

Verstehen Sie, wie unterschiedliche CSS-Einheiten auf tatsächliche Pixelgrößen übersetzt werden.

Technical Guide

CSS-Längeneinheiten fallen in zwei Kategorien:

Absolut:
• px: CSS-Pixel (1/96 Zoll in CSS, aber 1 Gerätepixel auf Standard-Displays)

Relativ:
• em: relativ zur Schriftgröße des Elements. 2em = 2× die aktuelle Schriftgröße
• rem: relativ zur Root-Schriftgröße (html-Element). Vorhersehbarer als em
• %: relativ zum entsprechenden Eigenschaftswert des Elternelements
• vw: 1% der Viewport-Breite. 100vw = vollständige Viewport-Breite
• vh: 1% der Viewport-Höhe. 100vh = vollständige Viewport-Höhe
• vmin: 1% der kleineren Viewport-Dimension
• vmax: 1% der größeren Viewport-Dimension

Gängige responsive Muster:
• Fließende Typografie: font-size: clamp(1rem, 2vw + 0.5rem, 2rem)
• Vollständig hohe Abschnitte: min-height: 100vh
• Responsives Abstandshalten: padding: 5vw

Tips & Best Practices

1
Verwenden Sie rem für Schriftgrößen (Barrierefreiheit). Verwenden Sie px für Ränder und Schatten (Präzision).
2
vmin ist großartig für responsiven quadratischen Container.
3
clamp() mit vw-Einheiten ermöglicht flüssige Typografie ohne Media-Abfragen.
4
100vh auf mobilen Geräten kann die Adressleiste einschließen - verwenden Sie stattdessen 100dvh (dynamische Viewport-Höhe).
5
Wenn Sie unsicher sind, beginnen Sie mit rem und px. Fügen Sie vw/vh nur hinzu, wenn Sie viewport-relatives Größen benötigen.

Related Tools

Längenkonverter

Konvertieren Sie sofort zwischen Millimetern, Zentimetern, Metern, Kilometern, Zoll, Fuß, Yards, Meilen und Seemeilen.

⚖️ Unit Converters

Leuchtdichte-Umrechner

Umwandeln zwischen Candela/m², Nits, Lamberts und Foot-Lamberts.

⚖️ Unit Converters

Typografie-Einheiten-Umrechner

Umwandeln zwischen px, pt, em, rem, cm, mm, Zoll und Picas mit konfigurierbarer Basis-Schriftgröße.

⚖️ Unit Converters

Drehmomentumrechner

Wandeln Sie zwischen Newtonmetern, Fuß-Pfund, Zoll-Pfund und Kilogramm-Kraftmetern um.

⚖️ Unit Converters

Frequently Asked Questions

Q Wie konvertiere ich px in vw?

Teilen Sie den px-Wert durch die Viewport-Breite und multiplizieren Sie mit 100. Beispiel: 192px auf einem 1920px-Viewport = 192/1920 × 100 = 10vw.

Q Was ist der Unterschied zwischen vw und %?

vw ist immer relativ zur Viewport-Breite. % ist relativ zum übergeordneten Element, das kleiner als die Viewport sein kann.

Q Wann sollte ich rem anstelle von em verwenden?

Verwenden Sie rem für konsistente Größen in Bezug auf den Root (keine überraschenden Kaskadeneffekte). Verwenden Sie em, wenn Sie eine Größe haben möchten, die mit der Schriftgröße des nächstgelegenen übergeordneten Elements skaliert.

Q Was ist vmin?

vmin entspricht 1% der kleineren Viewport-Dimension (Breite oder Höhe). Auf einem 1920×1080-Viewport entspricht 1vmin = 10,8px.

Q Warum haben Seiten mit 100vh auf mobilen Geräten Scrollbalken?

Mobile Browser schließen die URL-Leiste in die Viewport-Höhe ein. Verwenden Sie stattdessen 100dvh (dynamische Viewport-Höhe) oder JavaScript, um die tatsächliche sichtbare Höhe zu erhalten.

About This Tool

CSS-Einheiten-Rechner is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.