CSS媒体查询不起作用

Question

基本上我试图阻止特定宽度范围（240px到480px）的某些样式。在这个范围之间，我不希望某些样式被渲染。

更清楚：

我想要颜色：＃000除了宽度 - > 240px到480px之外的所有其他设备宽度。我怎么能利用媒体而不是所有的问题。希望我很清楚...... :(

这是正确的语法：

我有：

 @media not all and (min-width: 240px) and (max-width: 480px), not all and (min-device-width: 240px) and (max-device-width: 480px) {

我在尝试什么：

@media not all and( (min-width: 240px and max-width: 480px )and (min-device-width: 240px and max-device-width: 480px) ){

我可以将两者结合起来：

 @media not all and (min-width: 240px and max-width: 480px) {}
 @media not all and (min-device-width: 240px and max-device-width: 480px) {}

感谢任何帮助

Answer 1

您最初拥有的是正确的语法。其他的都是无效的。

每个媒体查询中的not都会否定媒体查询本身，因此如果浏览器与某个媒体查询匹配，则not表示必须忽略该@media规则。如果浏览器与媒体查询不匹配，则not表示必须应用该规则。

当您在单个规则中合并两个或多个not媒体查询时，其中至少有一个必须评估为true（或“非假”）才能使用该规则。

如果您一次尝试not 所有测试，那么您需要使用and全部链接它们：

@media not all and (min-width: 240px) and (max-width: 480px) and (min-device-width: 240px) and (max-device-width: 480px)

但是根据您正在测试的设备，这可能有意义，也可能没有意义。