CODEWITHSUNDEEP
htmlcssresolution
aateeque
aateeque

Reputation: 2231

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!

Upvotes: 6

Views: 55564

Answers (5)

Frederico Kronemberger Da Cruz
Frederico Kronemberger Da Cruz

Reputation: 9

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

Now if does, than implement this onload. This will reduce 100% of your headaches and will do a quick hack for laptops with 1366 x 768 screens without damaging the look and feel for newer, bigger and better screens

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

Upvotes: 0

Matt Asbury
Matt Asbury

Reputation: 5672

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/

Upvotes: 4

Horia Dragomir
Horia Dragomir

Reputation: 2888

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

Upvotes: 9

Joseph Le Brech
Joseph Le Brech

Reputation: 6653

check 960grid it's a layout standard that's divisible by the most common screen resolutions.

Upvotes: 2

Tom Gullen
Tom Gullen

Reputation: 61773

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

Upvotes: 2

Related Questions