Kategorien
CSS

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: