Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to deal with different screen resolutions in CSS?

I am new to UI design- was wondering what the best way to deal with different screen resolutions is when positioning various HTML elements? I thought using %ages would be the way forward but turns out it isn't!

like image 543
aateeque Avatar asked Jan 26 '11 09:01

aateeque


People also ask

How do you handle resolution in CSS?

css stylesheet based on the rule (e.g. "If the resolution is less than 1280px wide, load the small_resolution. css") file; by writing the rule directly in the usual. css file (e.g. "If the resolution is less than 1280px wide, load the CSS properties below").

Does screen resolution affect CSS?

In other words, CSS resolution is the main measure that affects modern responsive UI development. But device resolution is still important. It determines how images and videos are displayed. Due to the screen's high pixel count, these media can be provided at higher density, which creates a sharper view.


3 Answers

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

You'd be most interested in @media queries, particularly max-width and min-device-width

like image 147
Horia Dragomir Avatar answered Sep 27 '22 23:09

Horia Dragomir


You should take a look at liquid layouts. This deals with an expanding or contracting web page based on a users browser size -

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

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

like image 29
Matt Asbury Avatar answered Sep 27 '22 23:09

Matt Asbury


% is the correct way. If you start using Javascript to detect resolution and adjust design based on that your code is going to turn into tasty meat spaghetti very quickly.

Back in the day I was always told to design with a minimum resolution of 800x600, but nowadays I always go by 1024x768 as a minimum resolution.

Without more specifics about designs, we can't really help more I'm afraid!

like image 37
Tom Gullen Avatar answered Sep 27 '22 22:09

Tom Gullen