css中的多个媒体查询无法正常工作

Question

I have multiple queries in my stylesheet where the code @media only screen and (min-width : 768px) and (max-width : 1024px) { } works perfectly fine but under it I have @media screen and (min-device-width : 176px) (max-device-width : 360px) {} does not work.

CSS:

@media only screen and (min-width : 768px) and (max-width : 1024px) { 
body {background: red; } }


@media screen and (min-device-width : 176px) (max-device-width : 360px) {
body {background: green; } }

Answer 1

You're missing the AND between (min-device-width : 176px) (max-device-width : 360px).

@media screen and (min-device-width : 176px) and  (max-device-width : 360px) {
    body {background: green; } 
}

The other issues here is you are using min-device-width. (referring to the resolution of the device vs browser width) which is what @NoobEditor is saying below.

Are you doing that on purpose? If not you should be using min-width && max-width

---

@media screen and (min-width : 176px) and  (max-width : 360px) {
    body {background: green; } 
}

Answer 2

check this fiddle , change the browser width to see the the media query in action

@media screen and (max-width : 1500px) {
    body {
        background: #000;
        border-top: 2px solid #DDDDDD;
    }
}

@media screen and (min-width : 768px) and (max-width : 1024px) {
    body {
        background: #fff;
        border-top: 2px solid #DDDDDD;
    }
}

This fiddle works fine, but if you change the order of the media queries it wont work...try it for yourself!

CSS always selects the last style that was declared if multiple style are found for an attrib.

for eg :

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

for 765px ( since both mq cover this width ) color selected would be white

Answer 3

For multiple width for same style, use , :

@media (max-width: 360px), (max-width: 768px) {

    /* style goes here */

}

Answer 4

I found the solution. You have to make 2 CSS files, in the first code the first media query and in the second write yout second media query code. I know it is an elegant way to do it but it works.