CSS-Einheiten-Umrechner (px / rem / em / pt)

So funktioniert es

Ein typischer Anwendungsfall im Frontend: Ein Figma-Design gibt alle Größen in Pixeln an (16px, 24px, 32px...), aber bewährte Barrierefreiheits-Praktiken empfehlen die Verwendung relativer Einheiten wie rem für CSS, damit der Text korrekt vergrößert wird, wenn ein Nutzer die Standard-Schriftgröße seines Browsers erhöht. Geben Sie den im Design abgelesenen Pixelwert ein, wählen Sie „px“ nach „rem“ mit der üblichen Basis-Schriftgröße der Website (standardmäßig 16px), und fügen Sie das Ergebnis direkt in Ihr CSS ein.

Warum wird die Basis-Schriftgröße benötigt?

rem und em sind relative Einheiten: 1rem entspricht der Schriftgröße des Wurzelelements (html), während 1em der Schriftgröße des aktuellen Elements entspricht. Ohne Kenntnis dieser Referenzgröße (in der Regel standardmäßig 16px in einem Browser, aber manchmal durch ein Stylesheet geändert) ist eine Umrechnung nach oder von px unmöglich. Deshalb fragt Sie dieses Tool nach der als Referenz zu verwendenden Basis-Schriftgröße.

Was ist der Unterschied zwischen rem und em?

rem („root em“) wird immer relativ zur Schriftgröße des Wurzelelements des Dokuments berechnet, was es überall auf einer Seite vorhersehbar macht. em wird relativ zur Schriftgröße des nächstgelegenen Elternelements berechnet, was sich kumulieren kann. Dieses Tool behandelt beide gleich, indem es die von Ihnen angegebene Basisgröße als gemeinsame Referenz verwendet.

Die Umrechnung läuft vollständig in Ihrem Browser über WebAssembly: Ihre Werte werden niemals an einen Server übertragen.