Pixel zu REM Konverter

Konvertieren Sie zwischen px und rem/em. Legen Sie Ihre Schrift-Grundgröße fest und erhalten Sie sofort eine Umwandlungstabelle für alle gängigen Größen.

Root font size (html)

Convert

Pixels (px)

REM / EM

rem

Conversion Table (root = 16px)

px	rem	em	pt
4	0.25rem	0.25em	3pt
8	0.5rem	0.5em	6pt
10	0.625rem	0.625em	7.5pt
12	0.75rem	0.75em	9pt
14	0.875rem	0.875em	10.5pt
16	1rem	1em	12pt
18	1.125rem	1.125em	13.5pt
20	1.25rem	1.25em	15pt
24	1.5rem	1.5em	18pt
28	1.75rem	1.75em	21pt
32	2rem	2em	24pt
36	2.25rem	2.25em	27pt
40	2.5rem	2.5em	30pt
48	3rem	3em	36pt
56	3.5rem	3.5em	42pt
64	4rem	4em	48pt
72	4.5rem	4.5em	54pt
80	5rem	5em	60pt
96	6rem	6em	72pt
112	7rem	7em	84pt
128	8rem	8em	96pt

So verwenden Sie Pixel zu REM Konverter

1Legen Sie Ihre Schrift-Grundgröße fest (Standard 16px).
2Geben Sie einen Pixelwert ein, um ihn in rem/em umzuwandeln.
3Zeigen Sie die vollständige Umwandlungstabelle für gängige Größen an.
4Kopieren Sie einen beliebigen Wert direkt aus der Tabelle.

ZenovayAnalytics

Analytics, für Gründer gebaut.

Besucher-Tracking in Echtzeit
Datenschutz zuerst, kein Cookie-Banner
In zwei Minuten eingerichtet

Zenovay entdecken

Häufig gestellte Fragen

Was ist der Unterschied zwischen px, rem und em?▾

px (Pixel) ist eine absolute Einheit — 1px ist immer 1 geräteunabhängiges Pixel, unabhängig vom Kontext. rem (root em) ist relativ zur Schriftgröße des Root-Elements (<html>). Wenn das Root 16px ist, dann 1rem = 16px, 2rem = 32px. em ist relativ zur Schriftgröße des aktuellen Elements — wenn ein div font-size: 20px hat, dann 1em = 20px in diesem div. rem ist für das Layout bevorzugt, da es konsistent ist; em ist für die Typographie innerhalb von Komponenten bevorzugt, die mit ihrer eigenen Schriftgröße skalieren müssen.

Warum rem statt px verwenden?▾

rem-Einheiten berücksichtigen die Schriftgrößenpräferenzen des Benutzers im Browser. Wenn ein Benutzer die Basis-Schriftgröße seines Browsers zur Verbesserung der Barrierefreiheit erhöht, skalieren rem-basierte Layouts proportional. px-basierte Layouts nicht. Darüber hinaus vereinfacht rem die Mathematik des Designsystems — wenn Ihre Designskala auf 4px (0.25rem) oder 8px (0.5rem) Inkremente basiert, werden rem-Werte direkt übersetzt. Tailwind CSS verwendet rem für alle Abstände und Typographie (text-lg = 1.125rem = 18px bei Standard-16px-Root).

Welche Root-Schriftgröße sollte ich verwenden?▾

Die Browser-Vorgabe ist 16px. Die meisten Designsysteme (Tailwind, Material UI, Bootstrap) basieren auf 16px. Wenn Sie 62,5% Root-Schriftgröße verwenden (10px Basis — ein häufiger Trick: html { font-size: 62.5% }), dann 1rem = 10px, wodurch die Mathematik einfacher wird (z. B. 1,4rem = 14px). Der 62,5%-Trick hat Barrierefreiheitsauswirkungen — er überschreibt die Schriftgrößenpräferenz des Benutzers im Browser für alle rem-Berechnungen.

Wie konvertiere ich Viewport-Einheiten (vw, vh)?▾

Viewport-Einheiten (vw, vh, svh, dvh) sind relativ zur Viewport-Größe, nicht zur Schriftgröße. 1vw = 1% der Viewport-Breite. 1vh = 1% der Viewport-Höhe. Zur Konvertierung: px-Wert = (vw-Wert / 100) × Viewport-Breite. Da die Viewport-Größe variiert, können vw/vh nicht als fester px-Wert ausgedrückt werden — dieser Konverter konzentriert sich auf schriftgrößenrelative Einheiten (px, rem, em).

Was ist die clamp()-Funktion für Fluid Typography?▾

clamp(min, preferred, max) erstellt einen Wert, der zwischen einem Minimum und Maximum skaliert. Für Fluid Typography: font-size: clamp(1rem, 2.5vw, 2rem) — die Schriftgröße skaliert mit der Viewport-Breite, ist aber nie kleiner als 16px oder größer als 32px. Dies ersetzt mehrere Breakpoints für Typographie. Der "bevorzugte" Wert ist normalerweise ein vw-basierter Ausdruck: calc(1rem + 0.5vw) oder ähnlich.

Bild-Tools