CSS/Wertetypen/Viewport-Einheiten
- 15min
- leicht
Wenn wir Webseiten erstellen, möchten wir, dass sie auf möglichst vielen Geräten gut aussehen – egal ob auf einem großen Bildschirm, einem Laptop, einem Tablet oder einem Smartphone. Dafür müssen sich Elemente an unterschiedliche Bildschirmgrößen anpassen können.
Neben bekannten Einheiten wie Pixeln (px) und Prozentangaben (%) bietet CSS auch sogenannte Viewport-Einheiten (Viewport Units). Diese beziehen sich direkt auf die Größe des sichtbaren Browserfensters. Mit Einheiten wie vw und vh können wir festlegen, dass sich die Größe eines Elements automatisch an den Bildschirm anpasst.[1][2]
Inhaltsverzeichnis
„50vh“ anstelle von „height: 50%“?
Wenn du einem Element eine height: 50%;gibst, bedeutet das nicht automatisch 50% der Bildschirmhöhe. Die Prozentangabe bezieht sich immer auf die Höhe des Elternelements (Parent).
Das Problem: Wenn der Parent keine feste Höhe hat, weiß der Browser nicht, wovon er 50% berechnen soll.
.parent {
/* keine height gesetzt */
}
.child {
height: 50%;
}
- Der Browser schaut auf
.childund will rechnen "50% von welcher Höhe?" - Er schaut auf den Parent
.parentund fragt: "Wie hoch ist der?" - Der Parent hat keine definierte Höhe. Seine Höhe entsteht nur durch seinen Inhalt. Dadurch gibt es keine klare Referenz für die 50%.
Die Höhe wird aufautogesetzt und nach dem vorhandenen Inhalt berechnet.
Gerade bei Hero-Images und landing pages, die über die gesamte Seite erstrecken, will man oft Boxen nicht nach dem vorhandenen Inhalt, sondern mit Größen relativ zum Viewport dimensionieren:
.child {
height: 25vh;
width: 25vh;
}
Die Box erstreckt sich nun über 50% der verfügbaren Höhe (50vh) und 50 % der verfügbaren Breite (50vw). Bezugspunkt sind weder Eltern- noch Wurzelelement, sondenr die vom Browser ermittelten Abmessungen des Viewports.
Passende Schriftgrößen mit vw
Mit der Einheit vw (viewport width) kann man die Schriftgröße an die verfügbare Viewportgröße anpassen, sodass Schrift selbst auf kleinen Viewports immer lesbar bleibt. Der Irrtum, dass man auf kleineren Bildschirmen mit kleinerer Schrift mehr Inhalt unterbringen kann, entlarvt sich spätestens, wenn der Nutzer wieder mit den Fingern größer zoomen muss.
body {
font-size: max(2.5vw, 1.5rem);
}
h1 {
font-size: clamp(2.5rem, 5vw, 5rem);
}
Mithilfe der max()-Funktion wird sichergestellt, dass der Text im body nie kleiner als 1.5rem wird. auf großen Bildschrimen kann 5vh aber sehr groß werden.
Deshalb erhält die h1 als Wert eine clamp()-Funktion, die sicherstellt, dass det Text …
- nie kleiner als
2.5rem - möglichst
5vw - aber auch nicht größer als
5rem
wird.
Im normalen Leben erstrecken sich Elemente nicht über die gesamte Viewport-Breite, sodass ich heute lieber cqw verwende, die sich auf die Breite des Containers bezieht.
- Farbe und Dekoration
Basis-Tutorial zu …
- Text und Farbe
Überschriften interessant gestalten
stufenlos responsiv mit cqw
Größe abhängig vom Seitenverhältnis
Wenn ein Element auf den Bildschirm passen muss, verwende vmin (viewport minimum). Dabei wird immer die kleinere Abmessung des Viewports verwendet.
.circle {
width: 70vmin;
height: 70vmin;
border-radius: 50%;
}
Die Breite und die Höhe des Kreises sind jeweils 70% der kleineren Seite des Viewports.
Der Browser schaut also:
- Wie breit ist das Fenster?
- Wie hoch ist das Fenster?
- Welche Seite ist kleiner?
- Davon nimmt er 1% als 1vmin.
Parallel dazu gibt es vmax (viewport maximum).
Dynamische Viewports mit dvh
Auf Mobilgeräten, gerade mit kleinem Bildschirm, ist es oft so, dass der Browser die Bedienelemente für die Seitennavigation dynamisch ein- und ausblendet. Dadurch entsteht, je nach Anwenderaktion, eine kleine oder große Viewportvariante. Die CSS4 Values and Units Spezfikation besagt, dass sich vw und vh auf den Default Viewport des Browsers beziehen sollen, ohne festzulegen, ob dies die kleine Variante, die große Variante oder etwas dazwischen sein soll.
Wenn Webseitenentwickler nun eine Seite so gestalten möchten, dass ihr Inhalt auch bei sichtbaren Bedienelementen vollständig zu sehen ist, gelingt das nicht, wenn sich vh auf die große Viewportvariante bezieht. Um Entwicklern die Möglichkeit zu geben, genau festzulegen, ob sie sich auf Größe der kleinen Variante, der großen Variante oder der gerade aktiven Variante beziehen möchten, wurden Varianten der Viewport-Maße eingeführt, denen der Buchstabe l, s oder d vorangestellt wird.
- lvw, lvh
- Diese Maße beziehen sich immer auf die große Variante (large viewport)
- svw, svh
- Diese Maße beziehen sich immer auf die kleine Variante (small viewport)
- dvw, dvh
- Diese Maße beziehen sich immer auf die aktuell dargestellte Variante (dynamic viewport)
Die Spezifikation warnt vor den Unsicherheiten im Gebrauch des dynamischen Viewports:
- Die Abmessungen des dynamischen Viewports sind selbst dann nicht stabil, wenn der Viewport selbst unverändert bleibt. Diese Einheiten zu verwenden kann dazu führen, dass sich Inhalt in der Größe ändert, z. B. während der Anwender die Seite scrollt. Je nach Verwendung kann dies zu einem verwirrenden Benutzererlebnis führen oder die Performance beinträchtigen[3]. (Übersetzung von Selfhtml)
.hero {
min-height: 100dvh;
display: grid;
place-items: center;
}
}
Der Hero-Abschnitt soll genau so hoch sein wie das derzeit sichtbare Browserfenster.
Bei mobilen Browsern ändert sich jedoch die Größe der Browser-Benutzeroberfläche (Adressleiste, Symbolleiste). Dann wird der Abschnitt höher als der sichtbare Bereich und es kann zu unerwünschtem Scrollen kommen.
Siehe auch
Weblinks
- https://developer.mozilla.org/de/docs/Web/CSS/length
- https://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/
- https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/
- ↑ CSSWG.org: 6.1.2. Viewport-percentage Lengths: the *vw, *vh, *vi, *vb, *vmin, *vmax units (CSS Values and Units Module Level 4)
- ↑ MDN: Default viewport units
- ↑ CSS4 Levels and Units: 6.1.2.1. The Large, Small, and Dynamic Viewport Sizes, abgerufen am 11.05.2023
