CSS-Einheiten-Konverter
Zwischen px, rem, em und vw konvertieren mit konfigurierbarer Basisgröße und Viewport-Breite. Unverzichtbar für responsives CSS-Design. Kostenlos.
Äquivalente
Referenz
CSS-Einheiten
CSS bietet sowohl absolute als auch relative Einheiten. Absolute Einheiten wie px sind kontextunabhängig. Relative Einheiten wie rem, em und vw skalieren anhand einer Referenz — unverzichtbar für responsive, barrierefreie Layouts.
px, rem, em, vw
px (Pixel) — absolute Einheit. 1px entspricht einem geräteunabhängigen Pixel. Geeignet für Rahmen, Schatten und Elemente, die nicht mit der Schriftgröße skalieren sollen.
rem (root em) — relativ zur Schriftgröße des Wurzelelements (html). Standardmäßig 16px im Browser. Bevorzugt für Schriftgrößen und Abstände, da die Browsereinstellung des Nutzers respektiert wird.
em — relativ zur Schriftgröße des Elternelements. Kann sich in verschachtelten Elementen aufaddieren. Nützlich für Innenabstände und Außenabstände, die mit der Schriftgröße des Elements skalieren sollen.
vw (Viewport-Breite) — 1vw = 1% der Viewport-Breite. Ideal für fluide Typografie und layouts, die sich an die Bildschirmgröße anpassen.
Häufige px-zu-rem-Umrechnungen
Mit der Standard-Browser-Basis von 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Für Viewport-Einheiten bei einem 1440px-Design: 14.4px = 1vw, 72px = 5vw.
Warum rem für Barrierefreiheit bevorzugt wird
Die Verwendung von rem für Schriftgrößen respektiert die Schriftgrößen-Einstellung des Nutzers im Browser. Wenn ein Nutzer seinen Browser auf 20px statt der Standard-16px einstellt, skalieren rem-basierte Layouts proportional, während px-basierte Layouts fix bleiben. WCAG 1.4.4 (Textgröße ändern) verlangt, dass Text auf bis zu 200% vergrößert werden kann, ohne Verlust von Inhalt oder Funktionalität — rem-Einheiten erfüllen diese Anforderung von Natur aus.
Datenschutz
Alle Konvertierungen laufen 100% in deinem Browser. Es werden keine Daten an einen Server gesendet.