css - 只有一个媒体查询在工作，其余的被忽略

Question

好的，所以我在设计中的不同断点处有几个媒体查询。

例如

 @media all and (max-width:700px){
      body{
        background:red;
      }
 }
 @media all and(max-width:560px){
      body{
        background:blue;
      }
 }

它在我的桌面上运行良好，但是当我在我的 LG 安卓浏览器上查看它时，只有第一个媒体查询触发。

它与宽度没有任何关系，因为如果我将第一个查询的最大宽度更改为小于 560 的值，它无论如何都会被触发。

对此有什么想法吗？

Answer 1

删除“所有和”：http: //jsfiddle.net/C3R9J/

 @media (max-width:700px){
      body{
        background:red;
      }
 }

 @media (max-width:560px){
      body{
        background:blue;
      }
 }

看看示例 5 这个链接到 WC3： http ://www.w3.org/TR/css3-mediaqueries/

如果未明确给出媒体类型，则为“全部”。

Answer 2

您可以尝试使用最小宽度。它的作用：设备宽度从 320px 到 559px，设备宽度从 560px 到 699px，设备宽度从 700px 到 XXX。最新的媒体类型将覆盖所有其他媒体类型。

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

@media only screen and (min-width: 560px) {
    body { background:blue; }
}

@media only screen and (min-width: 700px) {
    body { background:green; }
}