CSS-Einheiten

CSS-Einheiten erklärt und umgerechnet: px, rem, em, pt, cm, vw, vh, dvh, ch und Container-Einheiten wie cqw, mit Rechner für alle Längeneinheiten.

CSS Einheiten umrechnen

Wert

Einheit

Wurzel-Schriftgröße (rem) in px

Schriftgröße Element/Eltern (em) in px

Zeilenhöhe (Faktor)

Viewport-Breite in px

Viewport-Höhe in px

Container-Breite in px

Container-Höhe in px

–

Einheit	Wert	Kopieren

Suchen

Gruppe

Absolute Längen

px

CSS-Pixel. 1px = 1/96 Zoll; entspricht auf hochauflösenden Displays mehreren Gerätepixeln. Beispiel: 1px

cm

Zentimeter: 1cm = 96/2,54 px ≈ 37,8px. Sinnvoll vor allem für Druck-Stylesheets. Beispiel: 1cm

mm

Millimeter: 1mm ≈ 3,78px. Beispiel: 1mm

Q

Viertelmillimeter: 1Q = 0,25mm. Beispiel: 1Q

in

Zoll: 1in = 2,54cm = 96px. Beispiel: 1in

pt

Punkt aus dem Satz: 1pt = 1/72 Zoll = 4/3 px ≈ 1,333px. 12pt entsprechen 16px. Beispiel: 12pt

pc

Pica: 1pc = 12pt = 16px. Beispiel: 1pc

Schriftbezogene Längen

em

Schriftgröße des Elements selbst; bei font-size die Schriftgröße des Elternelements. Verschachtelte em-Werte multiplizieren sich. Beispiel: 1.5em

rem

Schriftgröße des Wurzelelements (html), meist 16px. Verschachtelt sich nicht und skaliert mit der Browser-Einstellung. Beispiel: 1rem

ex

x-Höhe der aktuellen Schrift (Höhe des kleinen x), ungefähr 0,5em. Beispiel: 1ex

ch

Breite der Ziffer 0 der aktuellen Schrift. Gut für Textbreiten wie max-width: 65ch. Beispiel: 65ch

cap

Versalhöhe (Höhe der Großbuchstaben) der aktuellen Schrift. Beispiel: 1cap

ic

Breite des CJK-Zeichens „水“, für ostasiatische Typografie. Beispiel: 1ic

lh

Berechnete Zeilenhöhe (line-height) des Elements. Beispiel: 1lh

rlh

Zeilenhöhe des Wurzelelements. Beispiel: 1rlh

rex rch rcap ric

Wurzel-Varianten von ex, ch, cap und ic, bezogen auf das html-Element. Neuere Einheiten, Browserunterstützung prüfen. Beispiel: 1rch

Viewport-Einheiten

vw

1 % der Breite des Viewports (Anzeigebereichs). Beispiel: 100vw

vh

1 % der Höhe des Viewports. Auf Mobilgeräten entspricht vh meist der großen Höhe bei eingeklappter Adressleiste. Beispiel: 100vh

vmin

1 % der kleineren Seite des Viewports. Beispiel: 50vmin

vmax

1 % der größeren Seite des Viewports. Beispiel: 50vmax

dvh dvw

Dynamische Viewport-Höhe und -Breite: passt sich an, wenn Browserleisten auf Mobilgeräten ein- oder ausgeblendet werden. Beispiel: 100dvh

svh svw

Kleiner Viewport: Größe bei sichtbaren Browserleisten. Inhalt mit 100svh wird nie verdeckt. Beispiel: 100svh

lvh lvw

Großer Viewport: Größe bei ausgeblendeten Browserleisten. Beispiel: 100lvh

vi vb

1 % des Viewports in Inline- beziehungsweise Block-Richtung; bei horizontaler Schrift wie vw und vh. Beispiel: 50vi

dvmin dvmax svi lvb …

Die Präfixe s, l und d gibt es für alle Viewport-Einheiten (vw, vh, vi, vb, vmin, vmax). Beispiel: 100dvmin

Container-Einheiten

cqw

1 % der Breite des nächsten Größen-Containers (container-type: inline-size oder size). Beispiel: 50cqw

cqh

1 % der Höhe des Containers (nur mit container-type: size). Beispiel: 50cqh

cqi

1 % der Inline-Größe des Containers, bei horizontaler Schrift die Breite. Beispiel: 5cqi

cqb

1 % der Block-Größe des Containers. Beispiel: 5cqb

cqmin cqmax

Kleinerer beziehungsweise größerer Wert von cqi und cqb. Beispiel: 10cqmin

Prozent und Flex

%

Prozent eines Bezugswerts, der von der Eigenschaft abhängt: bei width die Breite des Elternblocks, bei font-size die Eltern-Schriftgröße, bei padding und margin immer die Breite. Beispiel: 50%

fr

Anteil des freien Platzes in CSS-Grid (grid-template-columns: 1fr 2fr). Beispiel: 1fr

Winkel

deg

Grad: Vollkreis 360deg. Beispiel: 45deg

rad

Radiant: Vollkreis 2π rad ≈ 6,2832rad. Beispiel: 1rad

grad

Gon: Vollkreis 400grad. Beispiel: 100grad

turn

Umdrehungen: 1turn = 360deg. Beispiel: 0.25turn

Zeit und Frequenz

s

Sekunden, etwa für transition und animation. Beispiel: 0.3s

ms

Millisekunden: 1000ms = 1s. Beispiel: 300ms

Hz kHz

Frequenz; in CSS definiert, von Browsern derzeit nicht genutzt. Beispiel: 1Hz

Auflösung

dppx x

Bildpunkte je CSS-Pixel; 2x entspricht einem Retina-Display. In image-set() und Media Queries. Beispiel: 2x

dpi

Punkte pro Zoll; 96dpi = 1dppx. Beispiel: 192dpi

dpcm

Punkte pro Zentimeter; 1dpcm ≈ 2,54dpi. Beispiel: 38dpcm

Alles läuft in Ihrem Browser. Eingaben verlassen Ihr Gerät nicht.

CSS Einheiten Übersicht und Umrechnung

Diese CSS Einheiten Übersicht erklärt alle Längen-, Winkel-, Zeit- und Auflösungseinheiten aus CSS Values and Units, von px über rem und em bis zu den Container-Einheiten wie cqw. Mit dem Rechner oben können Sie CSS Einheiten umrechnen: Wert und Einheit eingeben, Bezugsgrößen wie Wurzel-Schriftgröße, Viewport und Container festlegen, und Sie sehen das Ergebnis in allen Längeneinheiten. Für reine Umrechnungen zwischen Pixel und rem gibt es zusätzlich px in rem.

Der wichtigste Unterschied bei rem und em: rem bezieht sich immer auf die Schriftgröße des html-Elements, em auf die des aktuellen Elements (bei font-size auf die des Elternelements). Deshalb summieren sich em-Werte in verschachtelten Elementen, rem-Werte nicht. Beide wachsen mit, wenn Nutzer im Browser eine größere Schrift einstellen, was px-Angaben bei Schriftgrößen nicht tun.

Auch bei vw und vh gibt es Fallstricke: 100vh ist auf Smartphones oft höher als der sichtbare Bereich, weil die Adressleiste nicht abgezogen wird. Abhilfe schaffen svh (kleiner Viewport), lvh (großer Viewport) und dvh, das sich beim Scrollen dynamisch anpasst. 100vw schließt die Breite einer sichtbaren Scrollleiste ein und kann so waagerechtes Scrollen auslösen. Grenzen des Rechners: ex und ch werden mit 0,5em angenähert, weil die echten Werte von der Schrift abhängen; dvh, svh und lvh sind hier gleich vh.

Anleitung: CSS-Einheiten in 4 Schritten

Im Rechner „Wert“ und „Einheit“ eingeben, etwa 1,5 rem oder 50 vw.
Bezugsgrößen festlegen: Wurzel-Schriftgröße, Schriftgröße des Elements, Zeilenhöhe, Viewport- und Container-Maße.
Mit „Aktuelles Browserfenster übernehmen“ die echte Fenstergröße einsetzen und das Ergebnis in allen Längeneinheiten ablesen.
In der Übersicht über „Suchen“ oder „Gruppe“ eine Einheit nachschlagen, etwa Viewport- oder Container-Einheiten.

Typische Anwendungsfälle

Design in Code übersetzen: Pixelangaben aus einem Entwurf in rem umrechnen, damit die Schrift mit den Browsereinstellungen mitwächst.
Mobile Layouts: Prüfen, wie groß 100vh, dvh oder svh auf einem bestimmten Smartphone-Viewport ausfallen.
Druckstile: pt, cm und mm für ein Print-Stylesheet in Pixel umrechnen.
Komponenten mit Container Queries: Größen in cqw oder cqh für eine bestimmte Container-Breite berechnen.

Fragen

Häufige Fragen

Was ist der Unterschied zwischen rem und em?

rem bezieht sich auf die Schriftgröße des html-Elements, meist 16 Pixel. em bezieht sich auf die Schriftgröße des aktuellen Elements, bei der Eigenschaft font-size auf die des Elternelements. Verschachtelte em-Werte multiplizieren sich, rem-Werte nicht.

Wann sollte ich dvh statt vh verwenden?

Wenn ein Element genau den sichtbaren Bereich auf dem Smartphone füllen soll. 100vh entspricht meist der Höhe ohne Adressleiste und ist dadurch zu groß. 100dvh passt sich an die gerade sichtbare Höhe an, 100svh nimmt immer die kleinste Höhe.

Wie viele Pixel sind 1 rem?

So viele, wie die Schriftgröße des html-Elements beträgt. Ohne eigene Angabe und bei Standard-Einstellungen des Browsers sind das 16 Pixel. Ändert jemand die Schriftgröße im Browser, ändert sich auch der Wert von 1rem.

Wie rechne ich pt in px um?

In CSS gilt 1pt = 1/72 Zoll und 1px = 1/96 Zoll. Daher ist 1pt = 4/3 px. 12pt entsprechen 16px, 9pt entsprechen 12px.

Was bedeuten vw und vh?

1vw ist ein Prozent der Viewport-Breite, 1vh ein Prozent der Viewport-Höhe. Bei einem 1440 Pixel breiten Fenster sind 10vw also 144 Pixel. vmin und vmax nehmen die kleinere beziehungsweise größere der beiden Seiten.

Was bedeutet die Einheit ch in CSS?

1ch entspricht der Breite der Ziffer 0 in der aktuellen Schrift. Mit max-width: 65ch begrenzen Sie die Zeilenlänge von Fließtext auf eine gut lesbare Breite.

Wofür braucht man Container-Einheiten wie cqw?

1cqw ist ein Prozent der Breite des nächsten Query-Containers. So passen sich Komponenten an ihren Platz im Layout an statt an das ganze Fenster; der Container braucht dafür container-type.

Weitere Werkzeuge

Das könnte auch helfen

Alle 358 Werkzeuge