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. Der Standard-Browser-Root ist oft 16 Pixel groß, also 24 Pixel = 1,5 rem, es sei denn, das Projekt überschreibt html {font-size}.
Pixels
Root font size (px)
Result
1rem
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.
Wann du besser etwas anderes wählst?
• Wenn du sie relativ zu einer Schriftart mit verschachtelten Komponenten benötigen, verwenden Sie Pixel für sie.
• Wenn du Ansichtsfenstereinheiten (vw/vh) für Vollbild-Layouts benötigen.
• Wenn du 1:1-Gerätepixel auf Retina-Rändern abgleichen, bleiben 1-Pixel-Ränder oft in Pixeln.
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.
Design-Übergabe-Workflow
Designer exportieren px aus Figma; Entwickler dividieren durch vereinbarte Wurzel (Dokument in README). Wenn das Projekt den 62,5-%-Trick verwendet, bestätigen Sie dies vor der Konvertierung. Durch das Mischen von Annahmen wird die Benutzeroberfläche verdoppelt oder halbiert.
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.
Werden Daten hochgeladen?
Nein. Die Konvertierung erfolgt lokal.