Wofür werden die Maßeinheiten vh und vw bei der Angabe von Größen in CSS verwendet?

CSS verwendet die Maßeinheiten vh und vw, um Größen relativ zur Ansicht des Browsers anzugeben.

• vh (Viewport-Höhe): Repräsentiert 1% der Höhe des Viewports.
• vw (Viewport-Breite): Repräsentiert 1% der Breite des Viewports.

Ihr Hauptzweck ist die Erstellung eines responsiven Designs, bei dem die Größen der Elemente von den aktuellen Abmessungen des Browserfensters abhängen und nicht von festen Werten in Pixeln oder den Größen der Elternelemente. Dies ermöglicht eine einfache Skalierung von Elementen wie Vollbildabschnitten, Schriftarten, Bildern und anderen Komponenten, um eine angenehme Anzeige auf Geräten mit unterschiedlichen Bildschirmgrößen zu gewährleisten.

Zum Beispiel:

• height: 100vh; — macht das Element 100% der Höhe des Viewports.
• width: 50vw; — macht das Element 50% der Breite des Viewports.