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级媒体查询，但no browser has been updated to support the new grammar yet尽管其中一些人开始支持某些新的媒体功能。与此同时，为了使用not关键字符合级别3，您的媒体查询需要看起来像这样（添加了媒体类型，除了最里面的括号对之外的所有关键字）：

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

尽管明显缺少括号可能表明，not实际上用于否定从all and开始的整个媒体查询。