DevToolPal
DE

PX-zu-REM-Rechner

Rechnet px in rem oder em um (und zurück), mit beliebiger Basisschriftgröße, Umrechnungstabelle und Umwandlung aller px-Werte in eingefügtem CSS auf einmal.

Läuft lokal, wird nie hochgeladen

Optionen

Richtung
Einheit

CSS oder Werte

0 Zeichen · 0 B

Ergebnis

Das Ergebnis erscheint hier

Was das Tool macht

Dieses Tool rechnet CSS-Längen zwischen Pixeln und den relativen Einheiten rem und em um. Geben Sie einen einzelnen Wert wie 24px ein und erhalten Sie 1.5rem, listen Sie mehrere Werte zeilenweise auf, um alle auf einmal umzurechnen, oder fügen Sie ein ganzes Stylesheet ein – jeder px-Wert darin wird an Ort und Stelle ersetzt. Eine Tabelle zeigt die gängigen Größen von 1px bis 128px bei Ihrer Basisschriftgröße. Nichts verlässt Ihren Browser.

So funktioniert es

  1. Fügen Sie CSS ein oder geben Sie Werte zeilenweise ein. Zahlen ohne Einheit gelten als px (bzw. als rem/em, wenn die Richtung umgekehrt ist), und ein Wert in der jeweils anderen Einheit wird in Gegenrichtung umgerechnet.
  2. Stellen Sie die Basisschriftgröße ein. Alle Browser verwenden standardmäßig 16px; manche Projekte setzen html { font-size: 62.5% }, damit 1rem = 10px ist.
  3. Wählen Sie die Richtung (px → rem oder rem → px), die Einheit (rem oder em) und die Zahl der Nachkommastellen.
  4. Optional lassen Sie mit Werte darunter in px lassen 1px-Rahmen und andere Haarlinien in px.
  5. Kopieren Sie das Ergebnis mit der Schaltfläche darüber.

Beispiel

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Werte, die nicht in px angegeben sind, etwa Prozentwerte, Farben, Dateinamen in url() und Klassennamen wie .mt-16px, bleiben unverändert. Aus 0px wird 0.

px, rem und em

  • px ist eine absolute Einheit und ignoriert die vom Leser bevorzugte Schriftgröße.
  • rem („root em“) ist ein Vielfaches der Schriftgröße des html-Elements. Stellt jemand seinen Browser auf 20px, ist 1rem gleich 20px und das ganze Layout skaliert mit.
  • em ist ein Vielfaches der Schriftgröße des aktuellen Elements. Praktisch für Abstände, die ihrem Text folgen sollen – verschachtelte em-Werte multiplizieren sich jedoch, deshalb ist rem die sicherere Voreinstellung.

Auch Media Queries werden umgerechnet: Aus @media (min-width: 768px) wird 48rem (oder 48em), sodass Breakpoints beim Vergrößern des Textes stimmig bleiben. In Media Queries beziehen sich rem und em beide auf die Standardschriftgröße des Browsers, nicht auf Ihre html-Regel.

FAQ

› Wie rechne ich px in rem um?

Teilen Sie den Pixelwert durch die Schriftgröße des Wurzelelements. Beim Browser-Standard von 16px gilt 24px ÷ 16 = 1.5rem und 12px ÷ 16 = 0.75rem. Zurück geht es per Multiplikation: 2rem × 16 = 32px.

› Was ist der Unterschied zwischen rem und em?

rem bezieht sich auf die Schriftgröße des html-Elements, 1rem ist also überall auf der Seite gleich groß. em bezieht sich auf die Schriftgröße des aktuellen Elements (bei font-size selbst auf die des Elternelements) und multipliziert sich daher bei verschachtelten Elementen. Verwenden Sie rem für die meisten Größen und em, wenn etwas mit seinem eigenen Text skalieren soll, etwa das Padding eines Buttons.

› Warum rem statt px?

Erhöht jemand die Standardschriftgröße in den Browsereinstellungen, wachsen rem-Werte mit, px-Werte bleiben gleich. rem hält Layouts barrierearm und erlaubt es, ein ganzes Design über einen einzigen Wurzelwert zu skalieren.

› Soll ich 1px-Rahmen umrechnen?

Meist nicht. Eine Haarlinie von 0.0625rem kann bei manchen Zoomstufen unscharf werden oder verschwinden. Stellen Sie „Werte darunter in px lassen“ auf 2px, dann bleiben Rahmen und andere winzige Werte in px.