Font-size that expands when you resize the window

Question

How do I make my font in HTML such that when I expand the window, the size of the text expands also. Sort of like setting a percentage for the text that will take on a percentage of the size of the box it is in.

Here is an illustration of what I would like to happen:

#box #text {
   font-size: 50%;
}

Now lets say #box is 200px, #text should be 100px. Obviously I can't just put a fix width for #text because in the site #box will be a dynamic width.

Answer 1

Do it in jquery.

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

Answer 2

Use the vh (viewport height), vw (viewport width), and/or vm (viewport minimum (smallest of the dimensions)) units in browsers that fully support CSS3, and for other browsers listen for resize and JavaScript such as in Razor Storm's answer.

Answer 3

In browsers that support it, you can use CSS media queries to change your layout depending on the width of the window.