CSS-Einheiten umrechnen

Er hilft, wenn Designvorgaben, Stylesheets, Dokumente oder Komponentenbibliotheken eine andere Einheit als Ihr Projekt verwenden. Geben Sie Wert, Ausgangs- und Zieleinheit sowie die Schriftreferenz in Pixeln an. Der Rechner nutzt die standardisierten CSS-Verhältnisse und liefert eine übersichtliche Zahl samt kopierfertigem CSS-Wert.

Ausgang, Ziel und Referenz bewusst wählen

Geben Sie zuerst den Zahlenteil der CSS-Länge ohne Einheit ein und wählen Sie die passende Ausgangseinheit. Legen Sie px, em, rem oder pt als Ziel fest und tragen Sie eine positive Basisschriftgröße in Pixeln ein. Diese Basis bestimmt jede Umrechnung von oder nach em beziehungsweise rem. Bei einer Basis von 16 Pixeln werden beispielsweise 2rem zu 32px und 24px zu 1.5em. In echtem CSS bezieht sich em meist auf die berechnete Schriftgröße des betreffenden Elements oder seines Elternelements, rem dagegen auf das Wurzelelement. Da dieses Werkzeug ein einziges Basisfeld besitzt, verwenden Sie für em die lokale und für rem die Wurzel-Schriftgröße. Reine Umrechnungen zwischen px und pt sind mathematisch nicht von dieser Referenz abhängig; das Feld bleibt dennoch Pflicht, damit jede Anfrage einem einheitlichen, ausdrücklichen Vertrag folgt. Außerdem vermeiden Sie so die falsche Annahme, jede Website verwende eine 16px-Wurzel.

Rechenweg und Rundung verstehen

Der Rechner normalisiert den Ausgangswert zunächst in CSS-Pixel und überführt diese anschließend in die Zieleinheit. Relative Einheiten nutzen die angegebene Basis: Ein em- oder rem-Wert wird für Pixel mit der Basis multipliziert, ein Pixelwert für em oder rem durch sie geteilt. Punkte folgen dem CSS-Standard von 96 Pixeln und 72 Punkten pro Zoll; daher entspricht 1pt dem Wert 96 geteilt durch 72 CSS-Pixel. Der gemeinsame Weg über Pixel macht alle unterstützten Paare vorhersehbar, auch pt nach rem und em nach pt. Sie können null bis zwölf Dezimalstellen einstellen. Gerundet wird erst nach der vollständigen Berechnung, damit keine vermeidbaren Zwischenfehler entstehen. Die Antwort enthält normalisierte Einheiten, Basis, gerundete Zahl und eine Zeichenfolge wie 1.5rem. Bei identischen Einheiten wird der geprüfte Wert lediglich passend gerundet. Nicht endliche Zahlen und Basen kleiner oder gleich null werden abgelehnt.

Werte ohne Verlust der Gestaltungsabsicht einsetzen

Eine korrekte Zahl allein garantiert noch keine gute CSS-Migration. Klären Sie vor dem Ersetzen von Einheiten, ob die ursprüngliche Größe mit der Typografie skalieren sollte. Pixel und Punkte sind im Wesentlichen absolute CSS-Maße, während em und rem auf Schriftgrößen reagieren. Wird ein fester Rahmen von px in rem umgerechnet, ändert sich sein Verhalten bei einer neuen Wurzelschriftgröße; für Abstände kann das erwünscht, für Haarlinien überraschend sein. Testen Sie Deklarationen mit den kleinsten und größten unterstützten Schriftgrößen, besonders Zeilenhöhen, Steuerelemente und responsive Layouts. Dokumentieren Sie in Designsystemen die Basis jedes Durchlaufs. Die API arbeitet deterministisch und ohne Netzwerk, Zufall oder Uhr, weshalb sie sich für Build-Skripte, Generatoren und reproduzierbare Tests eignet. Prozentwerte, Viewport-Einheiten, Zentimeter und gemischte Ausdrücke werden nicht geschätzt, sondern abgelehnt. Wandeln Sie bei calc() jeden passenden Zahlenterm einzeln um und erhalten Sie die Ausdrucksstruktur.