Zum Inhalt springen
CrateX.app Logo

CrateX.app

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

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.