CSS-Einheiten-Konverter

Zwischen CSS-Einheiten konvertieren: px, rem, em, vw, vh, pt, cm und mehr

Was ist das und wie funktioniert es?

Ein CSS-Einheiten-Konverter übersetzt eine Größe zwischen den Einheiten, die CSS fürs Layout nutzt — px, rem, em, vw, vh, pt, cm und mehr — sodass Sie einen Wert sauber von einer Einheit in eine andere überführen. CSS bietet viele Einheiten, weil sie verschiedene Bedürfnisse abdecken: Pixel sind fest und absolut, rem und em sind relativ zu Schriftgrößen für skalierbare Typografie, und vw und vh sind relativ zum Viewport für responsive Layouts. Konvertieren lässt Sie dieselbe Größe in der Einheit ausdrücken, die eine bestimmte Regel nutzen soll.

Am wichtigsten sind die relativen Umrechnungen, weil sie vom Kontext abhängen: Ein rem sind Vielfache der Wurzel-Schriftgröße (üblich 16px), ein em ist relativ zur eigenen Schriftgröße des Elements, und Viewport-Einheiten sind Prozente des Fensters. Diese Abhängigkeit macht das Umrechnen von Hand fehleranfällig — 1,5rem sind nur 24px, wenn die Wurzel 16px ist. Dieses Tool behandelt die Basisgrößen für Sie, sodass Sie genaue Werte erhalten, und hilft Ihnen, skalierbare, responsive Stile zu bauen, statt überall Pixel festzucodieren. Es läuft im Browser.

Anwendungsfälle

• Zu skalierbaren Einheiten wechseln: Wandeln Sie einen Pixelwert in rem, damit Abstände und Text mit der Schriftgrößeneinstellung des Nutzers skalieren.
• Ein Design in anderen Einheiten treffen: Wandeln Sie die px-Angabe eines Designers in das rem oder em, das Ihr Stylesheet nutzt.
• Mit responsiven Einheiten arbeiten: Sehen Sie, wie viele Pixel ein vw- oder vh-Wert bei einer gegebenen Viewport-Größe ergibt.

Häufige Fragen

Was ist der Unterschied zwischen px, rem und em?

Ein Pixel (px) ist eine feste, absolute Einheit. Ein rem ist relativ zur Schriftgröße des Wurzelelements, skaliert also seitenweit konsistent. Ein em ist relativ zur Schriftgröße des aktuellen Elements, kann sich also beim Verschachteln aufaddieren. rem wird meist für vorhersehbare, skalierbare Größen bevorzugt.

Wie viele Pixel sind 1rem?

Es hängt von der Wurzel-Schriftgröße ab. Standardmäßig nutzen Browser 16px, also entspricht 1rem 16px und 1,5rem 24px — wird die Wurzel-Schriftgröße aber geändert, ändert sich jeder rem-Wert mit. Diese Basis-Abhängigkeit ist, warum dieser Konverter eine Wurzelgröße verlangt oder annimmt.

Wann sollte ich vw und vh nutzen?

Viewport-Einheiten (vw, vh) sind Prozente der Fensterbreite und -höhe, ideal also für Elemente, die mit dem Bildschirm skalieren sollen — vollhohe Abschnitte, fließender Hero-Text oder responsive Abstände. Sie ändern sich beim Verändern des Viewports, anders als feste px-Werte.

Warum relative Einheiten statt Pixel nutzen?

Relative Einheiten wie rem respektieren die Schriftgrößen-Präferenzen des Nutzers und skalieren elegant über Geräte, was Barrierefreiheit und Responsivität verbessert. Überall Pixel festzucodieren ignoriert diese Einstellungen und macht Layouts starr, weshalb das Umwandeln in relative Einheiten oft lohnt.

CSS

Box-Shadow-Generator · Border-Radius-Generator · Flexbox-Generator · CSS-Grid-Generator · Text-Shadow-Generator · CSS-Animations-Generator