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

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/

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';
}

How about using media queries?

even use % for text. http://w3schools.com/cssref/css_units.asp

来源：https://stackoverflow.com/questions/8639249/how-to-resize-font-size-proportionally-to-div-size

标签

javascript