PX zu REM Konverter
Um px in rem umzurechnen, teilen Sie den Pixelwert durch die Schriftgröße des Wurzelelements: rem = px / Basis. Bei der Browser-Standardbasis von 16px ergibt 24px / 16 = 1.5rem. Ändern Sie die Basis unten – 14px für Ant Design, 10px für den 62,5-%-Trick – und rem und em folgen ihr; der Punktwert richtet sich dagegen nach den Pixeln, denn 1px sind immer 0,75pt.
px, rem, em und pt umrechnen und CSS-Ersetzungen prüfen.
Positive Wurzel; Betrag ≤1 Milliarde; sechs gerundete Dezimalstellen. Vorschau auf 8–72px begrenzt. CSS ≤100.000 Zeichen. Nur unzitierte px-Werte in Deklarationen werden ersetzt; Kommentare, Zeichenketten, URLs und content bleiben erhalten. Ergebnis prüfen: begrenzte lexikalische Umwandlung, keine CSS-Validierung. CSS-Zahlen mit Exponent (etwa 1e+3px oder 1e-3px) bleiben als ganze Tokens unverändert.
Die Umrechnung erfolgt auf dieser Seite, ohne eingegebene Zahlen oder CSS an einen Konvertierungsdienst zu senden.
Das em-Feld nimmt an, dass das Element die Basisschriftgröße von oben erbt. In CSS bezieht sich em auf die Schriftgröße des Elements selbst – und auf die des Elternelements, wenn Sie damit font-size setzen.
Massenumrechnung: CSS oder eine Liste von px-Werten einfügen
Jeder px-Wert wird gegen die Basisschriftgröße oben in rem umgeschrieben.
Kopiert
Kopieren fehlgeschlagen. Ergebnis auswählen und manuell kopieren.
Wie rechne ich px in rem um?
Die Formel lautet rem = px / Basisschriftgröße, umgekehrt px = rem x Basisschriftgröße. Nur die Schriftgröße des html-Wurzelelements zählt, egal wie tief das Element verschachtelt ist – genau das macht die rem-Arithmetik vorhersagbar. Bei der Standardbasis 16px: 10px = 0.625rem, 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 20px = 1.25rem und 40px = 2.5rem.
Runden Sie das Ergebnis nicht. 15px sind bei 16px Basis exakt 0.9375rem; auf 0.94rem gerundet werden daraus 15.04px, und das zerstört die Ausrichtung in einem Raster. Browser rechnen mit Subpixel-Längen und rasten sie beim Zeichnen auf das Gerätepixelraster ein – kopieren Sie also den exakten Wert, den der Konverter liefert. Der Konverter zeigt bis zu sechs Nachkommastellen: exakt bei Basiswerten, die glatt aufgehen, etwa 16px und 10px, und auf ein Millionstel rem genau bei einer Basis wie 14px, die das nicht tut.
px-zu-rem-Tabelle für 16px, 14px und 10px Basis
Derselbe Pixelwert ergibt je nach Basis des Projekts drei verschiedene rem-Werte, deshalb listet diese Tabelle alle drei auf, dazu die Entsprechung in Punkt (CSS definiert 1px als 1/96 Zoll und 1pt als 1/72 Zoll, also 1px = 0.75pt). Die Spalten für 16px und 10px sind exakt. Bei 14px Basis geht die Division meist nicht auf; diese Werte sind auf vier Nachkommastellen gerundet und mit dem Näherungszeichen markiert. Der Konverter oben zeigt mehr Stellen.
| Pixel | rem (Basis 16 px) | rem (Basis 14 px) | rem (Basis 10 px) | Punkt |
|---|---|---|---|---|
| 1px | 0.0625rem | ≈0.0714rem | 0.1rem | 0.75pt |
| 2px | 0.125rem | ≈0.1429rem | 0.2rem | 1.5pt |
| 4px | 0.25rem | ≈0.2857rem | 0.4rem | 3pt |
| 8px | 0.5rem | ≈0.5714rem | 0.8rem | 6pt |
| 10px | 0.625rem | ≈0.7143rem | 1rem | 7.5pt |
| 12px | 0.75rem | ≈0.8571rem | 1.2rem | 9pt |
| 14px | 0.875rem | 1rem | 1.4rem | 10.5pt |
| 16px | 1rem | ≈1.1429rem | 1.6rem | 12pt |
| 18px | 1.125rem | ≈1.2857rem | 1.8rem | 13.5pt |
| 20px | 1.25rem | ≈1.4286rem | 2rem | 15pt |
| 24px | 1.5rem | ≈1.7143rem | 2.4rem | 18pt |
| 28px | 1.75rem | 2rem | 2.8rem | 21pt |
| 32px | 2rem | ≈2.2857rem | 3.2rem | 24pt |
| 36px | 2.25rem | ≈2.5714rem | 3.6rem | 27pt |
| 40px | 2.5rem | ≈2.8571rem | 4rem | 30pt |
| 48px | 3rem | ≈3.4286rem | 4.8rem | 36pt |
| 64px | 4rem | ≈4.5714rem | 6.4rem | 48pt |
| 80px | 5rem | ≈5.7143rem | 8rem | 60pt |
| 96px | 6rem | ≈6.8571rem | 9.6rem | 72pt |
px, rem oder em: welche Einheit soll ich nehmen?
Die praktische Aufteilung: rem für alles, was der Textgröße des Lesers folgen soll, em für Werte, die der Schriftgröße des Elements selbst folgen müssen, und px nur dort, wo eine Länge physisch fest bleiben muss. Die Beispielspalte geht von 16px Basis und 16px Elternelement aus.
| Einheit | Bezugsgröße | 20px entspricht | Am besten für | Folgt der Textgröße des Lesers |
|---|---|---|---|---|
| px | Nichts – absolut (1px = 1/96 Zoll) | 20px | Haarlinien-Rahmen, Fokusringe, exakte Icon-Größen | Nein |
| rem | Die Schriftgröße des html-Wurzelelements | 1.25rem | Schriftgrößen, Abstände, Breakpoints, ganze Typo-Skalen | Ja |
| em | Die Schriftgröße des Elements selbst (die des Elternelements bei font-size) | 1.25em | Innenabstand, der mit der umschlossenen Beschriftung wachsen soll | Ja |
| % | Der Wert des Elternelements für diese Eigenschaft | 125% | Fließende Breiten und alte font-size-Bäume | Ja (font-size) |
px oder rem für Innenabstand, Außenabstand und Rahmen?
Nehmen Sie rem für Innen- und Außenabstände, die mitwachsen sollen, wenn der Text größer wird: Button-Padding, Kartenabstände, Sektionsabstände, Raster-Lücken. Für Haarlinien bleibt px. Ein 1px-Rahmen ist genau ein geräteunabhängiges Pixel, während derselbe Rahmen als 0.0625rem bei manchen Zoomstufen auf null abgerundet wird oder unscharf erscheint; dasselbe gilt für 2px-Fokusringe und Trennlinien. Deshalb lässt die Massenumrechnung oben 1px- und 2px-Werte standardmäßig unangetastet und schreibt alles andere um.
Media Queries sind der zweite Ort, an dem sich rem auszahlt. In einer Media Query bezieht sich rem auf die Ausgangsschriftgröße des Browsers und nicht auf Ihre html-Regel: Ein Breakpoint von 48rem sind 768px bei Standardeinstellungen und wächst für Leser, die ihre Textgröße erhöht haben. Breakpoints in px bewegen sich nie.
Wie rechne ich px in rem um – in Figma, VS Code und Tailwind?
Figma misst in px, doch der Dev Mode kann rem ausgeben: Öffnen Sie die Inspect-Einstellungen, wählen Sie „Set unit scale“ und tragen Sie Ihre Basisschriftgröße ein (standardmäßig 1rem = 16px). VS-Code-Erweiterungen wie cssrem rechnen über die Autovervollständigung um und machen die Basis als Einstellung zugänglich – cssrem.rootFontSize, Standardwert 16 –, prüfen Sie also, ob sie zu einem 14px-Projekt passt. Für eine ganze Datei fügen Sie sie oben in das Massenfeld ein und stellen zuerst die Basis ein. Tailwinds Standardskala ist bereits rem-basiert bei 16px Basis: eine Abstandseinheit ist 0.25rem (4px), also ist 16px gleich 4, 24px gleich 6 und 40px gleich 10.
Quellen
Über PX zu REM Konverter
px, rem, em und pt umrechnen und CSS-Ersetzungen prüfen.
16px: 24px → 1.5rem = 1.5em = 18pt.
font-size:24px → font-size:1.5rem; border:1px → border:1px (≤2px).
Positive Wurzel; Betrag ≤1 Milliarde; sechs gerundete Dezimalstellen. Vorschau auf 8–72px begrenzt. CSS ≤100.000 Zeichen. Nur unzitierte px-Werte in Deklarationen werden ersetzt; Kommentare, Zeichenketten, URLs und content bleiben erhalten. Ergebnis prüfen: begrenzte lexikalische Umwandlung, keine CSS-Validierung. CSS-Zahlen mit Exponent (etwa 1e+3px oder 1e-3px) bleiben als ganze Tokens unverändert.
Anwendungsfälle
Anleitung
Wurzel einstellen, beliebige Einheit bearbeiten und optional CSS einfügen. ≤2px erhält kleine Maße; CSV enthält eindeutige konvertierte Zahlenpaare.
Positive Wurzel; Betrag ≤1 Milliarde; sechs gerundete Dezimalstellen. Vorschau auf 8–72px begrenzt. CSS ≤100.000 Zeichen. Nur unzitierte px-Werte in Deklarationen werden ersetzt; Kommentare, Zeichenketten, URLs und content bleiben erhalten. Ergebnis prüfen: begrenzte lexikalische Umwandlung, keine CSS-Validierung. CSS-Zahlen mit Exponent (etwa 1e+3px oder 1e-3px) bleiben als ganze Tokens unverändert.
Profi-Tipps
- Positive Wurzel; Betrag ≤1 Milliarde; sechs gerundete Dezimalstellen. Vorschau auf 8–72px begrenzt. CSS ≤100.000 Zeichen. Nur unzitierte px-Werte in Deklarationen werden ersetzt; Kommentare, Zeichenketten, URLs und content bleiben erhalten. Ergebnis prüfen: begrenzte lexikalische Umwandlung, keine CSS-Validierung. CSS-Zahlen mit Exponent (etwa 1e+3px oder 1e-3px) bleiben als ganze Tokens unverändert.
- rem = px / Wurzelgröße; em nimmt hier denselben Kontext wie die Wurzel an; pt = px × 0,75 bei 96 CSS-Pixeln pro Zoll.
Häufig gestellte Fragen
Hier entspricht der em-Kontext der Wurzel. CSS em hängt von der jeweiligen Schriftgröße ab, besonders bei Verschachtelung.
Zeichenketten, Kommentare, URL-Funktionen und content bleiben erhalten. Ergebnis im Stylesheet prüfen; komplexes oder fehlerhaftes CSS wird nicht validiert.