CSS-Einheiten-Rechner

Rechne einen Wert zwischen px, rem, em, %, vw, vh, pt, cm, mm und Zoll um, mit Schrift- und Bildschirmgröße nach Wahl. Mit px-in-rem-Tabelle.

Kostenlos
Ohne Anmeldung
Kein Datei-Upload
Windows, Mac, Android, iPhone

Werkzeug wird geladen…

Über dieses Werkzeug

Rechne jeden CSS-Wert auf einmal in alle anderen Einheiten um: Pixel, rem, em, Prozent, vw, vh, vmin, vmax, Punkt, Pica, Zoll, Zentimeter, Millimeter und Viertelmillimeter. Der Kontext (Schriftgröße von Seite und Elternelement, Größe von Bildschirm und Elternelement) ist einstellbar, und eine Tabelle zeigt gängige px/rem/pt-Entsprechungen.

Wann es hilft

Ein Mockup in rem umrechnen

Mockups geben Größen in Pixeln an; in rem umgerechnet respektiert die Website die vom Besucher gewählte Schriftgröße.

Ein Druck-Stylesheet vorbereiten

Punkt und Millimeter sind Druckeinheiten: Rechne deine px für ein originalgetreues gedrucktes Dokument um.

Einen vw-Wert verstehen

Wie viel sind 5vw auf einem 1440-px-Bildschirm? Gib die Bildschirmbreite an und lies die Größe in Pixeln ab.

So funktioniert's

Gib einen Wert und seine Einheit ein.
Lies die Umrechnung in alle anderen Einheiten ab.
Passe bei Bedarf den Kontext (Schriftgröße, Bildschirm) an und kopiere dann.

So funktioniert es

Jede Umrechnung läuft über das CSS-Pixel. Absolute Einheiten folgen den von CSS festgelegten Verhältnissen (1 in = 96 px = 2,54 cm = 72 pt = 6 pc); relative Einheiten nutzen die Kontextgrößen.

Die Ergebnisse werden auf vier Nachkommastellen gerundet, mehr als genug für jeden CSS-Wert. Deine Kontexteinstellungen bleiben in deinem Browser gespeichert.

Tipps für beste Ergebnisse

Nutze rem für Schriftgrößen und Abstände: Die Website passt sich der Schrifteinstellung des Besuchers an.
Behalte px für feine Ränder und Schatten.
Vermeide em bei verschachtelten Schriftgrößen: Der Effekt summiert sich.
vw allein für eine Schriftgröße blockiert den Zoom: Kombiniere es mit rem in clamp().

Häufige Probleme und Lösungen

Das rem-Ergebnis ist nicht wie erwartet

Die Wurzel-Schriftgröße deines Projekts ist vielleicht nicht 16 px: Gib sie im Kontext an.

%-Werte stimmen nicht

In CSS bezieht sich % nicht immer auf die Breite des Elternelements (Höhe, Schriftgröße…). Die Berechnung geht von der Breite aus.

Bildschirm-cm sind nicht 1 cm

Das ist normal: Am Bildschirm legt CSS 1 cm auf 37,8 px fest, unabhängig von der echten Pixelgröße.

Häufige Fragen

Wie viel sind 16 px in rem?

1 rem bei der Standard-Schriftgröße der Browser (16 px). Die Formel lautet: rem = px ÷ Wurzel-Schriftgröße.

Was ist der Unterschied zwischen rem und em?

rem bezieht sich auf die Schriftgröße der Seite (html-Element), em auf die des Elternelements. em summiert sich in verschachtelten Elementen, rem nicht.

Warum hängen %- und vw-Ergebnisse vom Kontext ab?

Diese Einheiten sind relativ: % zur Breite des Elternelements, vw und vh zur Bildschirmgröße. Gib diese Größen im Berechnungskontext an.

Sind CSS-Zentimeter und -Zoll echt?

Nicht am Bildschirm: CSS legt 1 Zoll = 96 px fest. Beim Drucken stimmen sie.

Immer noch ein Problem?

Frag im Forum: Kategorie, Werkzeug, Datenblatt deines Geräts und Testergebnis werden automatisch ausgefüllt.