araç köşesi

PX in REM umrechnen (CSS-Einheiten-Umrechner)

Rechnen Sie die px-Werte Ihres CSS anhand der Basis-Schriftgröße in rem um oder rem zurück in px; Selektoren und Dateinamen bleiben unverändert

Erstellt von Ahmet Bilgiç · Zuletzt aktualisiert: 16. Oktober 2026

Ihre Daten bleiben bei Ihnen. Die Umwandlung läuft im Browser; nichts wird an einen Server gesendet.

So funktioniert es

Fügen Sie Ihren CSS-Code links ein; die rem-Fassung erscheint rechts schon beim Tippen. Die Rechnung ist eine einzige Division: rem = px ÷ Basis-Schriftgröße. Browser setzen die Basis standardmäßig auf 16 Pixel, also sind 16px genau 1rem, 24px sind 1.5rem und 14px sind 0.875rem. Steht in Ihrem Stylesheet html { font-size: 62.5% }, beträgt die Basis 10 Pixel: Tragen Sie 10 ein, dann werden aus 24px 2.4rem. Der Umrechner liest die Datei als CSS-Regeln, nicht als losen Text; geändert wird nur, was hinter einem Doppelpunkt steht. Ein Klassenname wie .mt-16px, ein Dateiname wie url(icon-16px.png) und Text in Anführungszeichen bleiben unverändert, einheitenlose Zahlen wie line-height: 1.5 ebenfalls. Haben Sie nur eine Zahlenliste, etwa 16, 24, 32 aus einer Figma-Datei, wird jede Zeile als eigener Wert umgerechnet. Die Ergebniszeile nennt, wie viele Werte umgerechnet wurden, wie viele Haarlinien in px geblieben sind und wie viele Werte in Media Queries mit 16 Pixel Basis berechnet wurden. Für die Gegenrichtung wählen Sie bei Richtung rem → px.

Dieses Werkzeug ist auch als px in rem umrechnen, rem in px umrechnen, px in rem, px to rem, css einheiten umrechnen, pixel in rem bekannt.

Was ist rem?

rem (root em) ist eine CSS-Längeneinheit, die sich an der Schriftgröße des Wurzelelements, also des html-Tags, misst. 1rem entspricht der font-size von html, die Browser standardmäßig auf 16 Pixel setzen. Erhöht ein Besucher in den Browsereinstellungen die Schriftgröße, wächst alles mit, was in rem angegeben ist: Schrift, Abstände und Breiten. Deshalb werden in barrierefreien Layouts Schrift und Abstände in rem angegeben. Anders als em multipliziert sich rem bei verschachtelten Elementen nicht: Jede Stelle der Seite nutzt dieselbe Wurzel.

Was ist px (CSS-Pixel)?

Ein CSS-Pixel ist kein physischer Bildpunkt, sondern eine Referenzeinheit: Er ist als Punkt definiert, der aus etwa Armlänge 1/96 Zoll breit erscheint. Auf hochauflösenden Handydisplays wird ein CSS-Pixel mit zwei oder drei physischen Pixeln gezeichnet. px verhält sich wie eine feste Einheit und ignoriert die Schriftgröße, die ein Besucher im Browser gewählt hat. Damit passt px zu Details, die immer gleich stark bleiben sollen, etwa Rahmen und Schatten, und ist für Schriftgrößen eine schwache Wahl.

Was ist der Unterschied zwischen px und rem?

px ist fest: Ein Absatz mit font-size: 14px bleibt 14 Pixel groß, auch wenn der Besucher eine große Standardschrift eingestellt hat. rem folgt dieser Einstellung: 0.875rem sind bei Standardeinstellung 14 Pixel und bei jemandem, der die Standardschrift auf 20 Pixel erhöht hat, 17,5 Pixel. Zwei Seiten, die bei Standardeinstellung gleich aussehen, verhalten sich für diese Leser verschieden — die eine bleibt klein, die andere wächst mit. Verwenden Sie rem für Schrift, Abstände und Seitenbreiten und px für Details wie dünne Rahmen und Schatten, deren Stärke sich nie ändern soll.

Warum rem in einer Media Query immer mit 16 rechnet

In diese Falle tappen die meisten Umstellungen von px auf rem. Innerhalb einer Deklaration richtet sich rem nach der Schriftgröße des html-Elements: Mit html { font-size: 62.5% } ist 1rem 10 Pixel groß. Eine Media Query wie @media (min-width: …) sieht diese Einstellung nicht. Sie wird ausgewertet, bevor die Stile der Seite greifen, und rem bedeutet dort die Anfangsschriftgröße des Browsers — 16 Pixel, solange der Besucher sie nicht geändert hat.

Wer also mit 10 Pixel Basis rechnet und den Umbruchpunkt 768px in 76.8rem verwandelt, bekommt den Umbruch erst bei rund 1.228 Pixeln; die Tablet-Ansicht landet auf dem Desktop. Dieses Werkzeug rechnet Werte in @media-Zeilen immer mit 16 um, egal was im Basisfeld steht (768px → 48rem), und zählt sie in der Ergebniszeile.

  • In einer Deklaration: rem = px ÷ Ihre Basisgröße
  • In einer Media Query: rem = px ÷ 16 (Anfangswert des Browsers)
  • Vergrößert ein Besucher die Standardschrift, wachsen beide mit — darin liegt der Gewinn an Barrierefreiheit

Welche Werte in px bleiben sollten

Alles in rem umzurechnen ist nicht das Ziel. rem lohnt sich, wenn ein Besucher die Schriftgröße im Browser erhöht und Schrift, Abstände und Containerbreiten mitwachsen; für Menschen mit Sehschwäche bleibt die Seite so lesbar. Wo dieses Mitwachsen nichts bringt, ist px die sicherere Wahl.

Der 1-Pixel-Rahmen ist das klassische Beispiel. Als 0.0625rem fällt er unter einen Pixel, sobald jemand eine kleinere Schrift wählt, und Browser runden solche Bruchteile unterschiedlich: Die Linie wirkt auf einem Bildschirm verschwommen, auf einem anderen zu kräftig. Ein Rahmen soll überall dieselbe dünne Linie bleiben, nicht skalieren. Deshalb bleiben Werte bis 1px standardmäßig in px; über die Option lassen sie sich trotzdem umrechnen. Schattenversätze, Strichstärken von Icons und die echte Pixelgröße von Bildern bleiben meist ebenfalls in px.

  • In rem umrechnen: font-size, padding, margin, gap, max-width, Umbruchpunkte
  • In px lassen: 1px-Rahmen, dünne Trennlinien, Schattenversatz
  • Ohne Einheit lassen: line-height (etwa 1.5), z-index, Flex-Verhältnisse

Häufige Fragen

Wie viel rem sind 16px?

Bei der Standardbasis von 16 Pixeln sind 16px genau 1rem. Mit derselben Basis sind 12px 0.75rem, 14px 0.875rem, 18px 1.125rem, 24px 1.5rem und 32px 2rem. Hat Ihr html-Element eine andere font-size, tragen Sie diesen Wert ins Basisfeld ein.

Was ist der Unterschied zwischen rem und em?

rem bezieht sich immer auf die Schriftgröße des html-Elements und ergibt überall auf der Seite denselben Wert. em bezieht sich auf die Schriftgröße des umgebenden Elements und multipliziert sich bei Verschachtelung. Dieser Umrechner arbeitet nur zwischen px und rem; em-Werte bleiben unverändert.

Ich verwende font-size: 62.5%. Welche Basis trage ich ein?

62,5 % von 16 Pixeln sind 10 Pixel, tragen Sie also 10 ein: 24px werden 2.4rem, 14px werden 1.4rem. Werte in Media Queries werden trotzdem mit 16 umgerechnet, weil Media Queries die font-size des html-Elements nicht sehen.

Gehen meine Klassennamen und Bilddateinamen kaputt?

Nein. Umgerechnet wird nur der Wertteil von CSS-Deklarationen. Selektoren wie .p-16px, Adressen wie url(hintergrund-32px.png), Text in Anführungszeichen und Kommentare bleiben genau so, wie sie sind.

Wird mein CSS irgendwohin gesendet?

Nein. Die Umrechnung läuft vollständig in Ihrem Browser; das eingefügte Stylesheet wird an keinen Server übertragen.

Quellen