Viewport-Einheiten: vw, vh und dvh

Viewport-Einheiten beziehen sich auf die Größe des Browser-Viewports (den sichtbaren Bereich des Browserfensters). Sie ermöglichen Layouts und Typografie, die sich an den verfügbaren Bildschirmbereich anpassen.

1vw = 1 % der Viewport-Breite. 100vw füllt die gesamte Viewport-Breite aus. Das ist nützlich für Elemente über die gesamte Breite, ohne die Komplikationen von Prozentangaben.

1vh = 1 % der Viewport-Höhe. 100vh füllt die gesamte Viewport-Höhe aus. Das wird häufig für Hero-Bereiche und Modals im Vollbild verwendet.

In mobilen Browsern ändert sich die Viewport-Höhe, wenn die Browseroberfläche (Adressleiste) beim Scrollen ein- oder ausgeblendet wird. 100vh kann die Browseroberfläche uneinheitlich ein- oder ausschließen, sodass Inhalte teilweise verborgen werden.

dvh (dynamic viewport height) wird dynamisch aktualisiert und bildet die tatsächlich sichtbare Höhe ab, nachdem die Browseroberfläche angepasst wurde. Damit wird das mobile 100vh-Problem gelöst.

CSS stellt außerdem svh (kleine Viewport-Höhe – schließt die Browseroberfläche immer aus) und lvh (große Viewport-Höhe – als wäre die Oberfläche ausgeblendet) bereit. Damit lässt sich das Verhalten des mobilen Viewports fein steuern.

Wenn Sie vw für font-size verwenden, wird die Schrift entsprechend der Bildschirmgröße skaliert:

100vw schließt auf Desktopgeräten die Breite der Bildlaufleiste ein. Bei unvorsichtiger Verwendung kann dies zu horizontalem Überlauf führen. Bevorzugen Sie bei Block-Elementen width: 100% und reservieren Sie vw für spezielle Fälle.

1vmin = 1 % der kleineren Viewport-Dimension (Breite oder Höhe). 1vmax = 1 % der größeren Dimension. Das ist nützlich für quadratische Container, die sich an Änderungen der Ausrichtung anpassen.

Wie bei der Höhe stellt CSS für die Breite svw, lvw und dvw bereit. Die dynamischen Varianten (dvw, dvh) sind auf Mobilgeräten am nützlichsten.

Häufige Muster für Viewport-Einheiten:

• min-height: 100dvh – vollflächige, für Mobilgeräte geeignete Bereiche
• height: 100svh – feste UI-Panels
• font-size: clamp(1rem, 2.5vw, 2rem) – fließende Überschriften
• width: min(800px, 90vw) – Container mit sicherer Breite

vw und vh entsprechen 1 % der Viewport-Breite bzw. -Höhe. Auf Mobilgeräten ist vh wegen der Browseroberfläche unzuverlässig. Verwenden Sie dvh für dynamische, auf Mobilgeräten präzise vollflächige Layouts. vmin und vmax reagieren auf die kleinere bzw. größere Viewport-Dimension.