Zum Inhalt springen
🛠️
Whiz Tools

PX zu REM zu EM Umrechner – Kostenloser CSS-Einheiten-Rechner

Pixel sofort in REM- und EM-Einheiten umrechnen. Kostenloser CSS-Einheiten-Umrechner für responsives Webdesign. Unterstützt benutzerdefinierte Schriftgrößen und Echtzeit-Berechnungen für präzise Ergebnisse.

PX, REM und EM Einheitenumrechner

Umrechnung zwischen Pixeln (PX), Root-Em (REM) und Em (EM). Geben Sie einen Wert in einem beliebigen Feld ein, um die entsprechenden Werte in den anderen Einheiten zu sehen.

px
px
px
rem
em
Visualisierung nicht verfügbar für negative oder Nullwerte

Umrechnungsformeln

  • PX zu REM: Wert in px ÷ Root-Schriftgröße
  • PX zu EM: Wert in px ÷ übergeordnete Schriftgröße
  • REM zu PX: Wert in rem × Root-Schriftgröße
  • EM zu PX: Wert in em × übergeordnete Schriftgröße
Ladekalkulator...
📚

Dokumentation

Konverter für PX-, REM- und EM-Einheiten

Ein Konverter von px in rem und em wandelt eine CSS-Länge zwischen Pixeln (px), Root-em (rem) und em um. Dabei verwendet er die vom Benutzer festgelegte Schriftgröße des Wurzelelements sowie die vom Benutzer festgelegte Schriftgröße des übergeordneten Elements. Diese drei Einheiten werden in CSS, der Sprache zur Gestaltung von Webseiten, am häufigsten zur Bestimmung von Textgrößen und Abständen verwendet.

Was sind px, rem und em?

Ein Pixel (px) ist eine feste Einheit. Ein Feld mit einer Breite von 200px bleibt 200px breit, unabhängig davon, welche Schriftgröße die Seite verwendet.

Ein rem („Root-em“) bezeichnet eine Einheit, die sich an der Schriftgröße des Wurzelelements der Seite orientiert, normalerweise am Tag <html>. Die meisten Browser setzen diese Stamm-Schriftgröße auf 16px, sofern eine Website sie nicht ändert. Beträgt die Stamm-Schriftgröße 16px, entspricht 1rem 16px.

Ein em ist eine Einheit, die sich an der Schriftgröße des übergeordneten Elements orientiert, also des Elements, das es enthält. Hat ein übergeordnetes Element font-size: 20px, entspricht 1em innerhalb dieses Elements 20px.

Der wesentliche Unterschied zwischen rem und em besteht darin, worauf sich die jeweilige Einheit bezieht. Rem betrachtet immer das Wurzelelement. Em bezieht sich auf das nächstgelegene übergeordnete Element, daher kann sich sein Wert auf jeder Verschachtelungsebene ändern.

So berechnet man px in rem

Um Pixel in rem umzurechnen, teilt man den Pixelwert durch die Stamm-Schriftgröße:

r=pRr = \frac{p}{R}

wobei r die Länge in rem, p die Länge in Pixeln und R die Schriftgröße des Wurzelelements in Pixeln ist.

Rechenbeispiel

Bei der standardmäßigen Stamm-Schriftgröße von 16px werden 24px zu:

24 ÷ 16 = 1,5rem

Wenn eine Website die Stamm-Schriftgröße auf 10px setzt, ein gängiger Trick durch die Einstellung html { font-size: 62.5%; }, da 62,5 % von 16px 10px entsprechen, werden dieselben 24px zu:

24 ÷ 10 = 2,4rem

So berechnet man rem in px

Für die umgekehrte Umrechnung multipliziert man den rem-Wert mit der Stamm-Schriftgröße:

p=r×Rp = r \times R

wobei p die Länge in Pixeln, r die Länge in rem und R die Schriftgröße des Wurzelelements ist.

Bei einer Stamm-Schriftgröße von 16px wird 1.5rem zurückgerechnet zu 1,5 × 16 = 24px.

So berechnet man px in em

Um Pixel in em umzurechnen, teilt man den Pixelwert durch die Schriftgröße des übergeordneten Elements:

e=pPe = \frac{p}{P}

wobei e die Länge in em und P die Schriftgröße des übergeordneten Elements in Pixeln ist.

Rechenbeispiel

Beträgt die Schriftgröße des übergeordneten Elements 20px, werden 24px zu:

24 ÷ 20 = 1,2em

So berechnet man em in px

Man multipliziert den em-Wert mit der Schriftgröße des übergeordneten Elements:

p=e×Pp = e \times P

wobei p die Länge in Pixeln, e die Länge in em und P die Schriftgröße des übergeordneten Elements ist.

Bei einem übergeordneten Element mit 20px wird 1.2em zurückgerechnet zu 1,2 × 20 = 24px.

So berechnet man rem in em und em in rem

Da sich rem und em auf unterschiedliche Schriftgrößen beziehen, benötigt die Umrechnung zwischen ihnen sowohl die Stamm-Schriftgröße als auch die Schriftgröße des übergeordneten Elements:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

wobei R die Schriftgröße des Wurzelelements und P die Schriftgröße des übergeordneten Elements ist.

Rechenbeispiel

Bei einer Stamm-Schriftgröße von 16px und einer Schriftgröße des übergeordneten Elements von 20px wird 2rem zu:

2 × (16 ÷ 20) = 1,6em

Wenn die Stamm-Schriftgröße und die Schriftgröße des übergeordneten Elements gleich sind, entspricht 1rem immer 1em.

Wann die einzelnen Einheiten sinnvoll sind

Pixel eignen sich für Details, deren Größe sich nicht ändern soll, etwa einen 1px-Rahmen oder ein Symbol mit fester Breite.

Rem wird häufig für Abstände und Typografie verwendet, die auf einer Seite einheitlich bleiben sollen. Da sich rem immer auf die Stamm-Schriftgröße bezieht, ändert sich ein rem-Wert nicht, unabhängig davon, wie tief ein Element verschachtelt ist. Dadurch passen sich rem-basierte Layouts automatisch an, wenn jemand die Standardschriftgröße des Browsers erhöht, was Menschen mit eingeschränktem Sehvermögen unterstützt.

Em eignet sich gut innerhalb einer einzelnen, in sich geschlossenen Komponente, etwa einer Schaltfläche, bei der sich die Innenabstände zusammen mit der eigenen Schriftgröße skalieren sollen. Ein häufiges Problem bei em ist die Aufsummierung: Wenn mehrere verschachtelte Elemente jeweils font-size: 1.2em verwenden, multipliziert jede Ebene die vorherige, sodass die Schriftgrößen schneller als beabsichtigt wachsen.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Nach drei Ebenen ist der Text um etwa 73 % gewachsen, nicht um die 20 %, die ein Entwickler bei einer einzelnen Regel 1.2em erwarten könnte.

Den Umrechner verwenden

  1. Geben Sie einen Wert in das Pixel-, rem- oder em-Feld ein.
  2. Die beiden anderen Felder werden automatisch aktualisiert und auf vier Dezimalstellen gerundet.
  3. Legen Sie die Stamm-Schriftgröße entsprechend dem <html>-Element des Projekts fest. In den meisten Browsern beträgt sie standardmäßig 16px und wirkt sich nur auf rem aus.
  4. Legen Sie die Schriftgröße des übergeordneten Elements entsprechend der Schriftgröße des Elements fest, in dem ein em-Wert verwendet würde. Sie wirkt sich nur auf em aus.
  5. Verwenden Sie die Kopierschaltfläche neben einem Feld, um dessen Wert zu kopieren.

Beide Felder für die Schriftgröße akzeptieren eine ganze Zahl von Pixeln; der kleinste zulässige Wert ist 1px. Die Zurücksetzen-Schaltfläche löscht den Wert und setzt beide Schriftgrößen wieder auf 16px.

Unter den Feldern zeichnet das Werkzeug einen Balken pro Einheit. Alle drei Balken stellen dieselbe physische Länge dar und sind daher gleich breit. Das ist eine schnelle Prüfung, ob die Umrechnung stimmt. Ein Balken wird bis zu einer Länge von 300px in seiner tatsächlichen Pixelbreite gezeichnet; alles, was länger ist, wird so verkleinert, dass es hineinpasst. Daher enden sowohl ein Wert von 600px als auch ein Wert von 900px bei 300px. Die Balken werden nur angezeigt, wenn der Pixelwert größer als null ist.

Häufig gestellte Fragen

Was ist der Unterschied zwischen rem und em? Rem bezieht sich immer auf die Schriftgröße des Wurzelelements. Em bezieht sich auf die Schriftgröße des nächstgelegenen übergeordneten Elements. Ein rem-Wert bleibt überall auf einer Seite gleich; ein em-Wert kann sich ändern, je nachdem, wie tief das Element verschachtelt ist.

Warum verwenden Browser 16px als Standardschriftgröße? 16px ist in gängigen Browsern schon lange die standardmäßige Textgröße, weil sie auf typischen Bildschirmen ohne zusätzliche Gestaltung angenehm zu lesen ist. Richtlinien zur Barrierefreiheit im Web empfehlen, dass Text bis auf 200 % vergrößert werden kann, ohne das Layout einer Seite zu beeinträchtigen; 16px ist dafür ein praktischer Ausgangswert.

Was hat es mit dem 62,5 %-Trick auf sich? Durch die Einstellung html { font-size: 62.5%; } wird die standardmäßige Schriftgröße des Wurzelelements von 16px auf 10px gesetzt, da 62,5 % von 16 gleich 10 ist. Dadurch wird die rem-Berechnung einfacher, weil 1,6rem 16px und 2,4rem 24px entsprechen.

Können px-, rem- und em-Werte negativ sein? Ja, bei Eigenschaften, die negative Längen zulassen, etwa bei Außenabständen oder CSS-Transformationen. Innenabstände dürfen in CSS nicht negativ sein; Browser ignorieren einen negativen Wert für den Innenabstand. Der Konverter verarbeitet negative Werte, zeichnet dafür aber keine Balken, weil ein Balken keine negative Breite haben kann.

Sollte jeder Pixelwert in rem umgerechnet werden? Nicht unbedingt. Rahmen und andere feine Details werden normalerweise in Pixeln angegeben, da sie nur selten mit der Schriftgröße skaliert werden müssen und bei Breiten unterhalb eines Pixels ungleichmäßig wirken können. Rem eignet sich für Abstände und typografische Angaben, die mit der vom Benutzer bevorzugten Schriftgröße skalieren sollen.

Beeinflusst die Wahl der Einheit die Seitenleistung? Nein. Browser wandeln jede CSS-Länge während des Layouts in denselben internen Wert um, daher werden px, rem und em gleich schnell dargestellt. Die Wahl zwischen ihnen beeinflusst die Wartbarkeit und die Barrierefreiheit, nicht die Geschwindigkeit.