Zum Inhalt springen
CrateX.app Logo

CrateX.app

CSS-Einheiten-Konverter

CSS-Einheiten-Konverter

CSS-Einheiten-Konverter: Unterstützt die Konvertierung zwischen CSS-Einheiten wie px, em, rem, %, vw, vh und bietet responsive Breakpoint-Einstellungen. Berechnet automatisch kontextabhängige Werte, geeignet für responsive Layout-Entwicklung, Frontend-Implementierung und Stilanpassung.

Pixel
px
Zum Wechseln der Einheit tippen

Length Units

Typography

Viewport

Percentage

Relativ zur Root‑Schriftgröße
rem
Zum Wechseln der Einheit tippen

Length Units

Typography

Viewport

Percentage
CSS-Einheiten-Konverter

Schnellstart

1
Wert und Einheit eingeben: z. B. 16 + px oder 1 + rem
2
Zuerst die Von‑Einheit wählen und den Wert eingeben, dann die Nach‑Einheit wählen; mit „Tauschen“ schnell wechseln.
3
Mobil: Pfeil oben rechts im Drawer zum Wechsel zwischen Von/Nach.
4
Einstellungen für rem/em/%/vw/vh verfügbar; bei absoluten Einheiten deaktiviert.
5
Ergebnisse anzeigen: übrige Einheiten werden sofort berechnet und sind kopierbar
6
Breakpoints: mobil/Tablet/Desktop‑Voreinstellungen zum Validieren umschalten

Häufige Anwendungsfälle

Einsatz

Responsive Layouts, Übergabe Design→Dev, Dichte/Print‑Bezug, einheitliche Konventionen

Ergänzendes Szenario

rem to px, em Konverter und viewport units lassen sich im selben Ablauf abdecken, damit Sie Ergebnisse vor dem Kopieren oder Export schneller prüfen können.

Nutzungstipps

Basis setzen: 16px‑Root ist gängig und erleichtert rem ↔ px Kopfrechnen
Text in rem: ermöglicht globale Skalierung & A11y; em für komponentenlokale Skalierung
Layout mit Viewport‑Einheiten: mit Breakpoints und clamp/min/max kombinieren
Dezimalstellen & Rundung: sinnvolle Präzision wahren

Parameter & Kontext

REM base (Root Font Size): bestimmt rem ↔ px. 16px ist üblich (1rem≈16px). Bei abweichender Design‑Basis anpassen.
EM base (Parent Font Size): bestimmt em und % (bei Referenz Schriftgröße). Gut für komponentenlokale Skalierung.
% Bezug: je nach Kontext Schriftgröße / Breite / Höhe wählen (Layout vs Typografie).
Breakpoint‑Voreinstellungen setzen auch die Viewport‑Größe für die Schätzung (keine Laufzeit‑Media‑Query).
Viewport‑Größe für vw/vh/vmin/vmax und % (Breite/Höhe). Geräte können durch Adressleisten/Safe Areas/Scrollbars variieren.
DPI für pt/pc/in/cm/mm/q ↔ px. Standard 96; für Druck/HiDPI Gerätekonfiguration verwenden.
Tipps: 1) 16px & 96 DPI als Basis; 2) Prozent‑Layout mit Breakpoints prüfen; 3) dient der Entwurfs‑Schätzung, nicht der finalen CSS‑Berechnung.

Einschränkungen und Kompatibilität

%‑Bezug hängt von der Eigenschaft ab (width/height/line‑height unterscheiden sich); Tool schätzt gängige Fälle
ex/ch basieren auf Font‑Metriken; Ergebnisse variieren je Font/Browser
Viewport‑Einheiten variieren mit Scrollbars/Adressleiste/Safe‑Areas
Physische Einheiten ↔ px variieren mit DPI; Print/HiDPI verifizieren

Datenschutz & Sicherheit

Alle Verarbeitungen laufen lokal im Browser. Aktuelle Inhalte lassen sich jederzeit ersetzen, leeren und erneut verarbeiten.

Häufige Fragen

4

Fahren Sie mit diesen verwandten Tools im nächsten Schritt fort.