[RESOLVED] Font Size Aspect Ratio Change with Window Size

Just curious. Have a situation where da boss wants our a large piece of our site to be fully dynamic and integrated on any screen size.
This means changing font on size.
Well I cam up with a solution, figured if no one has one better, then i’ll share,
otherwise, I’d like to see better suggestions as my method is rather lengthy and by no means the prettiest piece i’ve written.

[B]My Solution[/B]
1.) while building each element, i only use “em” for font sizes.
Why? Simply, “1em” will always = your document/body’s font size setting

2.) With that in mind I just need to adjust the base font size according to window size.
Why? Simple, using jQuery (so nice n easy) i can do somthing as simple as
$(window).width(); to get the full “viewable” area (not to be confused with screen.width, which will return actual screen size)

3) the Function

[CODE]
function resizeDefFont()
{
var currentWindowWidth = $(window).width();

if (currentWindowWidth >= 900)
{
document.body.style.fontSize = ’16px’;
}
else if ((currentWindowWidth < 900) && (currentWindowWidth >= 875))
{
document.body.style.fontSize = ’15px’;
}
else if ((currentWindowWidth < 875) && (currentWindowWidth >= 800))
{
document.body.style.fontSize = ’14px’;
}
else if ((currentWindowWidth < 800) && (currentWindowWidth >= 725))
{
document.body.style.fontSize = ’13px’;
}
else if ((currentWindowWidth < 725) && (currentWindowWidth >= 700))
{
document.body.style.fontSize = ’12px’;
}
else if ((currentWindowWidth < 700) && (currentWindowWidth >= 625))
{
document.body.style.fontSize = ’11px’;
}
else if ((currentWindowWidth < 625) && (currentWindowWidth >= 550))
{
document.body.style.fontSize = ’10px’;
}
else
{
document.body.style.fontSize = ‘8px’;
};
// this is used privately as an easy way to get a var for default font size for other scripts that may check against it in order to determine sizes
//if your curious, the divFontSize is a div box with no opacity, a z-index of -whatever and height and width of 1em, thus it will always give me the default font size
defFontSize = $(“#divFontSize”).height();
}
[/CODE]

finallly, i run the code on start as well as binding to the window resize event.

Seems to work great with no flaws (thus far).
Any suggestions? any praise? ?

Also in #JavaScript _↴