Dr. Web Digital Experts-Logo
  • Alle Experten auf einen Blick
  • Berlin
  • Hamburg
  • München
  • Köln
  • Frankfurt
  • Mein Konto
  • Agentur eintragen →
  • × 🍔 vertilgen
  • ☰ Menu
Hier das Dr. Web Icon-Set herunterladen.

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

Lade Dir jetzt das Icon-Set kostenlos herunter

Übersicht

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.

CSS3: Viewport Units
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.

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.

7 Antworten

  1. Avatar Felix sagt:
    3. Juni 2014 um 8:37 Uhr

    Vielen Dank für den interessanten Artikel!
    Das Ganze war für mich vollkommen neu.

    Antworten
  2. Avatar Jörg sagt:
    3. Juni 2014 um 11:07 Uhr

    Haben uns der Möglichgkeit bei dem Relaunch unserer Website bedient und ich muss sagen ich bin davon hell auf begeistert. Es ist schnell in Sachen Ladezeit und dennoch stylisch vom Design geworden

    Antworten
  3. Avatar Andre sagt:
    3. Juni 2014 um 13:06 Uhr

    Schönes Ding, ich hab das eben ausprobiert und mir ist aufgefallen das auf meinem 24 Zöller der Text geradezu riesig ist und auf meinem Smartphone kaum noch zu erkennen ist. Gibt es da einen Trick, das zu umgehen?

    Antworten
    1. Avatar Daniel sagt:
      25. Februar 2015 um 9:47 Uhr

      Hallo Andre,
      Auch wenn etwas spät eine Antwort kommt vielleicht für nachfolgende Leser:
      Du kannst dein Design weiter mit
      @media only screen and (orientation:portrait)
      und
      @media only screen and (orientation:landscape), definieren.

      Dazu kannst du einzelne Geräte durch ihre Breite ergänzen bspw.

      @media (min-width: 450px) and (max-width: 950px)

      Antworten
  4. Avatar Chris sagt:
    30. September 2014 um 9:19 Uhr

    Kürzlich habe ich mich auch mit VH/VW beschäftigen müssen. Eine tolle Erweiterung der Möglichkeiten! – Jedoch sollte man beachten das es auf iOS Devices wie dem IPad zu fehlerhaftem Verhalten, seitens des Tablets, kommen kann, wenn man das Tablet dreht. Dazu habe ich einen kleinen Blogpost über einen JavaScript Workaround geschrieben:

    (function(document, window) {
    
      resetVWUnits = function(e){
        var ele = $(".js-vwFix");
        ele.each(function(index){
          if($(this).is(':visible')){
            $(this).hide().show();
          }
        });
      };
      window.addEventListener('orientationchange', resetVWUnits);
    
    }(document, window));
    Antworten
  5. Avatar Frank Hübner sagt:
    15. Oktober 2015 um 13:45 Uhr

    Flex-Boxes, Viewport-Units… allmählich verliert responsives Design seinen Horror und man kann sich endlich wieder vermehrt auf das konzentrieren das im Web ja schliesslich das Wichtigste sein sollte: die Inhalte – auch die Suchmaschinenoptimierung wird davon profitieren.
    Microsoft muss sich mit seinem neuen “Edge”-Browser ranhalten.
    In schöner IE-Tradition gilt es schliesslich darauf zu achten möglichst wenig Standards zu unterstützen und wo irgendmöglich sein eigenes Süppchen zu kochen.
    Frank Hübner
    (Senior Programmer)

    Antworten
  6. Avatar rob sagt:
    23. November 2015 um 23:37 Uhr

    wie siehts denn mit der unterstützung auf smartphones aus? mien alte iphone 4 schiesst div elemente einfach ins nirvana bei top: vh;

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Passende Beiträge

CSS Grid Layout — im Bild zu sehen ist eine Kurzbiografie.
CSS

Responsive Design mit CSS: Flexbox oder Grid? (Mit Beispielen)

Wie wir Websites gestalten, hat sich in den vergangenen Jahren immer wieder mal mehr, mal weniger radikal geändert. Mit der Einführung von CSS Flexbox hat eine entscheidende Erneuerung stattgefunden. Kurz darauf ist mit CSS Grid ein weiteres Layoutmodell hinzugekommen. Welches ist nun wofür besser geeignet? Muss ich mich für ein Modell entscheiden?

Weiterlesen »
CSS-Grid-Layout - Cascading Style Sheets
CSS

So einfach kann man die Grundlagen des CSS erlernen

CSS hat seinen Platz in der Webentwicklung längst fest eingenommen. Das grundlegende Prinzip der Anwendung von Stylesheets wird allerdings oft falsch verstanden. Werfen wir nochmal einen Blick in die Grundlagen des CSS.

Weiterlesen »
CSS

41 CSS-Buttons mit Hover-Effekt und den dazugehörigen Code-Schnippets

Für schön anzusehende CSS-Buttons benötigt es schon lange keine Grafiken mehr — sie lassen sich formen aus der Schönheit des geschriebenen Codes. Doch die Erstellung

Weiterlesen »
Lade Dir jetzt das Icon-Set kostenlos herunter

  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Menü
  • Agentur finden
  • Agentur eintragen
  • AGB
  • CSS
  • Datenschutzhinweise
  • Impressum
  • SEO
  • Webdesign
  • Websites
  • WordPress
  • Nach oben ↑
Wir verwenden Cookies, um Besucherzahlen zu messen. Mehr dazu in unserer Datenschutzerklärung. Einverstanden? EinstellungenIch stimme zu
Cookie-Einstellungen

Cookies im Überblick

Wir verwenden Cookies, mit denen wir analysieren und verstehen können, wie Sie diese Website nutzen. Auch kommen technisch notwendige Cookies zum Einsatz, bspw. für den Kunden-Login. Ferner verwenden wir auch Cookies von Drittanbietern. Diese Cookies werden nur mit Ihrer Zustimmung in Ihrem Browser gespeichert. Sie haben auch die Möglichkeit, diese Drittanbieter-Cookies zu deaktivieren. Das Deaktivieren dieser Cookies kann sich jedoch zulasten der Nutzererfahrung auswirken.
Notwendig
immer aktiv

Notwendige Cookies sind unbedingt erforderlich, damit die Website ordnungsgemäß funktioniert. Diese Kategorie enthält nur Cookies, die grundlegende Funktionen und Sicherheitsmerkmale der Website gewährleisten. Diese Cookies speichern keine persönlichen Informationen.

Nicht zwingen notwendige Cookies

Alle Cookies, die für die Funktion der Website nicht unbedingt erforderlich sind und zur Erhebung personenbezogener Daten des Benutzers über Analysen, Anzeigen und andere eingebettete Inhalte verwendet werden, werden als nicht erforderliche Cookies bezeichnet.

SPEICHERN UND AKZEPTIEREN