CSS-Einheiten-Umrechner
Geben Sie einen Wert einmal ein und sehen Sie ihn in jeder CSS-Längeneinheit — px, rem, em, pt, %, vw und vh — mit der Wurzel-Schriftgröße, der Schriftgröße des Elternelements und dem Viewport Ihrer Wahl. Kopieren Sie jedes Ergebnis mit einem Tipp.
Häufige Umrechnungen
In jede Einheit umgerechnet
rem, em und % hängen von der Schriftgröße ab; vw und vh hängen vom Viewport ab. px und pt haben ein festes Verhältnis (1pt = 1,3333px). Passen Sie den Kontext oben an, wenn Ihre Standardwerte abweichen.
px-zu-rem-Referenz (Wurzel = 16px)
| px | rem | pt |
|---|---|---|
| 8px | 0.5rem | 6pt |
| 10px | 0.625rem | 7.5pt |
| 12px | 0.75rem | 9pt |
| 14px | 0.875rem | 10.5pt |
| 16px | 1rem | 12pt |
| 18px | 1.125rem | 13.5pt |
| 20px | 1.25rem | 15pt |
| 24px | 1.5rem | 18pt |
| 32px | 2rem | 24pt |
| 48px | 3rem | 36pt |
Bei der Standard-Wurzel-Schriftgröße von 16px teilen Sie die Pixel durch 16, um rem zu erhalten, und multiplizieren Sie mit 0,75, um Punkte zu erhalten.
Über den CSS-Einheiten-Umrechner
CSS bietet mehrere Möglichkeiten, eine Länge auszudrücken, und die richtige Wahl entscheidet darüber, ob ein Layout elegant skaliert oder zerbricht. Dieser Umrechner wandelt einen einzigen Wert auf einmal in alle gängigen CSS-Einheiten um. px (Pixel) ist die absolute Referenzeinheit — in CSS ist ein Pixel als 1/96 Zoll definiert. rem bezieht sich auf die Wurzel-Schriftgröße des Dokuments (das <html>-Element), die standardmäßig 16px beträgt, sodass 1rem = 16px und 1,5rem = 24px; rem ist der moderne Standard für die Größenangabe, denn das Ändern eines einzigen Wurzelwerts skaliert die gesamte Seite neu, was hervorragend für die Barrierefreiheit ist. em bezieht sich auf die Schriftgröße des Elternelements und summiert sich daher bei Verschachtelung. pt (Punkt) ist die Druckeinheit, festgelegt auf 1pt = 1/72 Zoll = 1,3333px, sodass 12pt = 16px. % im Kontext der Schriftgröße entspricht der Schriftgröße des Elternelements, sodass 100% dasselbe wie 1em ist. vw und vh sind 1% der Viewport-Breite bzw. -Höhe — ideal für fließende Vollbild-Layouts. Legen Sie im erweiterten Bereich Ihre eigene Wurzel-Schriftgröße, Eltern-Schriftgröße und Viewport-Größe fest; die sinnvollen Standardwerte (16/16/1920×1080) decken den alltäglichen Fall px↔rem von Haus aus ab.
So rechnen Sie CSS-Einheiten um
- 1 Geben Sie einen Wert ein und wählen Sie die Einheit, in der er vorliegt (zum Beispiel 24 px oder 1,5 rem).
- 2 Lesen Sie den entsprechenden Wert in jeder anderen Einheit im Ergebnisraster ab und tippen Sie auf die Kopierschaltfläche einer beliebigen Karte, um ihn einfügebereit zu kopieren (z. B. „1.5rem“).
- 3 Öffnen Sie den erweiterten Bereich, um die Wurzel-Schriftgröße, die Schriftgröße des Elternelements oder die Viewport-Größe zu ändern, falls Ihr Projekt nicht die Standardwerte 16px / 1920×1080 verwendet.
Die Umrechnungsformeln
Jede Umrechnung läuft über Pixel mithilfe der festen CSS-Verhältnisse: rem = px ÷ Wurzel-Schriftgröße (Standard 16) — also px = rem × 16. em = px ÷ Eltern-Schriftgröße (Standard 16). pt = px × 0,75, denn 1px = 1/96 Zoll und 1pt = 1/72 Zoll, was 1pt = 96/72 px = 1,3333px und 1px = 0,75pt ergibt. % = px ÷ Eltern-Schriftgröße × 100 (Schriftgrößen-Prozentsatz, wobei 100% = der Schriftgröße des Elternelements, identisch mit 1em). vw = px ÷ Viewport-Breite × 100, und vh = px ÷ Viewport-Höhe × 100. Mit den Standardwerten bedeutet das: 16px = 1rem = 1em = 100% = 12pt = 0,8333vw = 1,4815vh. Wird eine Basis wie die Wurzel-Schriftgröße auf 0 gesetzt, wird die zugehörige Einheit undefiniert und als „—“ statt als unendlich angezeigt.
Häufig gestellte Fragen
Wie viele px sind 1rem?
Standardmäßig ist 1rem = 16px, weil sich rem auf die Wurzel-Schriftgröße (<html>) bezieht und Browser diese ab Werk auf 16px setzen. Somit ist 1,5rem = 24px und 2rem = 32px. Wenn Sie die Wurzel-Schriftgröße ändern — zum Beispiel auf 10px, um die Rechnung zu vereinfachen — entspricht 1rem diesem Wert (16px würden zu 1,6rem). Legen Sie Ihre eigene Wurzel-Schriftgröße im erweiterten Bereich fest, und der Umrechner berechnet sofort neu.
Wie lautet die Formel von px zu rem?
rem = px ÷ Wurzel-Schriftgröße, und umgekehrt px = rem × Wurzel-Schriftgröße. Bei der Standard-Wurzel von 16px teilen Sie einen Pixelwert durch 16, um rem zu erhalten: 24px ÷ 16 = 1,5rem, 10px ÷ 16 = 0,625rem. rem wird für Schriftgrößen und Abstände gegenüber px bevorzugt, weil es die Schriftgrößen-Einstellung des Browsers des Nutzers respektiert, was besser für die Barrierefreiheit ist.
Was ist die Standard-Wurzel-Schriftgröße?
Die Standard-Wurzel-Schriftgröße in jedem großen Browser beträgt 16px und wird auf das <html>-Element angewendet. Sie ist die Grundlage für rem, sodass 1rem = 16px ist, sofern Sie (oder ein Stylesheet) sie nicht überschreiben. Dieser Umrechner verwendet 16px als Standard sowohl für die Wurzel- als auch die Eltern-Schriftgröße; Sie können beide im erweiterten Bereich an Ihr eigenes Projekt anpassen.
Was ist der Unterschied zwischen px und pt?
px (Pixel) ist die Standardeinheit für Bildschirme und wird in CSS als 1/96 Zoll definiert. pt (Punkt) ist die traditionelle Druck-/Typografieeinheit, gleich 1/72 Zoll. Damit ist das Verhältnis fest: 1pt = 96/72 px ≈ 1,3333px und 1px = 0,75pt. Also 12pt = 16px, weshalb ein 12pt-Druckdokument und eine 16px-Bildschirmüberschrift gleich groß aussehen. Verwenden Sie px (oder rem) für das Web und reservieren Sie pt für Druck-Stylesheets.
Verwandte Werkzeuge
Bauen Sie weiter auf UnitConv. Konvertieren Sie Farben zwischen HEX, RGB und HSL mit dem Farbkonverter, erzeugen Sie CSS-Verläufe, prüfen Sie WCAG-Kontrastverhältnisse, ermitteln Sie Seitenverhältnisse und erkunden Sie Längeneinheiten über das Web hinaus im Haupt-Einheiten-Umrechner.