Question

Please can someone point me in the right direction! I can’t get the queries to work as intended.

So, I have for example:

<link rel="stylesheet" href="/480.css" type="text/css" media="screen and (max-width:480px)" />
<link rel="stylesheet" href="/768.css" type="text/css" media="screen and (max-width:768px)" />
<link rel="stylesheet" href="/960.css" type="text/css" media="screen and (min-width:960px)" />

In the 480 stylesheet:

#box{width:100px;height:100px;}

In the 960 stylesheet:

#box{width:200px;height:200px;}

When I resize the browser to 480px or less the 960 style is overriding the 480 style. I have tried loading all queries in the one stylesheet and I’ve tried using separate stylesheets for different resolutions but still not working. When testing it in either Chrome or FF Aurora it makes no difference.

What am I doing wrong? Thanks!

Answer 1

Try this:

<style>
@media screen and (max-device-width: 480px),
screen and (max-width: 960px) {
#box{width:100px;height:100px;outline:1px solid red;}
}
/* Still small! (but scaling up) */
@media screen and (min-width: 960px) {
#box{width:200px;height:200px;outline:1px solid red;}
}
</style>

http://jsfiddle.net/sthAngels/EecJD/