Resizing text relative to page resolution in html & css?

[Goredoth]

I'm having a hard time getting the font to play nicely with the re-sizing the page of the website I'm making.

What I really want is the text to resize like the image behind them when I set it at a % but I can't seem to do that with text.

 

Yeah I'm pretty rubbish at this stuff.

 

Would really appreciate the help.

[Aho]

You can scale font-size relative to the viewport size using the CSS3 units vw, vh, vmin, and vmax.

 

A single viewport width (vw) or height (vh) unit is == 1% of the viewport width or height, respectively.

 

So in this example,

span{     font-size: 50vw;} h2{    font-size: 1vh;}

all span tags would have a font-size equal to 50% of the viewport width (quite extreme...) and h2 tags would have a font-size equal to 1% of the viewport height.

 

From Opera's Dev site, here are the very short descriptions for all four units:

1vw: 1% of viewport width1vh: 1% of viewport height1vmin: 1vw or 1vh, whatever is smallest1vmax: 1vw or 1vh, whatever is largest

Keep in mind that according to CanIUse, iOS and IE all have limited support for these new units, as with most new CSS3 features.

[Hazy125]

If you're having the aforementioned compatibility issues, it's easy enough to use javascript to control this

[Goredoth]

Awesome, thanks I will give that a shot.

 

Appreciate the help guys.