css - 如何从打印中隐藏 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).

有关更多信息，请参阅https://stackoverflow.com/a/11747166/3291457。

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规则不能嵌套，因此解决它有点烦人。对于简单的情况，brentonsrine 的答案是一个很好的解决方案，但对于包含许多样式的查询，确保它们都被正确覆盖可能会很​​麻烦。

今天早些时候我试图自己解决这个问题时，我整理了一些示例媒体查询。

Answer 4

因为你不能放这样的东西

@media screen,handheld,projection,tv,tty and (max-width:732px) { ... }

您应该为每种媒体编写对，如下所示：

@media screen and (max-width:732px), handheld and (max-width:732px), projection and (max-width:732px), tv and (max-width:732px), tty and (max-width:732px) { ... }

Answer 5

您可以尝试以下方法：

@media screen,handheld,projection,tv,tty { ... }

Answer 6

上面的嵌套查询对我不起作用，但是在 MDN 上阅读了 Media Queries Media Types 之后screen，您可以通过指定类型从打印样式中排除您的媒体查询

因此，如果您有这样一个没有指定类型的媒体查询，它将具有隐含的all, 类型（这将影响打印样式）

@media (min-width:400px) {
     ...
}

要从打印样式中排除样式，您需要将其更改为：

@media screen and (min-width:700px) {
      ...
}