Zu entfernende Pixel
Konvertieren Sie Pixelwerte für moderne CSS-Layouts in rem. rem skaliert mit der Stammschriftgröße des Benutzers — besser für die Barrierefreiheit als feste px.
So konvertieren Sie px in rem
1. Gib den Pixelwert Ihres Designs ein (z. B. 32 px).
2. Legen Sie die Root-Schriftgröße fest (Standard 16 px, wenn unverändert).
3. Kopiere das rem-Ergebnis in dein Stylesheet.
4. Nutze rem für Schriftgrößen, Abstände und Komponentenskalierung; px für Haarlinienränder, falls erforderlich.
Px-zu-REM-Beispiele
Text- und Überschriftentyp
16 px = 1 rem (Standard). 24 px = 1,5 rem Überschrift. 14 px = 0,875 rem kleiner Text.
Benutzerdefiniertes Stammverzeichnis 10 px (Designsysteme)
Einige Teams legen HTML {font-size: 62,5 % } fest, also 1 rem = 10 px. Dann 32 px Design-Token = 3,2 rem.
Abstandsskala
8 px Raster → 0,5 rem bei 16 px Wurzel. 16 px padding = 1 rem; konsistenter Rhythmus in Tailwind-ähnlichen Tonleitern.
Wann soll px in rem konvertiert werden?
• Wenn du Figma-Spezifikationen in responsivem CSS mit zugänglichem Zoom implementieren.
• Wenn du sich an den in rem definierten Design-System-Tokens orientieren.
• Wenn Benutzer die Standardschriftgröße des Browsers überschreiben, werden Rem-Layouts angepasst.
rem vs em im Komponenten-CSS
em verbindet sich innerhalb verschachtelter Elemente mit unterschiedlichen Schriftgrößen — der Abstand in em wächst mit dem lokalen Text. rem bleibt an den Stamm gebunden, wodurch ein vorhersehbarer Abstand zwischen den Komponenten gewährleistet ist. Viele Teams verwenden rem für den Layoutmaßstab und em nur für Buchstabenabstände oder Mikroanpassungen, die an den lokalen Typ gebunden sind.
Häufige Fragen
Was ist Rem?
rem = "root em". 1 rem entspricht der Schriftgröße des HTML-Elements, nicht des übergeordneten Elements.
Warum nicht überall px verwenden?
Behoben: px ignoriert Schriftarteinstellungen des Benutzers. rem respektiert die Root-Skalierung für Barrierefreiheit (WCAG).
Standard-Root-Schriftgröße?
Die meisten Browser verwenden bei HTML standardmäßig 16 Pixel. Benutzer können dies in den Einstellungen ändern.
Formel?
rem = px ÷ rootFontSizePx. Beispiel: 20 px ÷ 16 = 1,25 rem.
Funktioniert rem für Ränder und Polsterung?
Ja — rem gilt für jede CSS-Längeneigenschaft, nicht nur für die Schriftgröße.