PX-zu-REM-Umrechner
Rechne CSS-Pixel anhand der Wurzel-Schriftgröße in rem und em um.
Ergebnis
Ergebnis (rem)
1,5000
Ergebnis (em)
1,5000
So funktioniert's
In CSS ist ein rem ein Vielfaches der Root-Schriftgröße. Beim Browser-Standard von 16 px entsprechen 24 px 1,5 rem und 16 px genau 1 rem. Dieser Umrechner teilt deinen Pixelwert durch die eingestellte Basis. Der Grund für rem ist Barrierefreiheit. Wer die Standard-Schriftgröße im Browser erhöht, erwartet, dass die gesamte Oberfläche mitwächst — mit rem passiert das automatisch, während ein in Pixeln festgenageltes Layout stur klein bleibt und unbenutzbar werden kann. Der Unterschied zu em ist der Bezugspunkt: em bezieht sich auf die Schriftgröße des *Elternelements*, sodass sich Verschachtelungen aufmultiplizieren (ein em in einem em in einem em schrumpft unvorhersehbar), während rem stets auf die Wurzel verweist und vorhersehbar bleibt. Übliche Praxis: rem für Abstände und Typografie, em für Eigenschaften, die der Größe ihres eigenen Elements folgen sollen, etwa das Padding eines Buttons.
Anzeige
Häufige Fragen
Warum rem statt px?
rem respektiert die Schriftgrößen-Einstellung des Nutzers, sodass Text und Abstände barrierefrei skalieren.
Was ist die Standardbasis?
Browser nutzen standardmäßig 16 px für die Wurzel-Schriftgröße, sofern nicht geändert.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich auf die Root-Schriftgröße und bleibt überall konstant; em bezieht sich auf das Elternelement, sodass verschachtelte Werte sich multiplizieren und unvorhersehbar driften können.
Anzeige