CSS-Einheiten-Konverter

Was ist CSS-Einheiten-Konverter?

Der CSS-Einheiten-Konverter ist ein kostenloses Tool im Browser, das eine einzelne CSS-Länge in sieben gängige Einheiten übersetzt: px, rem, em, pt, %, vw und vh. Frontend-Entwickler und Webdesigner nutzen ihn, um ein Layout zwischen absoluten Pixeln und responsiven Einheiten zu überführen, um zu prüfen, wie viele Pixel ein rem bei einer eigenen Wurzelschriftgröße entspricht, oder um einen pt-Wert aus dem Druckbereich in Bildschirmpixel umzurechnen. Da rem von der Wurzelschriftgröße abhängt, em und % von der Schriftgröße des Elternelements und vw/vh vom Viewport, stellt der Konverter alle vier als anpassbare Einstellungen bereit. Gib einen Wert ein, wähle seine Ausgangseinheit, und jedes Ergebnisfeld aktualisiert sich gleichzeitig. Ein zum Einfügen bereites CSS-Snippet listet alle sieben Entsprechungen als font-size-Deklarationen auf.

So verwendest du CSS-Einheiten-Konverter

1. Öffne die Einstellungen und lege die Wurzelschriftgröße (die html-font-size, auf der rem basiert), die Schriftgröße des Elternelements (für em und %) sowie Breite und Höhe des Viewports (für vw und vh) fest.
2. Gib die Zahl, die du umwandeln möchtest, in das Wertfeld ein.
3. Wähle die Ausgangseinheit aus dem Dropdown „Von“: px, rem, em, pt, %, vw oder vh.
4. Lies jede Entsprechung in den beschrifteten, schreibgeschützten Ergebnisfeldern ab; sie werden alle automatisch neu berechnet, sobald du Wert, Einheit oder eine Einstellung änderst.
5. Kopiere das erzeugte CSS-Snippet, um alle sieben font-size-Entsprechungen direkt in dein Stylesheet einzufügen.

Beispiele

Wurzel 16px, Wert 16, Von px

rem = 1

Wurzel 10px, Wert 2, Von rem

px = 20

Wert 16, Von px

pt = 12

Häufig gestellte Fragen

Zwischen welchen Einheiten wird umgewandelt?

Sieben CSS-Längeneinheiten: px, rem, em, pt, %, vw und vh. Jede davon kann die Ausgangseinheit sein, und alle sieben Entsprechungen werden gleichzeitig angezeigt.

Warum muss ich Wurzel-, Eltern- und Viewport-Größen festlegen?

Diese Einheiten sind relativ. rem ist ein Vielfaches der Wurzelschriftgröße (html), em und % beziehen sich auf die Schriftgröße des Elternelements, und vw/vh sind Prozentwerte von Breite und Höhe des Viewports. Indem du diese in den Einstellungen festlegst, weiß der Konverter, wofür jede relative Einheit steht.

Wie wird pt behandelt?

CSS definiert 96px = 1in = 72pt, also entspricht 1pt 4/3 px und 1px gleich 0,75pt. Der Konverter verwendet dieses feste Verhältnis, unabhängig von Schriftgröße oder Viewport.

Was passiert, wenn ein Wert oder eine Einstellung ungültig ist?

Wenn der Wert keine endliche Zahl ist oder eine der Wurzel-, Eltern- oder Viewport-Größen fehlt, null oder negativ ist, zeigen die Ergebnisfelder einen Gedankenstrich (—) an, bis du gültige Zahlen angibst.

Wird etwas an einen Server gesendet?

Nein. Alle Umrechnungen laufen vollständig clientseitig in deinem Browser ab, ohne Upload und ohne Serveraufrufe, sodass die von dir eingegebenen Werte dein Gerät niemals verlassen.