CSS-Einheiten in px, rem und em umrechnen

CSS-Einheiten passend zu Basis und Viewport umrechnen

Mit dem CSS-Einheiten-Umrechner übertragen Sie numerische Werte zwischen px, em, rem, %, vw, vh, pt, cm, mm und in. Das ist hilfreich, wenn Sie einen vorhandenen CSS-Wert in eine andere Einheit überführen oder einen Wert für eine bestimmte Basisgröße beziehungsweise Viewport-Größe berechnen möchten. Die Umrechnung verwendet zunächst einen Pixelwert und leitet daraus die gewünschte Zieleinheit ab.

So führen Sie die Umrechnung durch

1. Geben Sie den Zahlenwert ein. Wenn Sie dieses Feld leer lassen, wird 16 verwendet.
2. Tragen Sie die Quelleneinheit ein, zum Beispiel px, em, % oder vw. Ohne Angabe wird px angenommen. Für die Zieleinheit gilt standardmäßig rem.
3. Wählen Sie oder tragen Sie die Zieleinheit ein. Unterstützt werden px, em, rem, %, vw, vh, pt, cm, mm und in.
4. Prüfen Sie bei relativen Einheiten die Zusatzwerte: Die Basisgröße wird standardmäßig mit 16 angesetzt, die Viewport-Breite mit 1920 und die Viewport-Höhe mit 1080. Ändern Sie diese Werte, wenn Ihre Berechnung auf einer anderen CSS-Basis oder einem anderen Viewport beruht.
5. Starten Sie die Umrechnung und lesen Sie den konvertierten Wert sowie den zugrunde liegenden Pixelwert ab. Beide Werte werden bei einem erfolgreichen Ergebnis auf vier Dezimalstellen gerundet.

Bei einer Quelle in em oder rem wird der Zahlenwert mit der Basisgröße multipliziert. Prozentwerte werden mit der Basisgröße multipliziert und durch 100 geteilt. vw verwendet die Viewport-Breite, vh die Viewport-Höhe. Absolute Einheiten werden über feste Umrechnungsfaktoren in Pixel überführt: Ein Punkt entspricht 1,33333 Pixeln, ein Zentimeter 37,795 Pixeln, ein Millimeter 3,7795 Pixeln und ein Zoll 96 Pixeln.

Ergebnis richtig einordnen

Das Ergebnis besteht aus dem umgerechneten Zielwert und dem dazwischen berechneten Pixelwert. Für em und rem wird der Pixelwert durch die Basisgröße geteilt. Für Prozent wird er mit 100 multipliziert und durch die Basisgröße geteilt. Bei vw und vh wird jeweils die passende Viewport-Dimension verwendet. Deshalb kann derselbe Ausgangswert je nach Basisgröße, Breite oder Höhe zu einem anderen Zielwert führen.

Ein Beispiel: Geben Sie 16 als Wert, px als Quelle und rem als Ziel ein und lassen Sie die Basisgröße auf 16. Das verifizierte Ergebnis hat den Zielwert 1.0; zusätzlich wird der Zwischenwert in Pixeln ausgegeben. Bei einer anderen Basisgröße sollten Sie das Ergebnis entsprechend dieser Einstellung bewerten.

Die Umrechnung behandelt Einheitenbezeichnungen in Kleinbuchstaben. Eine nicht erkannte Quelleneinheit wird so behandelt, als läge der Zahlenwert bereits in Pixeln vor. Bei einer nicht erkannten Zieleinheit bleibt der Pixelwert unverändert. Das ist keine Prüfung, ob eine Bezeichnung in jedem CSS-Kontext geeignet ist. Bei einer Ausnahme wird ein erfolgloses Ergebnis mit dem Ausnahme-Text zurückgegeben, statt die Ausnahme weiterzugeben. Ist die Basisgröße null, ergibt die Umrechnung nach em, rem oder Prozent null. Bei einer Viewport-Dimension von null ergibt die jeweilige Umrechnung nach vw oder vh ebenfalls null.

Praktisches Beispiel

Eine Person möchte einen festen Wert von 16 px in rem für eine Basisgröße von 16 umrechnen.

Geben Sie 16 als Wert ein, setzen Sie px als Quelleneinheit und rem als Zieleinheit und verwenden Sie die Basisgröße 16.

Das erfolgreiche Ergebnis enthält den Zielwert 1.0 sowie den auf vier Dezimalstellen gerundeten Pixel-Zwischenwert.

Einschränkungen

• Nicht erkannte Einheiten werden nicht als ungültig zurückgewiesen: Die Quelleneinheit wird wie Pixel behandelt, eine nicht erkannte Zieleinheit lässt den Pixelwert unverändert. Bei einer Ausnahme erscheint ein erfolgloses Ergebnis mit dem Ausnahme-Text.

Häufige Fehler

• Falsche Bezugsgröße: Wird ein em-, rem-, Prozent-, vw- oder vh-Wert mit einer unpassenden Basis- oder Viewport-Größe berechnet, ändern sich die Ergebnisse. Korrigieren Sie die entsprechenden Zusatzwerte vor dem Start der Umrechnung.

Häufige Fragen

Welche CSS-Einheiten kann ich umrechnen?

Ja. Unterstützt werden px, em, rem, %, vw, vh, pt, cm, mm und in als Quell- oder Zieleinheit.

Welche Standardwerte gelten für die Eingabe?

Wenn Sie den Wert weglassen, wird 16 verwendet. Ohne Quelleneinheit gilt px, ohne Zieleinheit rem; die Standard-Basisgröße beträgt 16.

Warum brauche ich bei relativen Einheiten eine Basis- oder Viewport-Größe?

Ja. Für em, rem und Prozent wird die Basisgröße verwendet; vw bezieht sich auf die Viewport-Breite und vh auf die Viewport-Höhe.