CSS/Javascript fluid font size

Question

My application has two views, a live mode and a preview mode. Both of these have windows which can be resized. They are the same html file. I am looking for a way to get the font-size to resize proportionally for both views when they are resized. I am using jQuery as my javascript framework. Is there a way of getting this to work in either CSS or jQuery?

Answer 1

I know I am answering my own question, but the answer above was helpful but not enough to suffice as one. So this is how I ended up doing it.

First I set up this function which calculates a suitable font size based on a given width.

function getFontSize(width){
    sizew = width / 100;
    size = sizew * 1.5;
    return size;
};

Then I got the function to run on load and on re size of the window then modify the body font size accordingly.

$(window).resize(function(){
    size = getFontSize($(this).width());
    $("body").css("font-size", size + "px");
}).resize();

All you have to do from there is set up any element to have its font-size re-sizable by giving it an "em" or percentage font size.