0

why is it when I type up this code, the second media query overrides the first

@media screen and (min-width:660px){
body{
    background:darkgreen;
    }

}

@media screen and (min-width:480px){
body{
    background:navy;
}

}

The background color only changes to navy.

But when the order is reversed:

@media screen and (min-width:480px){
body{
    background:navy;
}


 @media screen and (min-width:660px){
body{
    background:darkgreen;
}

both media queries work with their respective widths.

user3474118
  • 17
  • 1
  • 1
  • 4
  • 1
    specificity, "Media queries add no specificity to the selectors they contain, but source order still matters." source: http://css-tricks.com/logic-in-media-queries/ – Varinder Apr 18 '14 at 02:00
  • 1
    Perhaps because they both qualify and the latter is given priority because css progresses downward if the selectors are equal - ps, you wrote 480px for both conditions in the second code block – Kai Qing Apr 18 '14 at 02:04

2 Answers2

0

instead of using @media screen and (min-width:480px)

You can use this:

@media only screen and (max-width:480px) {
// css here
}

Whenever something gets below 480px.. it immediately uses that query. This has proved to be the best method I use when creating responsive themes.

DEMO: http://jsfiddle.net/uu78n/

But this actually will have the same problem as your code depending on the order.. The comment above pointing to this link http://css-tricks.com/logic-in-media-queries/ will explain why.

JCBiggar
  • 2,477
  • 3
  • 20
  • 33
0

difference between 'only screen' and just 'screen' are as below

@media screen and (max-width:632px)

This one is saying for a device with a screen and a window with max-width of 632px apply the style. This is almost identical to the above except you are specifying screen as opposed to the other available media types the most common other one being print.

@media only screen and (max-width:632px)

The keyword ‘only’ can also be used to hide style sheets from older user agents. User agents must process media queries starting with ‘only’ as if the ‘only’ keyword was not present.

nbparmar
  • 19
  • 2