Für „Responsive Header“ im Zusammanhang mit Landingpages gab es mit dem Aufkommen von Responsive Webdesign verschiedene Ansätze. Viele CSS-Mediaqueries einsetzen, mit CSS-Preprocessing Loops oder Mixins schreiben, welche die vielen Mediaqueries generieren, oder ein jQuery plugin wie FitText verwenden.

Das CSS mit einer PHP-Schleife zu generieren (z.B. im WordPress-Head) ist auch noch ein Weg, die Größe einer Schrift dem Display anzupassen…

Andererseits gibt es in CSS eine mittlerweile browserseitig weitgehend akzeptierte Maßeinheit, die sich prozentuell an der Größe des Displays orientiert.

vw	Relativ in % der Breite des Displays, 1vw = 1% der Breite des Displays
vh	Relativ in % der Höhe des Displays, 1vh = 1% der Höhe des Displays
vmin	Relativ in % der schmaleren Seite des Displays
vmax	Relativ in % der größeren Seite des Displays (Funktioniert nicht im IE9)

Unterschied zu prozentuellen Werten

Prozentwerte beziehen sich auf die Breite des Elternelements, und bei Schriften auf die Ausgangsschriftgröße. Diese ist im Fall von Schriften statisch. Die Höhenbestimmung von Elementen in Prozent ist auch nicht grade zuverlässig. Als Weblayouts noch mit Tabellen gesetzt wurden funktionierte die Festlegung von Höhnen mit 100%, und mit display:flex funktioniert sie wieder, wenn man will.

Anwendung bei Schriften

Zumindest manchmal kann ein Responsive Header so einfach sein:

Beispiel zwei: Größe relativ zur Displaybreite

<h1 class="big bigvw">Header</h1>

Header

Das CSS

h1.big{text-align:center;color:#d24153;margin: 0;line-height:1em;}
h1.bigvw{font-size:12vw;letter-spacing:0.2vw}

Um optional eine Mindest- und / oder Höchstgrenze festzulegen, reichen ein, zwei Mediaqueries.

@media only screen and (min-width: 1600px) {
h1.bigvw{font-size:250px}
}
@media only screen and (max-width: 600px) {
h1.bigvw{font-size:40px}
}

Ein Überblick zur Browserunterstützung