Feder mit Händen, flexibel bleiben mit neuen Längenmaßen

Immer schön flexibel bleiben – neue Längenmaße helfen dabei

Feste Breiten- und Höhen-Angaben sind in der Template-Entwicklung schon lange Geschichte. Mit dem Umdenken zum responsiven Webdesign wurde mittels prozentualer Angaben jedes HTML-Element flexibel und passte sich so „fließend“ jeder Bildschirmgröße an. Ein Bild war also nicht mehr 352px, sondern 35% breit. Prozentuale Breitenangaben waren schon lange in der CSS-Entwicklung bekannt und nie ein Problem. Anders sieht es bei prozentualen Höhenangaben aus -diese sind nicht so intuitiv einsetzbar wie prozentuale Breiten und daher komplizierter zu händeln.

Relative Längenmaße vw & vh

In der CSS3-Spezifikation wurden als Antwort auf den responsiven Trend 2014 neue, relative Längenmaße (vw, vh) definiert, die nun auch – fast – von allen Browsern unterstützt werden. Wie so häufig hinkt der Internet Explorer bzw. Edge Browser hinterher, allerdings werden die neuen Längenmaße auch hier in den neueren Versionen partiell unterstützt. Der Weg ist also frei, diese Längenmaße aktiv zu verwenden, wenn der Fokus nicht auf alten Browser wie dem IE 9 liegt.

vw wie auch vh sind Abkürzungen für „viewport width“ und „viewport height“. Dabei entspricht eine Einheit vw oder vh gleich 1% der Bildschirm-Breite oder -Höhe. Prozentuale Breitenangaben unterscheiden sich somit nicht von dem neuen vw-Längenmaß – 40% Breite sind identisch zu 40vw.

Die Maßeinheit vh bringt im Vergleich zu vw viele Vorteile zum Festlegen der Höhe eines Elements mit. Eben weil dies mit prozentualen Angaben relativ komplex umzusetzen ist. Eine Box mit der Höhe von 30vh nimmt wie erwartet die Höhe von 30% der verfügbaren Bildschirm-Höhe ein. Bei einem Tablet mit einer Bildschirm-Höhe von 1024px beträgt die Höhe der Box somit um die 307px. Bei einem Smartphone mit kleinerem Display entsprechend weniger.

Schriftgrößen mit vw & vh

Schriften waren durch die Längenmaße %, em und rem schon lange relativ, aber nie relativ zu den Bildschirm-Maßen sondern relativ zur Grund-Schriftgröße oder relativ zum Eltern-Element. Mit vw und vh können Schriften nun auch passend zur Bildschirmgröße ausgegeben werden. Für den normalen Fließtext einer Webseite ist die relative Anpassung an den Bildschirm nicht nötig, für Überschriften kann dies aber viel Abhilfe schaffen. Gerade bei Überschriften mit einer großen Schriftgröße (ca. > 34px) passen lange Wörter auf kleinen Smartphones meist nicht mehr komplett in die Bildschirmbreite. Solche Wörter ragen dann entweder über den sichtbaren Bereich heraus oder brechen mitten im Wort unschön um.

h1 {
  /* font-size: 34px; */
  font-size: 2.7vw;
}

Eine Schriftgröße von zum Beispiel 2.7vw ist daher eine flexible Alternative zu einer pixelgenauen Größe von 34px. Die Schrift wird damit umso kleiner, je weniger Breite dem Display zur Verfügung steht. Mittels Media Query kann der vw-Wert noch einmal nachjustiert werden.

vmin & vmax

Durch die Maße vmin und vmax werden die Längenangaben vw und vh noch erweitert. 4vmin entspricht 4vw oder 4vh, je nachdem welcher Wert davon kleiner (min.) ist. Dementsprechend sind 4vmax = 4% der größeren Seite (max.) des Bildschirms.

Noch einfacher zum responsiven Webdesign mit vw & vh

Gerade für allgemeine Höhenangaben oder Schriftgrößen von Überschriften bringen die Längenmaße vw und vh beim Umsetzen eines responsiven Webdesigns viel Erleichterung. Durch die fast komplette Browser-Abdeckung können die Längenmaße nun auch in modernen HTML-Templates eingesetzt werden. Der Browser IE10 und aufwärts, sowie der Edge 12+ unterstützen das Maß vmax nicht, vw und vh können aber uneingeschränkt genutzt werden.

 

Sie haben Interesse an einer responsiven Webseite, die auf allen Bildschirmen optimal dargestellt wird? Kommen Sie auf uns zu, wir entwickeln mit Ihnen zusammen Ihr responsives Webdesign.

Kommentar hinzufügen

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