Über dieses Tool
Im Design steht 24px, im CSS soll es rem sein: Dieser Rechner wandelt eine Länge in alle gängigen CSS-Einheiten um – px, rem, em, pt, %, vw und vh. Die Bezugsgrößen stellst du selbst ein: die Root-Schriftgröße für rem (Standard 16 px), die Schriftgröße des Elternelements für em und % sowie die Viewport-Größe für vw und vh.
Für ganze Stylesheets gibt es den zweiten Teil: Füge CSS ein, und alle px-Werte werden auf einmal zu rem. Kommentare, Zeichenketten und url(…) bleiben unverändert, sehr kleine Werte wie 1px-Rahmen kannst du ausnehmen. Fließende Größen mit clamp() berechnest du mit CSS-clamp()-Generator, Seitenverhältnisse mit Seitenverhältnis-Rechner.
So funktioniert’s
- Gib einen Wert ein und wähle seine Einheit, z. B. 24 und px.
- Lies das Ergebnis in allen Einheiten ab und kopiere den passenden Wert.
- Passe bei Bedarf die Basiswerte an, etwa eine Root-Schriftgröße von 10 px.
- Für ein ganzes Stylesheet füge das CSS unten ein und kopiere die umgerechnete Fassung.
Häufige Fragen
Wie rechne ich px in rem um?
Teile den px-Wert durch die Root-Schriftgröße. Bei der Browser-Voreinstellung von 16 px sind 24px also 24 ÷ 16 = 1,5rem. Umgekehrt multiplizierst du: 2rem × 16 = 32px.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich immer auf die Schriftgröße des html-Elements, ist also überall auf der Seite gleich groß. em bezieht sich auf die Schriftgröße des Elternelements und verändert sich, wenn Elemente verschachtelt sind. Für Abstände und Schriftgrößen ist rem meist vorhersehbarer.
Warum überhaupt rem statt px?
Stellen Nutzer im Browser eine größere Standardschrift ein, wachsen rem-Werte mit, px-Werte nicht. Seiten mit rem bleiben so für Menschen mit Sehschwäche besser lesbar.
Soll ich auch Media Queries in rem umrechnen?
Das ist möglich und sogar sinnvoll, aber beachte: In Media Queries bezieht sich rem (wie em) immer auf die Browser-Schriftgröße, nicht auf eine im CSS geänderte Root-Schriftgröße. Wenn du html { font-size: 62.5% } nutzt, rechne Media Queries mit 16 als Basis um.