VW, VH és a VMAX

A reszponzív oldalak kialakításánál ez a négy CSS3 egység (vw, wh, wmin és wmax) kényelmes megoldás lehet. Ha pl. egy H1-et akarjuk úgy méretezni, hogy az mindig arányosan igazodjon a böngésző szélességéhez, akkor használjuk a lenti kódot:

h1 { font-size: 6vw; }

Egy egység bármely négy attribútumnál 1%-ot jelent – a viewport szélességéhez képest. Tehát, ha a viewport szélessége pl. 40 cm, akkor 1vw = 0.4 cm.

1vw = 1%-a a viewport szélességének
1vh = 1%-a a viewport magasságának
1vmin = 1vw vagy 1vh, amelyik kisebb
1vmax = 1vw vagy 1vh, amelyik nagyobb

Itt egy élő demó arra, hogy hogyan is működnek ezek a CSS3 kódok: http://css-tricks.com/examples/ViewportTypography/

Böngésző támogatás: IE 10+, Firefox 19+, Chrome 34+, Safari 7+, Android 4.4+, iOS 6+

Amennyiben korábbi böngészőkre is kellene használni ezt a megoldást, úgy ajánlott a CSS3 kódok helyett használni inkább a jQuery alapú FitText.js-t.