Feste Breiten- und H\u00f6hen-Angaben sind in der Template-Entwicklung\u00a0schon lange Geschichte. Mit dem Umdenken zum responsiven Webdesign wurde mittels prozentualer Angaben jedes HTML-Element flexibel und passte sich so „flie\u00dfend“ jeder Bildschirmgr\u00f6\u00dfe 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\u00f6henangaben aus\u00a0-diese sind nicht so intuitiv einsetzbar wie prozentuale Breiten und daher komplizierter zu h\u00e4ndeln.<\/p>\n
In der\u00a0CSS3-Spezifikation wurden als Antwort auf den responsiven Trend\u00a02014 neue, relative L\u00e4ngenma\u00dfe (vw, vh) definiert, die nun auch – fast – von allen Browsern unterst\u00fctzt werden. Wie so h\u00e4ufig hinkt\u00a0der Internet Explorer bzw. Edge Browser hinterher, allerdings werden die neuen L\u00e4ngenma\u00dfe auch hier in den neueren Versionen\u00a0partiell unterst\u00fctzt. Der Weg ist also frei, diese L\u00e4ngenma\u00dfe aktiv zu verwenden, wenn der Fokus nicht auf alten Browser wie dem IE 9 liegt.<\/p>\n
vw wie auch vh sind Abk\u00fcrzungen f\u00fcr „viewport width“ und „viewport height“. Dabei entspricht eine Einheit vw oder vh gleich 1% der Bildschirm-Breite oder -H\u00f6he. Prozentuale Breitenangaben unterscheiden sich somit nicht von dem neuen\u00a0vw-L\u00e4ngenma\u00df<\/strong> – 40% Breite sind identisch zu 40vw.<\/p>\n Die Ma\u00dfeinheit vh<\/strong> bringt im Vergleich zu vw viele Vorteile zum Festlegen der H\u00f6he eines Elements mit. Eben weil dies mit prozentualen Angaben relativ komplex umzusetzen ist. Eine Box mit der H\u00f6he von 30vh nimmt wie erwartet die H\u00f6he von 30% der verf\u00fcgbaren Bildschirm-H\u00f6he ein. Bei einem Tablet mit einer Bildschirm-H\u00f6he von 1024px betr\u00e4gt\u00a0die H\u00f6he der Box somit um die 307px. Bei einem Smartphone mit kleinerem Display entsprechend weniger.<\/p>\n Schriften waren durch die L\u00e4ngenma\u00dfe %, em und rem schon lange relativ, aber nie relativ zu den Bildschirm-Ma\u00dfen sondern relativ zur Grund-Schriftgr\u00f6\u00dfe oder relativ zum Eltern-Element. Mit vw und vh k\u00f6nnen Schriften nun auch passend zur Bildschirmgr\u00f6\u00dfe ausgegeben werden. F\u00fcr den normalen Flie\u00dftext einer Webseite ist die\u00a0relative Anpassung an den Bildschirm\u00a0nicht n\u00f6tig, f\u00fcr \u00dcberschriften kann dies aber viel Abhilfe schaffen.\u00a0Gerade bei \u00dcberschriften mit einer gro\u00dfen Schriftgr\u00f6\u00dfe (ca. > 34px) passen\u00a0lange\u00a0W\u00f6rter auf kleinen Smartphones meist nicht mehr komplett in die Bildschirmbreite. Solche W\u00f6rter ragen dann entweder \u00fcber den sichtbaren Bereich heraus oder brechen mitten im Wort unsch\u00f6n um.<\/p>\n Eine Schriftgr\u00f6\u00dfe von zum Beispiel 2.7vw ist daher eine flexible\u00a0Alternative zu einer pixelgenauen Gr\u00f6\u00dfe von 34px. Die Schrift wird damit umso kleiner, je weniger Breite dem\u00a0Display zur Verf\u00fcgung steht. Mittels Media Query kann der vw-Wert noch einmal nachjustiert werden.<\/p>\nSchriftgr\u00f6\u00dfen mit vw & vh<\/h3>\n
h1 {\r\n \/* font-size: 34px; *\/\r\n font-size: 2.7vw;\r\n}<\/pre>\nvmin & vmax<\/h3>\n