D.r Web seit 1997 print.
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Städte 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur eintragen ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Anmeldung
  • Newsletter
Suche
  • Beste Agenturen
  • Magazin
  • Agentur-Standorte
    • Berlin

    • Bonn

    • Dortmund

    • Dresden

    • Duisburg

    • Düsseldorf

    • Essen

    • Frankfurt am Main

    • Freiburg

    • Hamburg

    • Hannover

    • Köln

    • Leipzig

    • München

    • Nürnberg

    • Stuttgart

    • Wien

    • Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
D.r Web seit 1997 print.
  • Agentur finden
  • Magazin
Agentur eintragen →
Dr. Web » CSS » CSS3: Viewport Units – Neue Einheiten für responsive Designs

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

Sozial sein
Facebook Icon. facebook Twitter Icon. twitter Xing Icon. xing Linkedin Icon. linkedin Whatsapp Icon. whatsapp
  • 8 Kommentare
Lesedauer: 4 Minuten
  • von Denis Potschien
  • 3. Juni 2014

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.

Wie breit ist width ?

Laut W3C bezeichnet die Style Angabe „width“ die innere Breite. Kommen Ränder hinzu, müssen diese gesondert berücksichtigt werden. Ansonsten wird unter Umständen das Layout gesprengt. Eine weitere Tücke hält der Doctype bereit. Fehlt dieser, zeigt der Internet Explorer 6 die Breite falsch an.

Dies liegt am so genannten Kompatibilitätsmodus, der für ältere Dokumente aktiviert wird. So soll ein einheitliches Aussehen zur Vorgängerversion gewährleistet werden – auch wenn die Breite dabei genauso wie im IE 5 falsch dargestellt wird. Ob der Browser diesen Modus nun aktivieren soll oder nicht, erkennt er am definierten Doctype. Fehlt dieser oder ist er auf dem neuesten Stand, werden die Webseiten nach den alten Regeln dargestellt.
Livedemo in neuem Fenster:
HTML Doctype
XHTML Doctype
So sorgt zum Beispiel das vom Dreamweaver MX (2002 Edition) vergebene Doctype für „einfache HTML-Seiten“ dafür, dass die Seite nicht richtig angezeigt wird – obwohl der Browser es könnte:

<!DOCTYPE
HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

der Doctype für XHTML dagegen sorgt dafür, dass der IE 6 width nur für die innere Breite verwendet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Das Ganze ist Mozilla und Opera ziemlich egal. Mozilla zeigt die Breiten korrekt an, indem width nur den inneren Abstand bestimmt, Operas Version 7 dagegen macht mit beiden Doctypes alles falsch.
Screenshot
So ist es richtig, der untere Kasten ist größer, der Innenraum gleich
Die angegeben Werte für padding und border werden zweimal, einmal links, einmal rechts, zu der mit width festgelegten Größe hinzugefügt. Da der obere Kasten 202 Pixel breit ist, würde ein width: 162px den unteren Kasten gleich breit setzen.

<div
style="width: 200px; border: 1px solid black;">
 Kasten 1
</div>
<div style="width: 200px; padding: 10px;
border: 10px solid black;">
 Kasten 2
 </div>

Zu der inneren Breite von 200 Pixeln kommen bei Kasten 2 noch zweimal 10px Innenabstand sowie zweimal 10px schwarzer Rand hinzu, der Kasten ist so insgesamt 240 Pixel breit.

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.
Sponsor. Du bist auch interessiert? Kontaktiere uns →
Kostenloses SEO-Tool. Werbung für die OSG Performance Suite.

Jobs

Lead Entwickler Mobile mit Fokus iOS-Entwicklung

Karlsruhe

Grafik-Designerin

Freiburg im Breisgau

Sprachtalente

Volkach oder Würzburg

Zum richtigen Job

Agenturpartner

DAZECON – Webdesign und Marketing

Dresden

iPower AG

Berlin

Carmen Hurst | Webdesign

Bad Homburg

wp-agentur.de | WordPress-Agentur

Köln

Khoa Nguyen – Online Marketing Beratung & SEA / Social Ads / SEO Freelancer

München

Alle Agenturpartner

Lust auf mehr? Wir empfehlen folgende Artikel:

Designpreis Focus Open 2022

So ein Designpreis ist eine feine Sache, wenn man ihn auch gewinnt. Insbesondere Werbeagenturen können und wollen auf ihrer Website mit solch einem Preis werben.

 →   

Farben finden: 16 Tools für Farbverläufe und Farbkombinationen

Farben spielen im Design natürlich eine große Rolle. Doch stimmige und passende Farbkonzepte zu erstellen, ist nicht jedermanns Sache. Daher gibt es eine Reihe von Webanwendungen, die dir helfen, gute Farbkombinationen zu finden. Monochromatische Farben lassen sich ebenso zusammenstellen wie Komplementärfarben. Dabei unterscheiden sich die Tools teils bereits im Ansatz.

 →   

7 Beispiele für gutes Responsive Webdesign (Showcase)

Responsives Webdesign ist bereits seit längerer Zeit in aller Entwickler Munde. Eine responsive Website gilt sozusagen als die eierlegende Wollmilchsau, denn sie funktioniert auf jedem Ausgabegerät und mit jeder denkbaren Bildschirmauflösung. Egal, ob du eine Website auf einem Smartphone, einem Tablet oder einem Desktop-Rechner anschaust, überall wird der Inhalt optimal lesbar dargestellt.

 →   

8 Antworten zu „CSS3: Viewport Units – Neue Einheiten für responsive Designs“
— was ist Deine Meinung?

  1. 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
  2. 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
  3. Klaus Rippe sagt:
    8. Oktober 2014 um 18:46 Uhr

    Alles gut gemeint, wenn es laufen würde auf modernen Browsern.
    Safari Windows 5.1.7 zeigt es an aber die Größe ist immer gleich unabhängig von den Variablen.
    Firefox 32.0.3 Fehlanzeige, nichts wird angezeigt.

    Von Internet Explorer gar nicht zu reden.

    MfG K. Rippe

    Antworten
  4. 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. 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. 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
  6. 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
  7. 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

Schreibe einen Kommentar Antworten abbrechen

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

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Bad Nauheim
  • Agenturen in Basel
  • Agenturen in Bayreuth
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.