REM-zu-PX-Umrechner

CSS-Rem-Einheiten skalieren anhand der Schriftgröße des Stammelements – normalerweise des HTML-Elements – und nicht wie bei em von jedem übergeordneten Element. Ein Rem entspricht der Pixelgröße, auf die der Stamm eingestellt ist. Browser verwenden standardmäßig 16 px root, also 1 rem = 16 px standardmäßig, es sei denn, Ihr Stylesheet ändert html { Schriftgröße }. rem respektiert Benutzerzoom- und Barrierefreiheitseinstellungen, die Standardtext vergrößern; px bleibt im Pixelraster absolut.

Designübergaben von Figma und Sketch kommentieren normalerweise px, während Produktionscodebasen häufig Abstände erstellen und rem eingeben, um die Konsistenz mit Design-Tokens zu gewährleisten. Dieser Konverter schließt die Lücke bei der von Ihrem Projekt gewählten Root-Größe. Viele Designsysteme behalten 16 px Root; Einige Teams legen den Stammwert auf 10 px fest, sodass mentale Mathematik 1,6 rem ≈ 16 px abbildet – immer mit dem Wert in Ihrem globalen CSS übereinstimmen.

Schalten Sie rem → px oder px → rem mit dem segmentierten Steuerelement um. Die Beschriftung des Wertfelds ändert sich und zeigt an, welche Einheit Sie eingeben. Das Feld „Root-Schriftgröße“ legt den Multiplikator fest – wenn Ihr HTML-Trick {font-size: 62,5 % } im Spiel ist, beträgt der effektive Root-Wert 10 px, nicht 16 px.

Funktioniertes Beispiel mit den Standardfeldern rem → px: 1,5 rem bei 16 px root. Multiplizieren Sie 1,5 × 16 = 24 px Überschriftenergebnis. Die Zusammenfassung lautet „1,5 rem @ 16 px root“ und die Formelzeile zeigt 1,5 × 16. Wechseln Sie zu px → rem mit eingegebenen 48 px und Sie erhalten 3 rem (48 ÷ 16).

Gängige Abstandsskaleneinträge: 0,25 rem = 4 px, 0,5 rem = 8 px, 1 rem = 16 px, 1,5 rem = 24 px, 2 rem = 32 px im Standardstamm. Typografieschritte verwenden häufig 0,875 rem (14 px) für kleine UI-Kopie und 1,125 rem (18 px) für großen Text, der den WCAG-Kontrastschwellenwerten für großen Text entspricht.

Zu den häufigsten Fehlern gehören die Konvertierung mit 16 px Root, während die Produktion 10 px Root verwendet (alles wird zu klein ausgeliefert), das Mischen von Rem-Padding mit em-Zeilenhöhe bei verschachtelten Komponenten und die Annahme der Browser-Standardeinstellung, nachdem der Benutzer die Textgröße für die Barrierefreiheit des Betriebssystems geändert hat – rem fließt mit dieser Einstellung, px jedoch nicht.

em-Einheiten liegen absichtlich außerhalb des Gültigkeitsbereichs – em-Verbindungen pro verschachtelter übergeordneter Schriftgröße, sodass ein einzelner Multiplikator nicht alle em-Ketten darstellen kann. Verwenden Sie dieses Tool nur für rem und px.

Einschränkungen: Einzelwertkonvertierung – kein calc() mit gemischten Einheiten, Viewport-VW oder Clamp()-Haltepunkten. Bei ungeraden Wurzeln können Subpixel-Ergebnisse angezeigt werden. Browser runden px zum Zeitpunkt des Renderns ab.