So nutzt du: PX zu REM Umrechner
- Setze die Root-Schriftgröße (lass 16 stehen, außer deine Seite ändert die
html-Schriftgröße). - Gib einen Wert in Pixel, REM oder EM ein – die anderen Felder aktualisieren sich sofort.
- Nutze die Tabelle gängige Größen, um häufig verwendete rem-Werte mit einem Klick zu kopieren.
- Um ein ganzes Stylesheet umzurechnen, füge es unter Dein CSS ein, wähle die Optionen und kopiere das Ergebnis.
Was ist ein rem?
rem steht für „root em“: 1rem entspricht der Schriftgröße des Root-Elements <html>. Browser setzen diese standardmäßig auf 16px, also ist 1.5rem = 24px. Der entscheidende Unterschied zu Pixeln: rem berücksichtigt die Schriftgrößen-Einstellung des Nutzers im Browser. Wer seine Standardschrift auf 20px stellt, bekommt proportional größeren Text und Abstände, was ein fester px-Wert ignorieren würde.
Die Umrechnungsformel
rem = px ÷ Root-Schriftgröße und px = rem × Root-Schriftgröße. Bei der Standard-Root von 16px gilt: 12px = 0,75rem, 14px = 0,875rem, 18px = 1,125rem, 32px = 2rem. em funktioniert nach derselben Rechnung, teilt aber durch die Schriftgröße des Elements selbst (bei font-size durch die des übergeordneten Elements). Deshalb summieren sich verschachtelte em-Werte auf.
| Einheit | Bezogen auf | Ideal für |
|---|---|---|
px | Nichts – fest | Haarlinien-Rahmen, Schatten, kleine Details |
rem | Root-Schriftgröße (html) | Schriftgrößen, Abstände, Layoutbreiten |
em | Schriftgröße des aktuellen Elements | Innenabstand, der mit dem Button-Text skaliert, Icon-Größen, Media Queries |
Eine ganze CSS-Datei umrechnen
Der Snippet-Konverter findet jede Zahl mit nachgestelltem px und teilt sie durch deine Basis. Dabei überspringt er Kommentare, Strings in Anführungszeichen und url(…)-Pfade, sodass etwa bg-16px.png unverändert bleibt. 1px-Werte bleiben standardmäßig erhalten, damit Rahmen scharf bleiben. In Media Queries beziehen sich rem und em immer auf die Standard-Schriftgröße des Browsers (meist 16px), nicht auf deine html-Regel. Aktiviere @media-Abfragen unverändert lassen, wenn deine Basis davon abweicht.
Der 62,5-%-Trick – und warum du ihn meiden solltest
Mit html { font-size: 62.5%; } entspricht 1rem genau 10px, was die Rechnung erleichtert. Dann braucht aber jede Komponente explizite Schriftgrößen, und Drittanbieter-Widgets werden winzig dargestellt. Die 16px-Standardeinstellung beizubehalten und einen Konverter wie diesen zu nutzen, ist einfacher und sicherer.
rem in Webflow
Die Einheiten-Auswahl in Webflow unterstützt rem und em, und du kannst 1.5rem direkt in ein Feld eintippen. Beachte: Eine Schriftgröße, die im Webflow-Tag Body (All Pages) gesetzt ist, wirkt sich auf geerbten Text und em aus, nicht aber auf rem. rem bezieht sich immer auf das html-Element. Für Werte, die mit dem Bildschirm skalieren, erzeugst du sie am besten mit dem clamp()-Rechner.
Auch gesucht als: px in rem umrechnen, rem in px umrechnen, px zu em umrechnen, em in px umrechnen, rem rechner, pixel in rem umrechnen, schriftgröße umrechner, root font size.
Passende Tools zu: PX zu REM Umrechner
- Einheitenrechner — Rechne zwischen metrischen, imperialen und technischen Einheiten in zehn Kategorien um – mit einem Zwei-Wege-Umrechner und einer Tabelle, in der alle Einheiten auf einen Blick zu sehen sind.
- CSS Formatter — Verwandle ein minifiziertes Stylesheet in gut lesbares CSS mit einer Eigenschaft pro Zeile und sauber verschachtelten @media-Blöcken.
- CSS Minifier — Füge ein Stylesheet ein, um es sofort zu verkleinern.
- Box-Shadow-Generator — Stapel mehrere Schatten-Ebenen, passe Versatz, Weichzeichnung, Ausbreitung und Deckkraft auf einer Live-Karte an und kopiere das CSS für box-shadow oder text-shadow.
Häufige Fragen
Wie viele Pixel sind 1rem?
html { font-size: 62.5% }, werden aus 1rem 10px. Erhöht der Nutzer die Schriftgröße im Browser, wächst 1rem entsprechend mit.Was ist der Unterschied zwischen rem und em?
html und ist daher überall vorhersehbar. em bezieht sich auf die Schriftgröße des aktuellen Elements, verschachtelte em-Werte multiplizieren sich also. 1,2em innerhalb von 1,2em ergibt das 1,44-Fache der äußeren Größe.Sollte ich für Schriftgrößen rem oder px verwenden?
Sollten Media Queries px, em oder rem verwenden?
html-Schriftgrößenregel.Kann der Snippet-Konverter mein CSS kaputt machen?
px gefolgt werden, und überspringt Kommentare, Strings und url()-Werte. Prüfe das Ergebnis trotzdem einmal, besonders Werte wie 1px-Rahmen, die standardmäßig erhalten bleiben.