Wie konvertiere ich px zu rem?

Tippe den Pixelwert in das px-Feld und lies das rem-Feld ab. rem ist der Wert geteilt durch die Root-Schriftgröße, sodass bei der Standardbasis 16px 16px gleich 1rem und 24px gleich 1,5rem ist.

Wie konvertiere ich rem zu px?

Tippe den Wert in das rem-Feld und lies px ab. rem zu px ist der Wert multipliziert mit der Root-Schriftgröße, sodass 2rem bei einer 16px-Basis 32px ergibt.

Welche Basis-Schriftgröße verwendet der Konverter?

Er nutzt standardmäßig 16px, die übliche Browser-Root-Schriftgröße, und du kannst sie im Feld Root-Schriftgröße ändern. Diese Basis steuert jedes rem-, em- und %-Ergebnis, sodass sie zu deinem Stylesheet passen.

Warum ist 1pt hier gleich 1,3333px?

CSS definiert 1pt als 1/72 Zoll und 1px als 1/96 Zoll, sodass 1pt = 96/72 px = 1,3333px ist. Deshalb konvertiert 12pt zu genau 16px, der gängigen Fließtext-Größe.

Was ist der Unterschied zwischen em und rem?

rem ist relativ zur Root-Schriftgröße, während em relativ zur eigenen font-size des Elements ist. Dieses Tool nutzt zur Vereinfachung eine Basis für beide, sodass sie gleich ablesen; setze die Root-Schriftgröße, um die rem-Seite abzubilden.

Wird die Konvertierung auf einem Server ausgeführt?

Nein. Die CSS-Einheiten-Konvertierung läuft vollständig in deinem Browser mit einfacher Arithmetik, sodass die eingegebenen Werte auf deinem Gerät bleiben.

CSS-Einheiten-Konverter

Konvertiere CSS-Längeneinheiten – px, rem, em, pt und % – live in deinem Browser. Lege eine Root-Schriftgröße fest und jede Einheit aktualisiert sich sofort.

Jede Konvertierung wird lokal in deinem Browser berechnet; die eingegebenen Werte werden nie hochgeladen.

Arbeitest du mit CSS-Farben? Probiere den CSS Color Converter.

Über CSS-Einheiten-Konverter

Dieser CSS-Einheiten-Konverter verwandelt eine Länge, die du in einer Einheit tippst, auf einmal in jede andere CSS-Einheit – px, rem, em, pt und %. Gib einen Wert in ein beliebiges Feld ein und die anderen aktualisieren sich live, sodass du ein px-zu-rem- oder pt-zu-px-Ergebnis ablesen kannst, ohne von Hand zu rechnen. Eine Eingabe für die Root-Schriftgröße (standardmäßig 16px) steuert die rem-, em- und %-Beziehungen, was widerspiegelt, wie Browser relative Einheiten gegen die Schriftgröße der Seite auflösen. Eine eingebaute Kurzreferenz zeigt die gängigen px-zu-rem-Werte, die Designer wiederverwenden – 12, 14, 16, 24, 32 und mehr – bei deiner gewählten Basis. Jedes Ergebnis hat eine Kopieren-Schaltfläche, sodass du es direkt in ein Stylesheet einfügen kannst. Alles läuft in deinem Browser, sodass die eingegebenen Werte auf deinem Gerät bleiben.

Funktionen

Konvertiert zwischen px, rem, em, pt und % in dem Moment, in dem du in ein beliebiges Feld tippst
Eine konfigurierbare Root-Schriftgröße steuert rem, em und %, sodass die Ergebnisse zu deinem CSS passen
Genaue pt-Konvertierung mit dem CSS-Faktor 96/72 (1pt = 1,3333px)
Behandelt % als Bruchteil der Root-Schriftgröße, genau wie schriftrelatives CSS
Kurzreferenztabelle gängiger px-zu-rem-Werte (12, 14, 16, 24, 32) bei deiner Basis
Kürzt Ergebnisse auf eine sinnvolle Genauigkeit und entfernt nachgestellte Nullen für saubere Werte
Kopieren per Klick bei jeder Einheit, inklusive Einheiten-Suffix
Merkt sich deinen letzten Wert und deine Basis-Schriftgröße zwischen Besuchen

So verwendest du CSS-Einheiten-Konverter

Lege die Root-Schriftgröße fest, falls sie vom Browser-Standard 16px abweicht.
Tippe einen Wert in ein beliebiges Einheitenfeld – px, rem, em, pt oder %.
Lies den entsprechenden Wert in jeder anderen Einheit ab, während er sich live aktualisiert.
Klicke auf die Kopieren-Schaltfläche neben einer Einheit, um den Wert mit seinem Suffix zu erhalten.
Nutze die Kurzreferenztabelle für gängige px-zu-rem-Paare bei deiner Basis.

Beispiel

Eingabe

/* root font-size: 16px */
.card { padding: 24px; }

Ausgabe

.card { padding: 1.5rem; }

/* 24px = 1.5rem = 18pt = 150% at base 16px */

Bei einer 16px-Basis entspricht 24px 1,5rem – praktisch, um ein Layout auf rem umzustellen.

Häufige Fehler & Fehlerbehebung

Deine rem- und %-Ergebnisse sehen falsch aus, obwohl px stimmt. — Prüfe die Root-Schriftgröße. rem, em und % werden gegen diese Basis aufgelöst, also setze sie auf die font-size deines :root- oder html-Elements.
pt stimmt nicht mit dem überein, was du in einem Designtool siehst. — Dieser Konverter nutzt die CSS-Definition, bei der 1pt = 96/72 px (1,3333px) ist. Druck- oder DTP-Tools nehmen möglicherweise 72dpi an, was stattdessen 1pt = 1px ergibt.
em und rem zeigen dieselbe Zahl, aber du hast erwartet, dass sie sich unterscheiden. — Der Konverter nutzt zur Vereinfachung eine einzige Basis für beide. In echtem CSS ist em relativ zur eigenen font-size des Elements, während rem relativ zur Root ist, sodass sie nur abweichen, wenn ein Elternelement die font-size ändert.
Die Felder leeren sich, wenn du die Root-Schriftgröße leer lässt. — Eine leere oder null-Basis wird als ungültig behandelt; der Konverter fällt auf 16px zurück. Tippe eine positive Zahl, um rem, em und % selbst zu steuern.

Häufig gestellte Fragen

Wie konvertiere ich px zu rem?: Tippe den Pixelwert in das px-Feld und lies das rem-Feld ab. rem ist der Wert geteilt durch die Root-Schriftgröße, sodass bei der Standardbasis 16px 16px gleich 1rem und 24px gleich 1,5rem ist.
Wie konvertiere ich rem zu px?: Tippe den Wert in das rem-Feld und lies px ab. rem zu px ist der Wert multipliziert mit der Root-Schriftgröße, sodass 2rem bei einer 16px-Basis 32px ergibt.
Welche Basis-Schriftgröße verwendet der Konverter?: Er nutzt standardmäßig 16px, die übliche Browser-Root-Schriftgröße, und du kannst sie im Feld Root-Schriftgröße ändern. Diese Basis steuert jedes rem-, em- und %-Ergebnis, sodass sie zu deinem Stylesheet passen.
Warum ist 1pt hier gleich 1,3333px?: CSS definiert 1pt als 1/72 Zoll und 1px als 1/96 Zoll, sodass 1pt = 96/72 px = 1,3333px ist. Deshalb konvertiert 12pt zu genau 16px, der gängigen Fließtext-Größe.
Was ist der Unterschied zwischen em und rem?: rem ist relativ zur Root-Schriftgröße, während em relativ zur eigenen font-size des Elements ist. Dieses Tool nutzt zur Vereinfachung eine Basis für beide, sodass sie gleich ablesen; setze die Root-Schriftgröße, um die rem-Seite abzubilden.
Wird die Konvertierung auf einem Server ausgeführt?: Nein. Die CSS-Einheiten-Konvertierung läuft vollständig in deinem Browser mit einfacher Arithmetik, sodass die eingegebenen Werte auf deinem Gerät bleiben.