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

【问题标题】：Only one media query is working, rest is ignored只有一个媒体查询在工作，其余的被忽略
【发布时间】：2013-04-17 00:53:53
【问题描述】：

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

例如

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

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

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

对此有什么想法吗？

【问题讨论】：

标签： css mobile responsive-design media-queries

【解决方案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/

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

【讨论】：

【解决方案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; }
}

【讨论】：