CSS 媒体查询 select 宽度间隔的补充

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 开始的整个媒体查询。

CSS 媒体查询 select 宽度间隔的补充

CSS media query select complement of width interval

css

not-operator

media-queries