How to work with different screen resolutions in CSS?

Question

I'm new to interface design - I wondered what is the best way to deal with different screen resolutions - by positioning various HTML elements? I thought using% of ages would be the direction, but it turns out that it is not!

Answer 1

You should take a look at the liquid layouts. This applies to an expanding or shrinking web page based on the size of the users browser -

http://www.maxdesign.com.au/articles/liquid/

http://www.alistapart.com/articles/negativemargins/

Answer 2

Read here: http://www.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/

You are most interested in @media queries, especially max-width and min-device-width

Answer 3

% - the right way. If you start using Javascript to discover resolution and customize a design based on the fact that your code will turn into delicious meat spaghetti very quickly.

On the same day, I was always asked to design with a minimum resolution of 800x600, but currently I always occupy 1024x768 as the minimum resolution.

Without additional design information, we can no longer help anymore, I'm afraid!

Answer 4

check the 960grid for its layout standard, which is divided into the most common screen resolutions.

Answer 5

First, see if this works for you. replace your tag with

Now, if you do this, than implement this download. This will reduce 100% of your headaches and make a quick hack for laptops with 1366 x 768 screens without damaging the look of new, larger and better screens.

 var screenHeight = screen.height; if (screenHeight < 800) { $('body').css('zoom', 0.8); } else { $('body').css('zoom', 1); }