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

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&&max-width

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

Answer 2

检查这个小提琴,更改浏览器宽度以查看正在运行的媒体查询

@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(因为两个mq覆盖这个宽度)选择的颜色将是white

Answer 3

对于width相同样式的多个，请使用,：

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

    /* style goes here */

}