Startseite » CSS: Viewport Width und Viewport Height

Photo from Unsplash - Sai Kiran Anagani

CSS: Viewport Width und Viewport Height

Heute gibt es nur einen kleinen Blogbeitrag mit ein bisschen CSS-Magic 🙂 In den letzten Monaten habe ich zwei Einheitsangaben recht lieb gewonnen: Viewport Width (vw) und Viewport Height (vh).

Mit diesen beiden Angaben kann ein Element die volle Breite und Höhe des verwendeten GerĂ€tes annehmen. Ebenso können Elemente unabhĂ€ngig von der tatsĂ€chlichen GrĂ¶ĂŸe des verwendeten GerĂ€tes (Smartphone, Tablet, Laptop, Desktop) positioniert werden. Ein kleines Beispiel:

.circle {
  background: red;
  border-radius: 50%;
  height: 50px;
  width: 50px;
  position: absolute;
  top: calc( 50vh - 25px );
  left: calc( 50vw - 25px );
}

Nicht nur fĂŒr die Positionierung oder GrĂ¶ĂŸenangaben können die Einheiten verwendet werden. Auch bei font-size ist der Einsatz möglich. Das schöne daran: Die Schriftart ist direkt responsiv, also auf kleinen GerĂ€ten kleiner, auf großen GerĂ€ten grĂ¶ĂŸer.

body {
  font-size: 5vw;
}

WeiterfĂŒhrende Links zu dem Thema: