chrome 中的媒体查询：无法将 "not print" 与其他规则组合

Question

组合 "not print" 和规则似乎不起作用。如果我组合 "not print" 它看起来像第二部分（最大宽度：600px）被忽略..

<html>
<head>
<style>
@media not print and (max-width:600px) {
   html { background-color: red;}
}
</style>
<body>
test
</body>
</html>

这个片段有效吗？

<html>
<head>
<style>
@media (max-width:600px) {
   html { background-color: red;}
}
</style>
<body>
test
</body>
</html>

Answer 1

一般样式使用下面的不是更好吗...

@media screen and (max-width: 600px) {
  // styles go here
}

然后使用以下方法打印特定样式...

@media print {
  // print specific styles go here...
}

希望对您有所帮助...

Answer 2

看起来您正在寻找这个：

<html>
<head>
<style>
@media not print, (max-width:600px) {
   html { background-color: red;}
}
</style>
<body>
test
</body>
</html>

这对浏览器说，不打印和 600px 的最大宽度。而之前它说的是 "not print and not max-width: 600px".

MDN 有一组很好的例子说明 not operator works.

Answer 3

在CSS Level 3 媒体查询中，not 只能出现在媒体查询的开头（因为你有它，并且还需要你有的媒体类型），并且negates the entire media query.

因此 not print and (max-width: 600px) 被解释为（伪）not (print and (max-width: 600px))，这意味着它将匹配所有非印刷媒体以及宽度大于 600px 的媒体。换句话说，除非您在小纸上打印，否则将应用内部规则。

希望这能为其他答案增加一些解释。

Media query in chrome: fail to combine "not print" with other rule