css - CSS媒体查询选择宽度间隔的补码

Question

我正在开发一个经常需要使用如下媒体查询的网页：

@media (min-width: 769px) and (max-width: 1280px) {
  ...
}

（或者使用变量，因为我实际上使用的是 Sass (min-width: $vertical-view-max + 1) and (max-width: $medium-view-max)：）

现在，我希望在宽度不在此间隔内时触发媒体查询。

我发现以下规则可以正常工作：

@media (max-width: 768px), (min-width: 1281px) {
  ...
}

但我不能让它与not操作员一起工作：

@media (not ((min-width: 769px) and (max-width: 1280px))) {
  ...
}

我尝试了不同的括号（这个甚至似乎是无效的语法）。我应该如何写规则？这对not运营商来说根本不可能吗？

score 2 · Accepted Answer

这看起来像是一个有效的 4 级媒体查询，但没有更新浏览器来支持新语法，尽管其中一些开始支持一些新的媒体功能。同时，为了符合第 3 级的not关键字，您的媒体查询需要看起来像这样（添加了媒体类型，除了最里面的括号对之外的所有括号都被删除）：

@media not all and (min-width: 769px) and (max-width: 1280px) {
  ...
}

尽管括号的明显不足可能暗示了什么，但not实际上可以否定从 . 开始的整个媒体查询all and。

1 回答 1