CSS3: Viewport Units – Neue Einheiten für responsive Designs

Dank prozentualer Angaben ist es ein Leichtes, Webdesigns zu entwickeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpassen. Gerade wenn es darum geht, eine Website für verschiedene Medien wie Tablets und Smartphones zu entwickeln, ist dies eine gängige Praxis. Textblöcke, Bilder und andere Elemente passen sich so automatisch jeder Größe an.

Doch Angaben in Prozent sind nicht immer angebracht, um Größen in Relation zum Browserfenster zu definieren. Gerade bei Schriften kommt man hier nicht weiter. Denn eine Schriftgröße lässt sich mit Prozent als Einheit nicht in Relation zur Breite des Browserfensters definieren. In CSS3 gibt es neue Einheiten, die genau dieses Problem lösen.

Viewport Units für flexiblere Größenangaben

Die Einheiten „vw“ und „vh“ definieren eine Breite beziehungsweise Höhe in Relation zur Fenstergröße. Dabei steht „vw“ für „view width“ und „vh“ für „view height“. Diese sogenannten Viewport Units ermöglichen es, Größen in Relation zur jeweils aktuellen Größe des Browserfensters zu definieren.

div {
  width: 50vw;
  height: 100vh;
}

Das Beispiel legt die Größe eines Elementes auf 50 Prozent der Fensterbreite und 100 Prozent der Fensterhöhe fest. Während prozentuale Angaben immer in Relation zum jeweiligen Elternelement stehen, ist die Angabe mit Viewport Units immer in Relation zur Fenstergröße.

Außerdem ist es möglich, eine Höhe auch in Relation zur Breite zu definieren – und umgekehrt natürlich ebenso.

div {
  height: 50vw;
}

Im Beispiel ist die Höhe eines Elementes auf 50 Prozent der Fensterbreite gesetzt. Verkleinert man das Browserfenster in der Breite, ändert sich damit die Höhe des Elementes.

Immer die passende Schriftgröße dank Viewport Units

Für ein stimmiges Design ist es wichtig, dass je nach Gerät die Schrift in einer angemessenen Größe dargestellt wird. Gerade wer auf große Überschriften setzt, muss zusehen, dass diese auf den verschiedenen Display- beziehungsweise Fenstergrößen gut lesbar dargestellt werden.

Mit den Viewport Units können Schriften endlich in Relation zur Breite des Browserfensters dargestellt werden.

h1 {
  font-size: 10vw;
}

Im Beispiel wird die Schriftgröße auf 10 Prozent der Fensterbreite festgelegt. Dank der Viewport Unit „vw“ passt sich die Schriftgröße des „h1“-Elements immer der Breite des Fensters an.

Größe abhängig vom Seitenverhältnis definieren

Neben den Einheiten „vw“ und „vh“ gibt es noch die Einheiten „vmin“ und „vmax“. Eine Angabe mit „vmin“ definiert eine Größe entweder in Relation zur Fensterbreite oder -höhe – je nachdem, welche Größe die kleinere ist. Ist die Breite des Browserfensters kleiner als die Höhe, wird bei „vmin“ die Breite genommen.

Analog dazu gibt es „vmax“. Hierbei wird der jeweils größere Wert gewählt.

div {
  width: 2vmin;
}

Im Beispiel erhält das Element eine Breite von 20 Prozent der Fensterbreite, wenn diese kleiner ist als die Fensterhöhe. Ist die Höhe kleiner als Breite, wird dem Element eine Breite von 20 Prozent der Fensterhöhe zugewiesen.

Browser-Support

Die Viewport Units werden mittlerweile von allen modernen Browsern unterstützt. Der Internet Explorer ist ab Version 10 dabei, Firefox ab 19 und Chrome ab 20.