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＆amp;＆amp; max-width

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

Answer 2

check this fiddle，更改浏览器宽度以查看正在运行的媒体查询

@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（因为m.q覆盖此宽度）所选颜色为white

Answer 3

对于相同风格的多个width，请使用,：

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

    /* style goes here */

}

Answer 4

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

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

4 个答案: