Different CSS for different screen size?

Question

I was searching arround here and I found that I can use one of the following:

Adapt.js or Media Queries

I was wondering what is better to use? I Basically need to resize some specified divs with different width for different screens. (800x600 and 640x480)

If none of mentioned is good, any other solution ? Thank you :)

Answer 1

Media Queries are the best solution for you

have a detailed info about these here

Answer 2

you might be able to use something like this in CSS

@media only screen and (min-device-width: 768px) {
   ... put your css here
}

The above is probably for mobile devices only

Answer 3

<link rel="stylesheet" media="all" href="css/common.css">
<!--Responsive style sheets -->
<link rel="stylesheet" media="all and (min-width: 600px) and (max-width: 800px)" href="css/name1.css">
<link rel="stylesheet" media="all and (min-width: 480px) and (max-width: 640px)" href="css/name2.css">

Answer 4

If you are planning to support multiple screens I would recommend using 960 Grid http://960.gs/.