So verwenden Sie es
- Tippen Sie eine Größe in Wert ein und wählen Sie unter Umrechnen eine Richtung, etwa px in rem.
- Prüfen Sie die Basis-Schriftgröße (px). Verwenden Sie die Größe, die Ihre Website am Wurzelelement festlegt. 16 px ist der Standard der Browser.
- Fügen Sie CSS in CSS zum Umrechnen ein und wählen Sie unter CSS-px umrechnen in rem oder em.
- Kopieren Sie das CSS mit umgerechneten Längen oder prüfen Sie eine Größe in der Umrechnungstabelle.
Wie px, rem und em zusammenhängen
Ein px ist eine absolute Länge auf dem Bildschirm. Ein rem ist ein Vielfaches der Schriftgröße des Wurzelelements (des html-Elements), und ein em ist ein Vielfaches der Schriftgröße des Elements, in dem es steht. Beide Einheiten folgen der Basis-Schriftgröße: Ist die Basis 16 px, ist 1 rem gleich 16 px.
Um px in rem umzurechnen, teilen Sie durch die Basis. Um rem oder em zurück in px umzurechnen, multiplizieren Sie mit der Basis. Bei gleicher Basisgröße ergeben rem und em dieselbe Zahl. Sie unterscheiden sich nur, wenn die Schriftgröße eines übergeordneten Elements nicht der Basis entspricht.
rem = px / Basis-Schriftgröße; px = rem × Basis-SchriftgrößeWas der CSS-Umrechner ändert und was nicht
Jede Zahl, auf die px folgt, wird umgerechnet, auch negative Werte und Dezimalzahlen wie .5px. Zahlen werden wie in CSS mit einem Punkt geschrieben, höchstens mit vier Nachkommastellen und ohne nachgestellte Nullen. Eine Länge von null wird ohne Einheit zu 0, was CSS annimmt.
Der Umrechner prüft die Bedeutung des CSS nicht. Ein px-Wert in einem Kommentar oder einer Zeichenkette, etwa content mit dem Text 10px, wird ebenfalls umgerechnet. Der Inhalt von url() bleibt unangetastet, daher ändert sich ein Dateiname, der auf px endet, nicht. Prüfen Sie das Ergebnis, bevor Sie es verwenden.
- Verwenden Sie rem für Schriftgrößen, Abstände und Breiten, die mitwachsen sollen, wenn ein Besucher die Textgröße ändert.
- Behalten Sie 1 px für haarfeine Rahmen bei, bei denen ein rem-Wert auf manchen Bildschirmen zu einer unscharfen Linie gerundet würde.
Rechenbeispiel: Fließtext mit 18 px bei einer Basis von 16 px
18 geteilt durch 16 ist 1,125, daher wird font-size: 18px zu font-size: 1.125rem. Ein Außenabstand von 40 px wird zu 2.5rem, weil 40 geteilt durch 16 gleich 2,5 ist.
Dieselben 24 px bei einer Basis von 10 px ergeben 2.4 rem, und die Tabelle zeigt 24 px als 1.5 rem bei einer Basis von 16 px. Der CSS-Ausschnitt des Standardbeispiels hat sechs px-Längen. Alle sechs werden umgerechnet, und die Anzahl zeigt 6.
Häufig gestellte Fragen
Warum ist 16 px die Basis-Schriftgröße?
Die meisten Browser verwenden 16 px als Standardschriftgröße des Wurzelelements. Daher ist 1 rem gleich 16 px, sofern die Website keine andere Größe festlegt. Tragen Sie den Wert ein, den Ihre Website am html-Element festlegt.
Was ist der Unterschied zwischen rem und em?
rem bezieht sich auf die Schriftgröße des Wurzelelements und ist daher auf der ganzen Seite gleich. em bezieht sich auf die Schriftgröße des Elements, in dem es steht, daher ändert sich die Größe bei verschachtelten Elementen. Bei gleicher Basis sind die Zahlen gleich.
Sollte ich jeden px-Wert in rem umrechnen?
Nicht immer. Ein 1-px-Rahmen ist auf vielen Bildschirmen in px schärfer, und manche kleinen Details wirken fest besser. Verwenden Sie rem für Textgrößen, Abstände und Layoutbreiten, die sich nach den Einstellungen des Besuchers richten sollen.
Warum werden manche px-Werte in meinem CSS nicht umgerechnet?
Ein px-Wert wird nur umgerechnet, wenn er allein als Länge steht. Werte innerhalb von url() sowie Ausdrücke wie 10pxx oder 10px-2, die keine reine Länge sind, bleiben unverändert. Prüfen Sie ungewöhnliche Werte von Hand.
Warum endet die Tabelle bei 64 px?
Sie nennt die Größen, die Gestalter am häufigsten verwenden. Für jede andere Größe tippen Sie sie in das Feld Wert ein und wählen die Richtung.
Quellen
Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.