Anleitung
- Legen Sie die Root-Schriftgröße fest, wenn Ihre Website sie ändert (zum Beispiel setzt html { font-size: 62.5% } sie auf 10px).
- Geben Sie in eines der beiden Felder einen Wert ein, um px in rem oder rem in px umzurechnen. Wechseln Sie zu em, wenn sich die Größe nach einem übergeordneten Element richtet.
- Nutzen Sie die Tabelle für schnelle Abfragen oder fügen Sie einen CSS-Snippet ein, um alle px-Längen auf einmal umzurechnen und das Ergebnis zu kopieren.
So funktioniert es
rem = px ÷ Schriftgröße des Root-Elements. Bei der Standardschriftgröße von 16px entsprechen 24px dem Wert 1.5rem und 14px dem Wert 0.875rem. Für em gilt dieselbe Formel, allerdings wird die Schriftgröße des übergeordneten Elements verwendet. Deshalb multiplizieren sich verschachtelte em-Werte. rem vermeidet das, weil es sich immer auf das Root-Element bezieht.
Mit rem für Schriftgrößen und Abstände kann Text mitskalieren, wenn jemand die Standardschriftgröße in den Browsereinstellungen erhöht. Das ist hilfreich für Menschen mit Sehschwäche. Werte werden auf vier Dezimalstellen gerundet.
Der Snippet-Konverter ändert Zahlen, auf die px folgt. Kommentare, url(…) und Zeichenfolgen in Anführungszeichen lässt er unverändert. Auf Wunsch behält er 1px bei (dünne Rahmen sollten meist 1px bleiben), schreibt 0px als 0 und lässt standardmäßig Bedingungen in @media und @container unangetastet. Denn in Media Queries beziehen sich rem und em immer auf die anfängliche Schriftgröße des Browsers, unabhängig von der von Ihnen festgelegten Root-Schriftgröße. Die Bedeutung von calc() wird nicht weiter ausgewertet; die darin enthaltenen px-Werte werden einfach ersetzt. Das ist korrekt, da jede Länge einzeln umgerechnet wird.
Beispiele
Standardschriftgröße des Root-Elements
Bei einer Root-Schriftgröße von 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Der 62,5%-Trick
Wenn in Ihrem CSS html { font-size: 62.5% } festgelegt ist, beträgt die Root-Schriftgröße 10px. Damit gilt: 14px = 1.4rem und 24px = 2.4rem. Geben Sie unter „Root-Schriftgröße“ den Wert 10 ein.
Eine Komponente umrechnen
Mit aktivierter Option „1px-Werte beibehalten“ wird aus padding: 24px 16px; border: 1px solid #ddd; Folgendes: padding: 1.5rem 1rem; border: 1px solid #ddd;
Häufig gestellte Fragen
Sollte ich rem oder em verwenden?
Verwenden Sie rem für die meisten Schriftgrößen, Abstände und Layouts, da sich die Werte überall vorhersehbar verhalten. em eignet sich, wenn etwas proportional zur Schriftgröße der eigenen Komponente skaliert werden soll, etwa der Innenabstand eines Buttons.
Warum werden Media Queries nicht in rem umgerechnet?
Das ist möglich, aber in einer Media Query entspricht 1rem immer der Standardschriftgröße des Browsers (meist 16px), nicht der Schriftgröße Ihres html-Elements. Deshalb überspringt der Konverter diese Werte standardmäßig. Deaktivieren Sie die Option, wenn Sie ohnehin durch 16 teilen.
Ist rem barrierefreier als px?
Bei Schriftgrößen: ja. rem berücksichtigt die Einstellung der Standardschriftgröße des Benutzers, px-Schriftgrößen dagegen nicht. Der Browserzoom funktioniert mit beiden Einheiten.
Datenschutz
Umrechnungen und CSS-Snippets werden in Ihrem Browser verarbeitet und nirgendwohin gesendet.