我在一个网页上经常需要使用如下媒体查询:

@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运算符根本不可能吗?

最佳答案

看起来像是有效的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开始的整个媒体查询。

10-05 21:02
查看更多