Changing size depending on the screen (but NOT of an image!)

change size resize screen div

[xdana]

Hi everybody.
I have to resize my site depending on the current resolution of the window.
On the web I only find scripts (js, php and so on) that allow you to resize an image.
But I want to resize THE ENTIRE PAGE , including <img> <p> <a> and all the textes.
How can I do this ?

[penders]

I guess in theory if you specify all your sizes using relative units (%, em, etc.) then simply resizing the window (and perhaps altering the body font-size onresize) would affect the entire page?!

[lucy24]

Not sure what you're asking. Do you want the text areas to get proportionally larger or smaller? That should happen automatically unless you've overconstrained everything.

Do you want images to resize? This is tricky bordering on risky. Some browsers simply aren't very good at it. Making an image larger than its original size rarely comes out well. Making the image significantly smaller means that the user has wasted time downloading more material than they need.

Do you want the text size itself to change?

...

Excuse me. Gotta go find a barge pole.

[xdana]

Hi I know that is a bad idea resizing the site, but I depend on the ideas of a team of graphics, so... I have to obey :)
What I want is to rescale the ENTIRE site, so it isn't enough using relative units, beacuse I want to scale even text size...

[penders]

Text sizes can be specified in relative units too.

Your "team of graphics" do realise that all modern browsers support accurate 'zooming' of the entire page (not just font-size as it used to be)? On Windows... Ctrl + ScrollWheel.

[xdana]

Yeah I know... But what can I do... graphics are graphics and think only about appearance...
And I'm a junior web-developer, so everything I say is not completely considered :(
Ok, now I try to set all the dimensions (even of the fonts) in relative units...
Thanks !

[whoisgregg]

There's a classic article regarding resolution dependent layout here [themaninblue.com] (and an updated demo here [themaninblue.com]).

The gist is that you have separate stylesheets and just swap out which stylesheet is active by detecting the window onresize event. Gmail currently employs this kind of strategy to adjust the vertical padding of email entries in your inbox based on how tall your window is.