resize html website for different screen resolutions

Question

I had to redo a website from flash to html/jquery. Everything looked great. Until I tested the site on a netbook where the screen resolution is much smaller. All the elements were misaligned or didn't stretch as I wanted it to. Or there were scroll bars everywhere.

So, How would do I make it stretch or resize properly,

Is there a property which I can set somewhere that would resize everything proportionately?

Answer 1

You should use heigh / width in percentage(%) rather px / em. change the css file.

Answer 2

Is there a property which I can set somewhere that would resize everything proportionately?

No, I wish :P You'll need to redo the layout to make it liquid or use media queries to make it responsive to different resolutions. I'm afraid both solutions could be pretty complex.

Answer 3

Is there a property which I can set somewhere that would resize everything proportionately?

Everything? No. Font sizes won't adjust based on window size (at least not without JS).

You can set the widths of most things using percentage units in your stylesheets, but even then there will be a point where things will break down.

The current buzzword is responsive web design (I can't comment on the quality of the links from that page) in which media queries are used to provide different designs for different sized browsers.

Answer 4

The property called Media Query we mostly use this property with Responsible Web Design . In which we tell browsers change the specific css property at that particular screen size .

Check this article for more http://css-tricks.com/6206-resolution-specific-stylesheets/

& for Responsible Web Design mostly use value in Percentage instead of Pixels .

Check THIS website for more reference.

Answer 5

The question was to RESIZE not to REALIGN. Using percentiles will only change WHERE the HTML elements show up on the page. It will not change their SIZE.

Answer 6

您可以使用和百分比高度设置所有重新设置的屏幕。给身体100％宽度和你想要的div给100％宽度。

Answer 7

unfortunately there is no "magic" which scales things up/down. i can think of some guidelines:

1. Use relative widths for things (percentages) instead of absolute value
2. no hardwired sizes, keep them in separate CSS documents
3. work your way up : choose a minimum resolution, work upwards from it. it makes sizing things much easier.