not 操作符是否定的意思 … 它可以否定整个媒体查询 … 下面我们通过几个演示来了解一下 not 操作符 …

打开网页的样式表 …

@media screen{
body{
background:#ccc;
}
}

这块代码的意思是，如果输出设备的类型是 screen … 那么就会在 body 标签上，应用一个灰色的背景 …

打开浏览器 … 现在输出的设备是电脑屏幕，媒体查询返回真值，所以页面的背景变成灰色的 …

再回到样式表 … 我们添加一个 not … 这样它的意思就变成了，如果输出设备不是 screen … 才会应用大括号里面的样式 …

保存 … 回到浏览器 … 刷新 … 当前输出设备是 screen … 所以页面背景是最开始的样子 … 下面我们可以打开打印预览看看 …

文件 … 打印 …

当前输出的设备类型是 print .. 并不是 screen … 这样我们设置的媒体查询会返回真 … 也就会应用大括号里的样式 …

回到样式表 … 再去修改一下这个媒体查询 …

@media not screen and (max-width: 959px){
body{
background:#ccc;
}
}

这个 not 操作符会否定整个媒体查询，比如这个媒体查询，会先判断 screen and (max-width: 959px) 返回的值是真还是假 …

然后 .. 再去应用 not 这个操作符 … 也就是，如果 screen and (max-width: 959px) 返回真 … 那么这条媒体查询会返回假 … 也就不会应用设计的样式 …

如果 screen and (max-width: 959px) 返回假… 那么这条媒体查询会返回真 … 也就是，页面会去应用在大括号里设计的样式 …

如果我们在媒体查询里，使用逗号分隔开不同的媒体查询 … not 操作符只会影响到它所在的那条媒体查询，而不是整个用逗号分隔开的媒体查询列表 …

最后，我们要注意的是，如果使用 not 操作符 … 一定要明确的指定媒体的类型 … 不然设置的媒体查询永远都会返回假值 ….

类似的还有一个 only 操作符也是这样的，必须要在它后面指定媒体的类型 … only 这个操作符可以防止不懂媒体查询的浏览器，去应用我们设计的媒体查询里的样式 …