Px ↔ Rem Umrechner
Rechnet px in rem um und zurück — bei jeder Root-Schriftgröße, einzeln oder ein ganzes CSS-Block auf einmal. Nur die Quell-Einheit wird umgeschrieben, alles andere bleibt unberührt; eine Tabelle deckt die üblichen Schrift- und Abstandsgrößen ab.
Auch als Desktop-App für Windows verfügbar.
Über dieses Tool
Ein rem ist genau so groß, wie die Root-Schriftgröße es sagt. Ein frischer Browser stellt 16px ein, also ist 24px genau 1.5rem — aber viele Projekte setzen die Root-Größe auf 62.5 % (10px), um die Kopfrechnung zu vereinfachen, und manche Design-Systeme fahren 15px oder 18px. Deshalb ist die Root-Größe hier eine Eingabe, keine Annahme: 24px ist 1.5rem bei Root 16, 2.4rem bei Root 10 und 1.333rem bei Root 18.
Das Umschreiben ist bewusst eng gefasst: Im px→rem-Modus werden nur Werte angefasst, die in px geschrieben sind. Ist der eingefügte Block halb migriert — manche Deklarationen schon in rem — bleibt davon unberührt, und derselbe Block kann beliebig oft durchlaufen, ohne doppelt umgerechnet zu werden. Die Zählung über dem Ergebnis verrät, wie viele Werte umgeschrieben wurden — der schnellste Weg zu merken, dass die Eingabe nicht das war, wofür man sie hielt.
Runden gehört dazu. 14px bei Root 16 sind exakt 0.875rem, aber 15px sind 0.9375rem — vier Nachkommastellen, die niemand in ein Stylesheet schreiben will. Zwei oder drei Stellen gewählt, kommt ein Wert heraus, den man wirklich einfügen kann; die Tabelle unten listet die häufigsten Größen, für die man gar nichts tippen muss.
Häufige Fragen
- Welche Root-Schriftgröße soll ich eintragen?
- Diejenige, die dein Stylesheet tatsächlich auf html (oder :root) setzt. Browser stehen standardmäßig auf 16px — ändert dein CSS das nie, ist 16 richtig. Beim 62.5-%-Reset trägst du 10 ein. Die falsche Root-Größe ist der häufigste Grund für stumm falsche Ergebnisse: Alle Werte verschieben sich um denselben Faktor, nichts wirkt offensichtlich kaputt.
- Warum blieben manche Werte unverändert?
- Nur die Quell-Einheit wird umgeschrieben. Im px→rem-Modus laufen bereits in rem geschriebene Werte unverändert durch — mit Absicht, damit ein teilweise migriertes Stylesheet in einem Durchgang konvertiert wird, ohne dieselben Deklarationen zweimal zu rechnen. Für die andere Einheit die Richtung wechseln und erneut laufen lassen.
- Sollte ich alles in rem umrechnen?
- Meistens nicht. rem ist richtig für Typografie, Abstände und Layouts, die der Schriftgrößen-Einstellung des Nutzers folgen sollen. 1px-Rahmen, Schatten und Media-Query-Breakpoints bleiben oft bewusst in px. Das Tool schreibt um, was du auswählst — es entscheidet nicht, welche Eigenschaft in welche Einheit gehört.
- Werden CSS-Funktionen, Variablen und Kommentare behandelt?
- Jedes Vorkommen von Zahl-mit-Einheit im Text wird umgeschrieben — auch innerhalb von Funktionsaufrufen wie calc, in Custom-Property-Werten und Kommentaren. Meist ist das genau gewollt; wirf aber einen Blick auf die Zählung: Ist sie höher als erwartet, hat auch ein Kommentar mitgemacht.
- Wird irgendetwas von dem, was ich einfüge, versendet?
- Nein. Die Umrechnung ist reine Zeichenketten-Arithmetik in der Seite. Kein Server, keine Anfrage, keine Protokollierung — mit ausgeschaltetem Netz funktioniert das Tool genauso.