📏 Px-zu-Rem-Konverter
Bidirektionale px ↔ rem/em-Konvertierung mit konfigurierbarer Basis-Schriftgröße.
🔒 100% clientseitige Verarbeitung
Gängige px-zu-rem-Konvertierungen
| Pixel | Rem / Em |
|---|
Konvertieren Sie Pixel sofort in rem (oder em) und zurück — mit konfigurierbarer Basis-Schriftgröße. Tippen Sie in eines der beiden Felder, das andere aktualisiert sich live — ganz ohne Konvertieren-Button. Eine Referenztabelle mit gängigen Werten von 1px bis 64px wird aus derselben Konvertierungslogik erzeugt, sodass Sie Standard-Äquivalente auf einen Blick ablesen können. Entwickelt für Frontend-Entwickler und Designer, die pixelbasierte Mockups in skalierbares, barrierefreies CSS überführen.
Verwendung
- Basis-Schriftgröße festlegen: Behalten Sie den Browser-Standard von 16px bei oder geben Sie die Wurzel-Schriftgröße Ihres Projekts ein.
- In eines der Felder tippen: Geben Sie einen px-Wert ein, um rem zu erhalten, oder einen rem/em-Wert für px — die Konvertierung erfolgt während der Eingabe.
- rem oder em wählen: Nutzen Sie das Dropdown neben dem Ergebnisfeld; die Berechnung ist gleich, wenn die Referenzgröße der Basis entspricht.
- Tabelle prüfen: Scrollen Sie durch die Tabelle gängiger Werte für 1–64px-Äquivalente bei der gewählten Basis.
Funktionen
- Bidirektionale Konvertierung — eine Seite bearbeiten, die andere aktualisiert sich sofort
- Konfigurierbare Basis-Schriftgröße (Standard 16px) für Projekte mit eigener Wurzelgröße
- Unterstützt sowohl rem als auch em als Ausgabeeinheit
- Ergebnisse auf 4 Dezimalstellen gerundet, nachfolgende Nullen entfernt
- Tabelle gängiger Werte (1–64px), die bei jeder Basisänderung neu erzeugt wird
- Läuft vollständig in Ihrem Browser — nichts wird hochgeladen
Warum px in rem umrechnen?
Pixel sind absolut: 16px sind 16 geräteunabhängige Pixel, unabhängig von den Nutzereinstellungen. Das macht px vorhersehbar, aber starr. rem-Einheiten beziehen sich auf die Wurzel-Schriftgröße, sodass ein mit rem gebautes Layout automatisch skaliert, wenn ein Nutzer die Standardschriftgröße seines Browsers erhöht — eine zentrale Barrierefreiheits-Anforderung der WCAG. Die Umrechnung selbst ist einfache Division (px ÷ Basis), aber sie für jeden Wert eines Stylesheets im Kopf zu rechnen ist fehleranfällig. Dieses Tool übernimmt die Rechnung in beide Richtungen und hält eine Spickzettel-Tabelle bereit, sodass die Umrechnung einer ganzen Design-Spezifikation zur Copy-Paste-Übung wird. Der 62.5%-Trick (Wurzel auf 10px setzen, sodass 1.6rem = 16px) wird ebenfalls unterstützt: Stellen Sie die Basis einfach auf 10.
Anwendungsfälle
- Design-Übergabe: Pixelwerte aus Figma- oder Sketch-Mockups in rem für Ihr CSS umrechnen.
- Barrierefreiheits-Audits: Feste px-Schriftgrößen und -Abstände finden und durch skalierbare rem-Äquivalente ersetzen.
- Design-Systeme: Eine Abstands- und Typografie-Skala auf einer nicht standardmäßigen Basis wie 10px oder 20px aufbauen.
- CSS lernen: Mit der Tabelle ein Gefühl für gängige px/rem-Paare entwickeln.
Verwandte Tools
Häufig gestellte Fragen
Was ist der Unterschied zwischen px, rem und em?
Pixel (px) sind feste absolute Einheiten. rem bezieht sich auf die Schriftgröße des Wurzelelements (standardmäßig 16px in jedem Browser), während em sich auf die Schriftgröße des Elternelements bezieht. Bei einer Basis von 16px entsprechen 24px genau 1.5rem — und nur dann 1.5em, wenn die Schriftgröße des Elternelements ebenfalls 16px beträgt.
Warum sollte ich rem statt px verwenden?
rem-Einheiten skalieren mit der Schriftgrößen-Einstellung des Browsers, sodass Layouts für Nutzer zugänglich bleiben, die ihre Standardschriftgröße erhöhen. px-Werte ignorieren diese Einstellung und können Layouts für sehbehinderte Nutzer beschädigen.
Welche Basis-Schriftgröße sollte ich verwenden?
Der Browser-Standard von 16px ist üblich und wird von den meisten Design-Systemen angenommen. Ändern Sie den Wert nur, wenn Ihr Projekt eine andere Wurzel-Schriftgröße setzt, zum Beispiel html { font-size: 62.5% }, wodurch 1rem gleich 10px wird.
Konvertiert dieses Tool auch em-Werte?
Ja. Wählen Sie em im Dropdown neben dem Ergebnisfeld. Die Berechnung ist identisch zu rem, solange die Referenz-Schriftgröße des em mit Ihrer gewählten Basis übereinstimmt — der übliche Fall bei Komponenten auf Wurzelebene.
Wie genau sind die konvertierten Werte?
Die Ergebnisse werden auf maximal 4 Dezimalstellen gerundet, nachfolgende Nullen werden entfernt — mehr als genug Präzision für CSS, da Browser beim Rendern ohnehin auf Sub-Pixel-Werte runden.