Html css中的多媒体查询不起作用

我在样式表中有多个查询，其中代码

@仅媒体屏幕和（最小宽度：768px）和（最大宽度：1024px）{}

工作得非常好，但在它下面我有

@媒体屏幕和（最小设备宽度：176px）（最大设备宽度：360px）{}

不工作

CSS:

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

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

这把小提琴很好用，但是如果你改变了媒体查询的顺序，它就不起作用了……你自己试试吧

如果为属性找到多个样式，CSS总是选择最后声明的样式

例如：

@media (max-width: 1024px) {
  body {
    background: black;
  }
}

@media (max-width: 768px) {
  body {
    background: white;
  }
}

---

对于

765px

（因为两个m.q都覆盖此宽度），选择的颜色将为

白色
您缺少
和
之间的
（最小设备宽度：176px）（最大设备宽度：360px）。

这里的其他问题是您使用的是
最小设备宽度。
（指设备与浏览器宽度的分辨率），这就是@NoobEditor下面所说的

你是故意的吗？如果不是，则应使用
最小宽度
&&
最大宽度


对于同一样式的多个
宽度
，请使用
，
：

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

    /* style goes here */

}

我找到了解决办法。你必须制作两个CSS文件，第一个代码是第一个媒体查询，第二个代码是写第二个媒体查询代码。我知道这是一种优雅的方式，但它确实有效。
什么是“不起作用”呢？哪些屏幕分辨率不适用？感谢您提供此代码示例。我没有在逗号后重复@media。
@media screen and (min-device-width : 176px) and  (max-device-width : 360px) {
    body {background: green; } 
}

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

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

    /* style goes here */

}