Pixel ↔ REM
Zwischen Pixel und REM für CSS konvertieren
Wie man Pixel ↔ REM benutzt
Zwischen Pixel und REM für CSS konvertieren Kostenloses Online-Tool, ohne Anmeldung, ohne aufdringliche Werbung. Jetzt nutzen.
Warum konvertieren Webentwickler zwischen Pixel und REM?
Moderne CSS-Best-Practices bevorzugen relative Einheiten (REM, EM) gegenüber absoluten Pixeln für Schriftgrößen und Abstände. Das stellt sicher, dass Benutzer, die eine größere Schriftgröße in ihren Browsereinstellungen konfigurieren, den Text proportional skaliert sehen — eine grundlegende Anforderung an Barrierefreiheit, die in Deutschland durch die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) für öffentliche Stellen verpflichtend ist.
- Schriftgröße: Statt
font-size: 16pxverwenden Siefont-size: 1rem. Wenn die Basis-Schriftgröße des Browsers eines Benutzers 20px beträgt, skaliert alles proportional — gewährleistet eine gute Erfahrung für sehbehinderte Benutzer, die die Systemschriftgröße vergrößern. - Abstände und Padding: Margen und Padding in REM passen sich den Schriftpräferenzen des Benutzers an.
padding: 1.5remist barrierefreier alspadding: 24px. - Design-System-Implementierung: Design-Tools (Figma, Sketch) exportieren Werte in Pixeln. Konvertieren Sie in REM, bevor Sie CSS schreiben, damit das Design-System von Anfang an barrierefrei ist.
- Media Queries: REM-basierte Media Queries respektieren die Schriftgröße-Präferenz des Benutzers.
@media (min-width: 48rem)greift bei 768px für eine Basis von 16px, aber bei einem höheren Pixelwert für Benutzer mit größeren Schriften. - Komponentenbibliotheken: Das Erstellen wiederverwendbarer Komponenten in REM stellt sicher, dass sie in verschiedenen Basisschriftgrößen-Kontexten konsistent reagieren.
REM vs. EM: REM (Root EM) ist immer relativ zur Schriftgröße des Root-Elements (html) — konsistent und vorhersehbar im gesamten Dokument. EM ist relativ zur Schriftgröße des aktuellen Elements — kann sich in verschachtelten Elementen unerwartet anhäufen. REM ist für die meisten Anwendungsfälle vorzuziehen.
Frequently Asked Questions
Was ist die Standard-Schriftgröße eines Browsers?
Der Standard ist 16px in allen gängigen Browsern (Chrome, Firefox, Safari, Edge). Benutzer können dies in den Browsereinstellungen ändern — und das ist der eigentliche Zweck von REM. 1rem = standardmäßig 16px, kann aber 18px, 20px oder sogar 12px betragen, je nach Benutzerpräferenz.
Warum verwenden manche Entwickler html { font-size: 62.5% }?
62,5% von 16px = 10px zu setzen erleichtert die mentale Berechnung: 1,6rem = 16px, 2,4rem = 24px. Es ist ein gängiger Trick, ersetzt aber die bevorzugte Schriftgröße des Benutzers und widerspricht teilweise dem Barrierefreiheitszweck von REM. Ein besserer Ansatz ist die Verwendung von CSS-calc() oder einfaches Dividieren durch 16 der Werte.
Wann sollte ich PX statt REM verwenden?
Verwenden Sie PX für Ränder (1px-Ränder sollten immer 1px bleiben), Box-Shadows und Elemente, bei denen die genaue Pixelgröße unabhängig von Schriftpräferenzen wichtig ist. Verwenden Sie REM für Schriftgrößen, Padding, Margen und Abstände, die mit dem Text skalieren sollen.
Was ist der Unterschied zwischen REM, EM und PX?
PX ist absolut — immer dieselbe Größe unabhängig von Einstellungen. EM ist relativ zur Schriftgröße des Elternelements — kann sich in verschachtelten Elementen ansammeln. REM ist relativ zur Root-Schriftgröße — konsistent im gesamten Dokument. Für barrierefreies Design bevorzugen Sie REM gegenüber PX für Schriftgrößen und Abstände.
Wie konvertiere ich ein gesamtes Design von Pixel zu REM?
Teilen Sie jeden Pixelwert durch die Root-Schriftgröße (Standard: 16). So wird 24px ÷ 16 = 1,5rem. Sass-Funktionen (px-to-rem()) oder PostCSS-Plugins können diese Konvertierung in einer gesamten Codebasis automatisieren. Es gibt auch VS-Code-Erweiterungen, die automatisch konvertieren.
REM vs. EM vs. PX vs. VW/VH vs. Prozent
PX ist absolut — präzise, aber nicht skalierbar. REM skaliert mit der Root-Schriftgröße — am besten für Typografie und barrierefreie Abstände. EM skaliert mit der Schriftgröße des Elternelements — nützlich für Abstände auf Komponentenebene. VW/VH sind Viewport-Prozentsätze — nützlich für fließende Layouts. Prozent sind relativ zum Elternelement — wesentlich für responsive Breiten. Modernes CSS kombiniert: REM für Typografie und Abstände, VW/VH für Layout und Prozent für Spaltenbreiten.