Css 只有一个媒体查询正在工作，其余的将被忽略

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

比如说

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

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

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

对此有什么想法吗？

删除“全部和”选项：

请看示例5，该链接指向WC3：

如果未明确指定媒体类型，则为“全部”

---

您可以尝试使用最小宽度。它的功能：设备宽度从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; }
}

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