如何隐藏打印的CSS媒体查询？"不"逻辑运算符不起作用

Question

我试图隐藏媒体查询不被打印,所以我想出了@media not print and (min-width:732px).但无论出于何种原因,这个(以及我尝试过的许多变化)并没有像我期望的那样在浏览器中显示.

我能想到的唯一选择是使用@media screen and (max-width:732px),但我想避免这种情况,因为它排除了屏幕以外的所有其他媒体类型.

Answer 1

媒体查询语法至少可以说是非常有限的.

但是使用CSS3(而不是CSS2.1)似乎可以嵌套@media规则.

@media not print {
    @media (min-width:732px) {
        ...
    }
}

这基本上执行为(not print) and (min-width:732px).

有关详细信息,请参阅/sf/answers/822301651/.

Answer 2

这样的事怎么样？

body { min-width:732px; }
@media print {
   body { min-width:initial; }
}

除了print之外,所有内容的最小宽度都将设置为732,这将获得您指定的其他值.根据您的情况,您可以设置不同的宽度,或尝试类似"thiswontwork"(有时会将值设置为初始值)或"继承"或类似的东西.

Answer 3

如果我对你所期望的行为的假设是正确的,那么问题是优先级not低于and.

@media not print and (min-width:732px) 表示"除了具有至少732px宽视口的打印机之外的任何介质"(因此它将适用于任何非打印机和瘦打印机)而不是"除打印机之外的任何介质,只要该介质至少具有732px宽的视口" (这是我假设你的预期).

由于括号在媒体类型周围无效且@media规则无法嵌套,因此解决它有点烦人.对于简单的情况,brentonstrine的答案是一个很好的解决方案,但对于包含许多样式的查询,确保它们被正确覆盖是很麻烦的.

当我在今天早些时候试图弄清楚这一点时,我把一些示例媒体查询放在一起.