How to resize font-size proportionally to div size

问题

I'm trying to create a website where the pages resize to the windows size on the fly. While we can get images and such to resize automatically as a % of the div size. We do not seem to be able to resize the text within a div to a relative % of the container.

This feature would need to work as the browser window itself is resized, without having to refresh the page.

The site is basic and is using js,css, html. The simplest method possible would be appreciated, but any solution is fantastic.

Thanks

回答1:

Whipped up some example to adjust font-size on div size change. Using percentage in the parent div and adjusting the font-size there should do the trick.

http://jsfiddle.net/744A2/

回答2:

So you can use screen.availHeight to calculate a constant value which you can multiply with the font size.

window.onload = function () {
    document.body.style.fontSize = (Math.ceil(screen.availHeight * parseInt(document.body.style.fontSize) / 600) + 'px';
}