CSS/Wertetypen/Maßangaben/Viewportabmessungen

15min

leicht

• Längenangaben in CSS

Mit den Viewportabmessungen (Viewport Units) 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. (Übersetzung von Selfhtml)

Browserunterstützung
caniuse.com

Beispiel ansehen …

.beispiel1 {
  width: 25vh;
  height: 25vh;
}

Dieses Element wird quadratisch dargestellt. Seine Abmessungen betragen 25% der Höhe des Viewports

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.

Beispiel

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.

• relative Einheiten
• Wertetypen in CSS
  (Übersicht)
• Namen und Zeichenketten

Siehe auch

• Übersicht der relativen Längenmaße in CSS

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/