How to work with different screen resolutions in CSS?

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!

+5
source share
5 answers

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/

+3
source

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

+8
source

% - 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!

+2
source

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

+2
source

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); } 
0
source

Source: https://habr.com/ru/post/1337110/


All Articles