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操作员根本无法做到这一点？

Answer 1

看起来像是有效的4级媒体查询，但尽管其中一些开始支持一些新的媒体功能，但尚未更新浏览器以支持新的语法。同时，要使用not关键字符合第3级，您的媒体查询需要看起来像这样(添加了媒体类型，除了最内在的括号外，所有介质类型都已删除(：

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

尽管括号明显短缺可能暗示，但not实际上是从all and开始否定了整个媒体查询。