CSS, relative font size

Question

Is it possible to set a font size to a percentage of the container size? I have a list of items which have an image, a header and a description. The image resizes automatically as the user resizes the window. I would like the header font to do the same.

edit: Javascript/JQuery is fine.

Answer 1

In CSS3, there is the vw unit, which stands for 1/100 of the viewport width. For example,

h1 { font-size: 5.5vw; }

sets the heading font size to 5.5% of the viewport width.

However, this seems to work on IE 9 (Standards Mode) only so far. Moreover, IE 9 does not dynamically change the value of the unit when the browser window is resized, only on reload.

Answer 2

Just to expand on Tyler's answer, this is what javascript is meant for, though I'm tad sure you can achieve the same feat using CSS3 viewports, you will be better off using jQuery (it's usually in the cache of most browser's and always hosted on Google so no need to worry :)

If you have a css like this:

#body #mytext {
   font-size: 50%;
}

you can dynamically resize in jQuery like this:

$(window).resize(function(){
    $('#body #mytext').css('font-size',($(window).width()*0.5)+'px');
});

Answer 3

No, this can only be done in JavaScript.