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

Question

我的样式表中有多个查询，其中代码@media only screen and (min-width : 768px) and (max-width : 1024px) { }工作得很好，但在它下面我有@media screen and (min-device-width : 176px) (max-device-width : 360px) {}不起作用。

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

你错过了AND之间的(min-device-width : 176px) (max-device-width : 360px).

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

这里的其他问题是你使用min-device-width. （参考设备的分辨率与浏览器宽度），这是@NoobEditor在下面所说的内容。

你是故意这样做的吗？ 如果不是，你应该使用min-width && max-width

---

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

Answer 2

检查这个小提琴 ，更改浏览器宽度以查看正在运行的媒体查询

@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;
    }
}

这个小提琴工作得很好，但如果你改变媒体查询的顺序它就不会工作......试试吧！

如果为attrib找到多个样式，CSS总是选择声明的最后一个样式。

例如：

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

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

对于765px （ 因为mq都覆盖此宽度 ）所选的颜色将为white

Answer 3

对于多个width为同一款式，使用, ：

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

    /* style goes here */

}

Answer 4

我找到了解决方案。 您必须制作2个CSS文件，在第一个代码中第一个媒体查询，在第二个代码中编写第二个媒体查询代码。 我知道这是一种优雅的方式，但它有效。