CSS px ↔ rem Konverter
Zwischen CSS-Einheiten px und rem konvertieren.
px (Pixel)
Eine absolute Einheit, die ein Pixel auf dem Bildschirm darstellt. Hat eine feste Größe und ist für responsives Design eingeschränkt.
rem (Root EM)
Eine relative Einheit basierend auf der Schriftgröße des Root-Elements (html). Vorteilhaft für Barrierefreiheit und responsives Design.
Konvertierungs-Formel
Verwendungsempfehlungen
- • Schriftgröße: rem empfohlen
- • Abstände (margin, padding): rem empfohlen
- • Rahmen: px verwendbar
- • Media Queries: rem empfohlen
Vollständiger CSS-Einheiten-Leitfaden
Die Wahl der richtigen CSS-Einheiten in der Webentwicklung beeinflusst stark die Benutzererfahrung und Barrierefreiheit. Lernen Sie die Unterschiede zwischen px und rem und wie Sie sie in geeigneten Situationen verwenden.
📐 Eigenschaften
- • Absolute Einheit mit 1:1 Entsprechung zu Bildschirmpixeln
- • Konsistente Größe in allen Browsern
- • Präzise Layout-Kontrolle möglich
- • Nicht von Benutzereinstellungen beeinflusst
✅ Empfohlene Anwendungsfälle
- • Rahmendicke (1px, 2px)
- • Schatten-Versatz
- • Icon-Größen (16px, 24px)
- • Feine Abstandsanpassungen
⚠️ Vorsichtsmaßnahmen
- • Ignoriert Benutzer-Schriftgrößeneinstellungen
- • Kann Barrierefreiheitsprobleme verursachen
- • Begrenzt für responsives Design
📐 Eigenschaften
- • Basiert auf Root-Element (html) Schriftgröße
- • Spiegelt Benutzereinstellungen wider
- • Behält konsistente Proportionen bei
- • Barrierefreundlich
✅ Empfohlene Anwendungsfälle
- • Schriftgrößeneinstellungen
- • Abstände (margin, padding)
- • Container-Größen
- • Media Query Breakpoints
💡 Vorteile
- • Behält Proportionen beim Skalieren bei
- • Verbessert Barrierefreiheit
- • Einfache Wartung
🎯 Einheitsspezifische Verwendungsstrategie
Typografie
Verwenden Sie rem für Schriftgrößen und Zeilenabstände rem
Layout
Verwenden Sie rem für Abstände und Container rem
Details
Verwenden Sie px für Rahmen und Schatten px
📱 Responsive Design Tipps
Mobile-First-Ansatz
Basis-Schriftgröße auf 16px setzen und mit rem-Einheiten skalieren
html { font-size: 16px; }
h1 { font-size: 2rem; /* 32px */ }Media Query Verwendung
Konsistenz mit rem-basierten Breakpoints beibehalten
@media (min-width: 48rem) { /* 768px */ }
html { font-size: 18px; }
}♿ Barrierefreiheits-Überlegungen
✅ Empfohlene Praktiken
- • Schriftgrößen mit rem-Einheiten setzen
- • Minimale Schriftgröße von 16px beibehalten
- • Ausreichender Zeilenabstand (1.5 oder mehr)
- • Minimales Touch-Target von 44px
❌ Zu vermeidende Dinge
- • Verwendung fester px-Werte für Schriftgrößen
- • Kleiner Text unter 12px
- • Feste Container-Breiten
- • Zeilenabstand von 1.0 oder weniger
🔧 Browser-Unterstützung und Kompatibilität
px Einheit
Perfekte Unterstützung in allen Browsern. Verfügbar ab IE6+.
rem Einheit
Perfekte Unterstützung in IE9+ und modernen Browsern. Fallback für IE8 und darunter erforderlich.
Für IE8-Unterstützung: px-Wert zuerst deklarieren, dann rem-Wert als Fallback hinzufügen
font-size: 18px; /* IE8 fallback */
font-size: 1.125rem; /* Modern browsers */