Question

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

例如

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

它在我的桌面上工作正常，但当我在我的LG android浏览器上查看时，只有第一个媒体查询触发。

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

对此有何想法？

Answer 1

删除“all and”s： 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; }
}

只有一个媒体查询正在运行，其余被忽略

2 个答案: