PX ↔ REM Rechner
Pixel ⇄ rem mit beliebiger Root-Schriftgröße
16px = 1rem
PX-in-REM-Tabelle (Basis 16px)
| px | rem | px | rem |
|---|---|---|---|
| 1px | 0.0625rem | 28px | 1.75rem |
| 2px | 0.125rem | 32px | 2rem |
| 4px | 0.25rem | 36px | 2.25rem |
| 6px | 0.375rem | 40px | 2.5rem |
| 8px | 0.5rem | 44px | 2.75rem |
| 10px | 0.625rem | 48px | 3rem |
| 12px | 0.75rem | 56px | 3.5rem |
| 14px | 0.875rem | 64px | 4rem |
| 16px | 1rem | 72px | 4.5rem |
| 18px | 1.125rem | 80px | 5rem |
| 20px | 1.25rem | 96px | 6rem |
| 22px | 1.375rem | 112px | 7rem |
| 24px | 1.5rem | 128px | 8rem |
rem = px ÷ Root-Schriftgröße. Browser nutzen 16px, solange die font-size des html-Elements nicht geändert wird.
PX in REM umrechnen (und REM in PX)
Bidirektionaler CSS-Einheitenrechner mit einstellbarer Basis
rem (root em) ist eine relative CSS-Einheit: 1rem entspricht der Schriftgröße des html-Elements, die in allen gängigen Browsern standardmäßig 16px beträgt. Wer Schriftgrößen, Abstände und Breakpoints in rem angibt, sorgt dafür, dass das Layout mitwächst, wenn Besucher die Textgröße im Browser erhöhen – ein wichtiger Gewinn an Barrierefreiheit gegenüber festen Pixeln. Geben Sie einen Pixelwert ein, um rem zu erhalten, oder rem, um Pixel zu erhalten; beide Felder aktualisieren sich gegenseitig. Nutzt Ihr Projekt eine andere Basis (z. B. html { font-size: 62.5% } für 10px), ändern Sie die Basis – Rechner, Schnellwerte und Tabelle passen sich an.
Funktionen
Beide Richtungen
px → rem und rem → px
Eigene Basis
Standard 16px, jede Root-Größe
Umrechnungstabelle
1–128px auf einen Blick
Barrierefreies CSS
Skaliert mit der Schrifteinstellung
Spickzettel PX, REM und EM
Formeln
- rem = px ÷ Root-Schriftgröße (z. B. 24 ÷ 16 = 1.5rem)
- px = rem × Root-Schriftgröße (z. B. 2rem × 16 = 32px)
- em bezieht sich auf die Schriftgröße des Elternelements, rem immer auf die Wurzel
- html { font-size: 62.5% } ergibt 1rem = 10px
Häufige Werte (Basis 16px)
- 12px = 0.75rem · 14px = 0.875rem · 16px = 1rem
- 18px = 1.125rem · 20px = 1.25rem · 24px = 1.5rem
- 32px = 2rem · 48px = 3rem · 64px = 4rem
- Media Queries: 768px = 48rem · 1024px = 64rem
Häufig gestellte Fragen
Wie viele Pixel sind 1rem?
Standardmäßig ist 1rem = 16px, weil Browser die Root-Schriftgröße (html) auf 16px setzen. Wird sie im CSS oder in den Browsereinstellungen geändert, ändert sich 1rem mit.
Wie rechne ich px in rem um?
Teilen Sie den Pixelwert durch die Root-Schriftgröße. Bei 16px: 24px ÷ 16 = 1.5rem, 14px ÷ 16 = 0.875rem.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich immer auf die Schriftgröße des html-Elements, em auf die des Elternelements – verschachtelte em-Werte multiplizieren sich. rem ist daher berechenbarer.
Sollte ich rem oder px verwenden?
Nutzen Sie rem für Schriftgrößen, Abstände und Media Queries, damit das Layout die Textgrößen-Einstellung respektiert. px eignet sich weiterhin für Rahmen, Haarlinien und Schatten.
Was bewirkt font-size: 62.5%?
Die Root-Schriftgröße wird auf 10px gesetzt (62,5 % von 16px), sodass 1.6rem = 16px ist. Das erleichtert das Rechnen; Fließtext muss dann wieder auf 1.6rem gesetzt werden.
Kann ich rem in Media Queries verwenden?
Ja. In Media Queries beziehen sich rem und em auf die Standardschriftgröße des Browsers, nicht auf die html-Regel – bei Standardeinstellungen ist 48rem = 768px.