Spaces. Smartes Cloud Hosting für anspruchsvolle Webprojekte. Loslegen und Spaces testen. Von Mittwald.
Denis Potschien 3. Juni 2014

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

Dank pro­zen­tua­ler Angaben ist es ein Leichtes, Webdesigns zu ent­wi­ckeln, die sich der Breite und bei Bedarf auch der Höhe des Browserfensters anpas­sen. Gerade wenn es dar­um geht, eine Website für ver­schie­de­ne Medien wie Tablets und Smartphones zu ent­wi­ckeln, ist dies eine gän­gi­ge Praxis. Textblöcke, Bilder und ande­re Elemente pas­sen sich so auto­ma­tisch jeder Größe an.

CSS3: Viewport Units

Doch Angaben in Prozent sind nicht immer ange­bracht, um Größen in Relation zum Browserfenster zu defi­nie­ren. Gerade bei Schriften kommt man hier nicht wei­ter. Denn eine Schriftgröße lässt sich mit Prozent als Einheit nicht in Relation zur Breite des Browserfensters defi­nie­ren. In CSS3 gibt es neue Einheiten, die genau die­ses Problem lösen.

Viewport Units für flexiblere Größenangaben

Die Einheiten „vw“ und „vh“ defi­nie­ren eine Breite bezie­hungs­wei­se Höhe in Relation zur Fenstergröße. Dabei steht „vw“ für „view width“ und „vh“ für „view height“. Diese soge­nann­ten Viewport Units ermög­li­chen es, Größen in Relation zur jeweils aktu­el­len Größe des Browserfensters zu defi­nie­ren.

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 pro­zen­tua­le Angaben immer in Relation zum jewei­li­gen Elternelement ste­hen, ist die Angabe mit Viewport Units immer in Relation zur Fenstergröße.

Außerdem ist es mög­lich, eine Höhe auch in Relation zur Breite zu defi­nie­ren – und umge­kehrt natür­lich eben­so.

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 stim­mi­ges Design ist es wich­tig, dass je nach Gerät die Schrift in einer ange­mes­se­nen Größe dar­ge­stellt wird. Gerade wer auf gro­ße Überschriften setzt, muss zuse­hen, dass die­se auf den ver­schie­de­nen Display- bezie­hungs­wei­se Fenstergrößen gut les­bar dar­ge­stellt wer­den.

Mit den Viewport Units kön­nen Schriften end­lich in Relation zur Breite des Browserfensters dar­ge­stellt wer­den.

h1 {
  font-size: 10vw;
}

Im Beispiel wird die Schriftgröße auf 10 Prozent der Fensterbreite fest­ge­legt. 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“ defi­niert eine Größe ent­we­der in Relation zur Fensterbreite oder -höhe – je nach­dem, wel­che Größe die klei­ne­re ist. Ist die Breite des Browserfensters klei­ner als die Höhe, wird bei „vmin“ die Breite genom­men.

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

div {
  width: 2vmin;
}

Im Beispiel erhält das Element eine Breite von 20 Prozent der Fensterbreite, wenn die­se klei­ner ist als die Fensterhöhe. Ist die Höhe klei­ner als Breite, wird dem Element eine Breite von 20 Prozent der Fensterhöhe zuge­wie­sen.

Browser-Support

Die Viewport Units wer­den mitt­ler­wei­le von allen moder­nen Browsern unter­stützt. Der Internet Explorer ist ab Version 10 dabei, Firefox ab 19 und Chrome ab 20.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

8 Kommentare

  1. wie siehts denn mit der unter­stüt­zung auf smart­pho­nes aus? mien alte ipho­ne 4 schiesst div ele­men­te ein­fach ins nir­va­na bei top: vh;

  2. Flex-Boxes, Viewport-Units… all­mäh­lich ver­liert respon­si­ves Design sei­nen Horror und man kann sich end­lich wie­der ver­mehrt auf das kon­zen­trie­ren das im Web ja schliess­lich das Wichtigste sein soll­te: die Inhalte – auch die Suchmaschinenoptimierung wird davon pro­fi­tie­ren.

    Microsoft muss sich mit sei­nem neu­en “Edge”-Browser ran­hal­ten.
    In schö­ner IE-Tradition gilt es schliess­lich dar­auf zu ach­ten mög­lichst wenig Standards zu unter­stüt­zen und wo irgend­mög­lich sein eige­nes Süppchen zu kochen.

    Frank Hübner
    (Senior Programmer)
    http://www.binary-garden.com

  3. Alles gut gemeint, wenn es lau­fen wür­de auf moder­nen Browsern.
    Safari Windows 5.1.7 zeigt es an aber die Größe ist immer gleich unab­hän­gig von den Variablen.
    Firefox 32.0.3 Fehlanzeige, nichts wird ange­zeigt.

    Von Internet Explorer gar nicht zu reden.

    MfG K. Rippe

  4. Kürzlich habe ich mich auch mit VH/VW beschäf­ti­gen müs­sen. Eine tol­le Erweiterung der Möglichkeiten! – Jedoch soll­te man beach­ten das es auf iOS Devices wie dem IPad zu feh­ler­haf­tem Verhalten, sei­tens des Tablets, kom­men kann, wenn man das Tablet dreht. Dazu habe ich einen klei­nen Blogpost über einen JavaScript Workaround geschrie­ben: http://www.joocom.de/blog/losung-fur-den-orientation-change-bug-bei-vw-und-vh-einheiten/

  5. Schönes Ding, ich hab das eben aus­pro­biert und mir ist auf­ge­fal­len das auf mei­nem 24 Zöller der Text gera­de­zu rie­sig ist und auf mei­nem Smartphone kaum noch zu erken­nen ist. Gibt es da einen Trick, das zu umge­hen?

    • Hallo Andre,

      Auch wenn etwas spät eine Antwort kommt viel­leicht für nach­fol­gen­de Leser:

      Du kannst dein Design wei­ter mit @media only screen and (orientation:portrait)
      und @media only screen and (orientation:landscape), defi­nie­ren. Dazu kannst du ein­zel­ne Geräte durch ihre Breite ergän­zen bspw. @media (min-width: 450px) and (max-width: 950px)

  6. Haben uns der Möglichgkeit bei dem Relaunch unse­rer Website bedient und ich muss sagen ich bin davon hell auf begeis­tert. Es ist schnell in Sachen Ladezeit und den­noch sty­lisch vom Design gewor­den

  7. Vielen Dank für den inter­es­san­ten Artikel!
    Das Ganze war für mich voll­kom­men neu.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.