CSS/Wertetypen/Maßangaben/Viewportabmessungen

Text-Info

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.

Details: caniuse.com

Beispiel ansehen …

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

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

ansehen …

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: 2vw;
}
h1 {
  font-size: 5vw;
}

Der Text hat eine Größe von 2% der Bildschirmbreite, die Überschrift von 5%.

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)
• Schlüsselwörter
  und Zeichenketten

Siehe auch

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

Weblinks

• http://www.w3.org/TR/css3-values/#viewport-relative-lengths
• https://developer.mozilla.org/de/docs/Web/CSS/length
• https://css-tricks.com/theres-more-to-the-css-rem-unit-than-font-sizing/