PX to REM Converter
Konvertieren Sie Pixelwerte sofort in REM und zurück. Legen Sie eine beliebige Basis-Schriftgröße fest, zeigen Sie eine vollständige Konvertierungstabelle an und kopieren Sie CSS-Custom-Properties oder eine Klartexttabelle für Ihr Stylesheet.
PX ↔ REM Converter
Geben Sie einen Wert in einem der Felder ein — beide werden live basierend auf der Basis-Schriftgröße aktualisiert.
Pixel (px)
REM
Root font-size CSS
:root { font-size: 16px; }
Häufige Werte bei Basis 16px
| px | rem |
|---|---|
| 8px | 0.5rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 28px | 1.75rem |
| 32px | 2rem |
| 36px | 2.25rem |
| 40px | 2.5rem |
| 48px | 3rem |
| 56px | 3.5rem |
| 64px | 4rem |
| 72px | 4.5rem |
| 80px | 5rem |
| 96px | 6rem |
Ihre Daten bleiben in Ihrem Browser — es werden keine Daten an einen Server gesendet.
Was ist REM und warum es verwenden?
REM (root em) ist eine CSS-Einheit, die relativ zur Schriftgröße des Root-Elements (<html>) ist. Da sie mit der Browser-Schriftgrößen-Einstellung des Benutzers skaliert, wird REM gegenüber Pixel für Typografie, Abstände und Layout bevorzugt — es macht Websites zugänglicher und wartbarer. Die standardmäßige Browser-Basis ist 16px, also 1rem = 16px, sofern nicht anders angegeben.
Der 62,5%-Trick
Das Setzen von :root { font-size: 62.5%; } macht 1rem gleich 10px (62,5% von 16px), was die Kopfrechnung vereinfacht — 1,6rem = 16px, 2,4rem = 24px usw. Mit diesem Tool können Sie eine beliebige benutzerdefinierte Basis eingeben, um die rem-Werte Ihres Layouts auf einen Blick zu sehen.
So verwenden Sie es
- Legen Sie die Basis-Schriftgröße fest (Standard 16px, wie bei den meisten Browsern).
- Geben Sie einen Pixelwert ein — das REM-Äquivalent wird sofort aktualisiert.
- Oder geben Sie einen REM-Wert ein — das Pixel-Äquivalent wird sofort aktualisiert.
- Scrollen Sie nach unten, um die Konvertierungstabelle für häufige Größen zu sehen.
- Kopieren Sie die Tabelle als CSS-Custom-Properties oder Klartext für Ihr Projekt.
Alle Konvertierungen werden in Ihrem Browser durchgeführt — nichts wird an einen Server gesendet.
Häufig gestellte Fragen
- Was ist die standardmäßige Browser-Schriftgröße?
- Die meisten Browser verwenden standardmäßig 16px für die Root-Schriftgröße, d. h. 1rem = 16px. Benutzer können dies in ihren Browsereinstellungen für Barrierefreiheit ändern, was genau der Grund ist, warum rem gegenüber festen px-Werten bevorzugt wird.
- Wie konvertiere ich px im Kopf in rem?
- Teilen Sie den Pixelwert durch die Basis-Schriftgröße. Mit der Standard-Basis von 16px: 24px ÷ 16 = 1,5rem. Wenn Sie den 62,5%-Trick verwenden (Basis = 10px): 24px ÷ 10 = 2,4rem.
- Sollte ich rem oder em verwenden?
- REM ist relativ zum Root-Element und konsistent in Ihrem gesamten Dokument. EM ist relativ zum nächsten übergeordneten Element, was sich unerwartet ansammeln kann. REM wird allgemein für Schriftgrößen und Abstände bevorzugt; EM kann für komponentengesteuertes Sizing nützlich sein.
- Kann dieses Tool Dezimalwerte verarbeiten?
- Ja. Sie können Dezimalzahlen wie 14,5px oder 0,875rem eingeben und der Converter verarbeitet sie genau.