CSS/Wertetypen/Maßangaben/Viewportabmessungen
- 15min
- leicht
vw (viewport width) und vh (viewport height) können Sie Abmessungen in Relation zum allerersten umschließenden Block (initial containing block) festlegen. Für Darstellungen auf Bildschirmen ist dieser Block identisch mit den Viewportabmessungen, im Drucklayout entspricht er dem bedruckbaren Bereich einer Seite.
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[1]. (Übersetzung von Selfhtml)
.beispiel1 {
width: 25vh;
height: 25vh;
}
Dieses Element wird quadratisch dargestellt. Seine Abmessungen betragen 25% der Höhe des Viewports
Inhaltsverzeichnis
passende Schriftgrößen
Mit der Einheit vw können Sie die Schriftgröße an die verfügbare Viewportgröße anpassen, sodass Schrift selbst auf kleinen Viewports immer lesbar bleibt.
body {
font-size: max(2vw, 1rem);
}
h1 {
font-size: max(5vw, 1rem);
}
Der Text hat eine Größe von 2% der Bildschirmbreite, die Überschrift von 5%. Text und Überschrift sind aber mindestens so groß wie die im Browser festegelegte Standardschriftgröße.
Größe abhängig vom Seitenverhältnis
Mit den Einheiten vmin und vmax können Sie die Größe abhängig vom Seitenverhältnis definieren.
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/
- ↑ CSS4 Levels and Units: 6.1.2.1. The Large, Small, and Dynamic Viewport Sizes, abgerufen am 11.05.2023
