Wer im modernen Webdesign arbeitet, kommt an Viewport-Einheiten nicht vorbei. Sie sind das Fundament für Layouts, die sich an jede Bildschirmgröße anpassen, ohne dass man für jede Auflösung eigene Werte definieren muss. Doch vw, vh, vmin und vmax stiften auch reichlich Verwirrung – besonders auf Mobilgeräten. Dieser Artikel räumt damit auf.
Was der Viewport überhaupt ist
Der Viewport ist der sichtbare Bereich des Browserfensters, in dem deine Webseite dargestellt wird – ohne Scrollbalken, Menüleisten oder Lesezeichenleisten des Browsers. Bei einem Desktop-Monitor ist das das innere Fenster, auf dem Smartphone die Fläche zwischen Statusleiste und unterem Rand. Viewport-Einheiten beziehen sich immer auf diese Fläche und passen sich automatisch an, wenn sie sich ändert.
Die vier klassischen Einheiten
- vw (viewport width): 1vw entspricht 1 Prozent der Viewport-Breite. Bei einem 1000 Pixel breiten Fenster sind
10vwalso100px. - vh (viewport height): 1vh entspricht 1 Prozent der Viewport-Höhe.
100vhfüllt damit theoretisch die gesamte sichtbare Höhe. - vmin: bezieht sich auf die kleinere der beiden Dimensionen. Im Hochformat ist das die Breite, im Querformat die Höhe.
- vmax: bezieht sich auf die größere der beiden Dimensionen – das Gegenteil von vmin.
Die Umrechnung zwischen Pixeln und diesen Einheiten erledigt der Viewport Rechner für dich. Du gibst eine Referenzbreite und einen Pixelwert ein und erhältst sofort den passenden vw- oder vh-Wert.
Viewport-Einheiten gegen Prozent
Ein verbreiteter Irrtum ist, dass vw und % das Gleiche tun. Das stimmt nicht: Prozentwerte beziehen sich auf das Eltern-Element, Viewport-Einheiten dagegen immer auf den gesamten Viewport. Ein Element mit width: 50% in einem schmalen Container wird schmal; ein Element mit width: 50vw nimmt dagegen immer die halbe Fensterbreite ein, egal wie verschachtelt es ist. Genau diese Unabhängigkeit vom Container macht Viewport-Einheiten so nützlich – aber auch gefährlich, wenn man sie verwechselt.
Das berüchtigte 100vh-Problem auf Mobilgeräten
Wenn du schon einmal versucht hast, mit height: 100vh eine bildschirmfüllende Sektion auf dem Smartphone zu bauen, kennst du das Ärgernis: Der Inhalt wird einen Tick zu hoch und verschwindet teilweise hinter der dynamischen Adressleiste des Browsers. Der Grund: Mobile Browser blenden die Adressleiste beim Scrollen ein und aus, wodurch sich die sichtbare Höhe ständig ändert. 100vh bezieht sich aber auf den größten möglichen Viewport – also den Zustand mit ausgeblendeter Leiste.
Die CSS Working Group hat dafür neue Einheiten eingeführt, die dieses Problem lösen. Sie ergänzen die klassischen vier und sind heute breit unterstützt.
Die neuen dynamischen Einheiten: svh, lvh und dvh
- svh (small viewport height): bezieht sich auf den kleinsten Viewport-Zustand, also mit eingeblendeter Browser-UI. Inhalt passt damit immer komplett.
- lvh (large viewport height): bezieht sich auf den größten Zustand, mit ausgeblendeter UI – entspricht dem alten
100vh. - dvh (dynamic viewport height): passt sich live an, je nachdem ob die Adressleiste gerade sichtbar ist oder nicht. Für eine bildschirmfüllende Hero-Sektion ist
100dvhheute meist die beste Wahl.
Analog gibt es auch svw, lvw und dvw für die Breite, die in der Praxis aber seltener gebraucht werden, da die Breite mobiler Browser stabiler ist.
Sinnvolle Einsatzgebiete
Viewport-Einheiten glänzen bei bildschirmfüllenden Hero-Bereichen, bei quadratischen Elementen, die immer im richtigen Verhältnis zum Bildschirm bleiben sollen (hier hilft vmin), und bei großen Display-Überschriften, die mit dem Fenster mitwachsen. Für Letzteres kombiniert man sie idealerweise mit clamp(), damit die Schrift nicht ins Unermessliche wächst oder unleserlich klein wird.
Genau diese Kombination beschreibt unser Beitrag zum Fluid Spacing Generator im Detail. Wenn du Größen für den Druck statt für den Bildschirm umrechnen musst, ist dagegen der DPI Pixel Rechner das passende Werkzeug. Alle weiteren Helfer findest du gebündelt unter kotsch.tech/webtools.
Worauf du achten solltest
Setze Schriftgrößen nie ausschließlich in vw, weil sich solcher Text nicht mehr zoomen lässt – das ist ein Barrierefreiheits-Problem. Vermeide außerdem horizontalen Überlauf: Da 100vw die Breite inklusive Scrollbalken meint, kann es auf dem Desktop minimal über den Inhaltsbereich hinausragen und eine ungewollte horizontale Scrollleiste erzeugen. In solchen Fällen ist 100% auf dem Body oft die sicherere Wahl.
Häufige Fragen
Was ist der Unterschied zwischen vmin und vmax praktisch?
vmin garantiert, dass ein Element immer vollständig sichtbar bleibt, egal ob Hoch- oder Querformat – ideal für Symbole oder quadratische Karten. vmax nutzt dagegen die größere Dimension und eignet sich für bildschirmfüllende Hintergründe.
Werden dvh, svh und lvh überall unterstützt?
Ja, alle aktuellen Versionen von Chrome, Firefox, Safari und Edge kennen die dynamischen Einheiten. Für sehr alte Browser kannst du 100vh als Fallback davorsetzen.
Wie rechne ich px in vw um?
Du teilst den Pixelwert durch die Referenzbreite und multiplizierst mit 100. Der Viewport Rechner nimmt dir diese Rechnung komplett ab und liefert den fertigen Wert.