Pixel / REM / EM-Konverter (CSS-Einheiten)
Führung
Pixel / REM / EM Konverter
Konvertieren Sie sofort zwischen CSS-Einheiten: Pixel (px), Root Em (rem) und Em. Passen Sie die Basis-Schriftgröße an und beobachten Sie, wie sich alle Werte in Echtzeit aktualisieren. Perfekt für Frontend-Entwickler, die Designvorgaben in CSS übersetzen.
Anwendung
Geben Sie einen Wert in eines der drei Einheitenfelder ein – px, rem oder em – und die anderen beiden aktualisieren sich sofort. Passen Sie die Basis-Schriftgröße (Standard 16px) mit dem Schieberegler oder Eingabefeld an, um die Root-Schriftgröße Ihres Projekts anzupassen. Die Referenztabelle unten zeigt gängige Konvertierungen auf einen Blick.
Merkmale
- Bidirektionale Konvertierung – Bearbeiten Sie px, rem oder em und alle anderen aktualisieren sich sofort
- Anpassbare Basis-Schriftgröße – Schieberegler und Eingabe synchronisieren sich, Standard 16px
- Referenztabelle – Gängige Größen werden für Ihre Basis-Schriftgröße automatisch berechnet
- Echtzeit-Updates – Throttled Input für reibungslose Leistung
- Nur Client-seitig – Keine Daten werden an Server gesendet
Häufig gestellte Fragen
-
Was ist der Unterschied zwischen rem und em in CSS?
rem (root em) bezieht sich auf die Schriftgröße des Root-Elements (html), was es auf der gesamten Seite konsistent macht. em bezieht sich auf die Schriftgröße des übergeordneten Elements, was sich in verschachtelten Elementen verstärken kann. rem wird im Allgemeinen für Layoutkonsistenz bevorzugt.
-
Warum ist 1rem standardmäßig gleich 16px?
Browser setzen eine Standard-Root-Schriftgröße von 16px, sofern nicht anders angegeben. Also 1rem = 16px, 0,5rem = 8px, 1,5rem = 24px. Wenn Sie html { font-size: 62,5%; } setzen, dann ist 1rem = 10px, was die Berechnung erleichtert.
-
Wann sollte ich px anstelle von rem oder em verwenden?
Verwenden Sie px für Werte, die sich nicht mit den Schrifteinstellungen des Benutzers skalieren sollen, wie z. B. Rahmen, Schatten oder Media-Query-Breakpoints. Verwenden Sie rem für Schriftgrößen und Abstände, damit Ihr Layout die Barrierefreiheitseinstellungen des Benutzers berücksichtigt. Verwenden Sie em für Komponenten-relative Größen.
-
Wie wirkt sich der Browser-Zoom auf CSS-Einheiten aus?
Der Browser-Zoom skaliert alle CSS-Einheiten proportional, einschließlich px. Dies unterscheidet sich von der OS-weiten Textskalierung. Wenn ein Benutzer jedoch seine Standard-Schriftgröße im Browser ändert, passen sich rem- und em-Werte an, während px-Werte dies nicht tun – das macht rem/em besser für die Barrierefreiheit.
Erweiterungen installieren
IO-Tools zu Ihrem Lieblingsbrowser hinzufügen für sofortigen Zugriff und schnellere Suche
恵 Die Anzeigetafel ist eingetroffen!
Anzeigetafel ist eine unterhaltsame Möglichkeit, Ihre Spiele zu verfolgen. Alle Daten werden in Ihrem Browser gespeichert. Weitere Funktionen folgen in Kürze!
Unverzichtbare Tools
Alle Neuheiten
AlleAktualisieren: Unser neuestes Werkzeug wurde am März 21, 2026 hinzugefügt
Beteiligen Sie sich
Helfen Sie uns, weiterhin wertvolle kostenlose Tools bereitzustellen
