CSS-Einheiten-Konverter
Konvertieren Sie CSS-Einheiten eins zu eins zwischen px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex und ch lokal mit den Einstellungen für Stammschriftgröße, übergeordnete Schriftgröße, Ansichtsfenster, DPI und Prozentreferenz.
Pixel
px
Zum Wechseln der Einheit tippen
Längeneinheiten
Typografie
Viewport
Prozentwerte
Relativ zur Root‑Schriftgröße
rem
Zum Wechseln der Einheit tippen
Längeneinheiten
Typografie
Viewport
Prozentwerte
CSS-Einheiten-KonverterWert eingeben und Von-Einheit wählenNach-Einheit wählen oder mit Tauschen umkehrenKontext für rem/em/%/vw/vh bei Bedarf setzenKonvertiertes Ergebnis kopierenViewport-Voreinstellungen für vw/vh-Prüfungen wechseln
Schnellstart
1
2
3
4
5
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
Verwenden Sie Ansichtsfenstereinheiten für Layoutschätzungen: Kombinieren Sie sie mit Haltepunkten und Min/Max-Einschränkungen, um Extreme zu vermeiden
Dezimalstellen & Rundung: sinnvolle Präzision wahren
Parameter & Kontext
REM-Basis (Root-Schriftgröße): bestimmt rem ↔ px. 16px ist üblich (1rem≈16px). Bei abweichender Design-Basis anpassen.
EM-Basis (Eltern-Schriftgröße): 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 (Punkte pro Zoll): für physikalische Einheiten pt/pc/in/cm/mm/q ↔ px. Die Standardschätzung von CSS beträgt 96 DPI; Bei benutzerdefinierten Werten handelt es sich um Druck-/Geräteschätzungen und nicht um die endgültige Layoutberechnung des Browsers.
Tipps: 1) 16 Pixel und 96 DPI sind gängige Grundlagen; 2) Überprüfen Sie die Layout-Prozentsätze, indem Sie Haltepunkte wechseln. 3) Diese Steuerelemente helfen bei der Schätzung der Entwurfszeit und ersetzen nicht die endgültige DOM/CSS-Berechnung des Browsers.
Einschränkungen und Kompatibilität
% Referenz hängt von der CSS-Eigenschaft, dem enthaltenden Block und dem Layoutmodus ab; Dieses Tool verwendet zur Schätzung die ausgewählte Referenz für Schriftgröße/Ansichtsfensterbreite/Ansichtsfensterhöhe, keine Live-Messung des übergeordneten Elements/Containers
ex/ch sind hier Näherungswerte, die auf der übergeordneten Schriftgröße basieren; Bei den Ergebnissen handelt es sich nicht um eine Überprüfung der Schriftmetriken, und sie variieren je nach Schriftart/Browser
Klassische vw/vh/vmin/vmax variieren mit Bildlaufleisten/Adressleisten/sicheren Bereichen; Dieses Tool berechnet keine DVH/SVH/LVH-, VI/VB-, Safe-Area- oder Container-Abfrageeinheiten
Physische Einheiten ↔ px verwenden die konfigurierte DPI-Schätzung; Für Druck-/HiDPI-Arbeiten ist weiterhin eine Geräte- oder Proofvalidierung erforderlich
Datenschutz & Sicherheit
Die Verarbeitung läuft im Browser. Eingabewert, From/To-Einheiten, zwischengespeicherte Werte je Einheit, Root-Schriftgröße, Parent-Schriftgröße, Viewport, DPI, Prozentreferenz und Breakpoint-Auswahl können in der aktuellen Browsersitzung oder im Browserspeicher verbleiben. Wenn du einen Arbeitsbereich speicherst oder WebDAV-Sync aktivierst, können diese Werte gemäß deinen Sync-Einstellungen gespeichert werden. Umrechnungsergebnisse werden aus aktuellem Wert, Einheiten und Kontext neu berechnet und nicht als separate Ergebnisse gespeichert. Diese Seite ruft keine URLs ab und sendet keine Werte zur serverseitigen Umrechnung. Lösche auf gemeinsam genutzten Geräten bei Bedarf Werte, Einstellungen und Websitedaten.
Häufige Fragen
rem bezieht sich auf die Root‑Schriftgröße (vorhersagbare globale Skalierung); em auf die Eltern‑Schriftgröße (für lokale Skalierung)
Für Layout/Text rem bevorzugen (A11y); px ist für pixelgenaue Icons/Rahmen geeignet
Mobile Adressleisten/sichere Bereiche/Bildlaufleisten wirken sich auf das Ansichtsfenster aus; mit Haltepunkten und Min/Max-Einschränkungen kombinieren
DPI setzen (z. B. 96/72/300). Hier nur Schätzung; für Produktion per ICC/Proof prüfen