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

如果我对你所期望的行为的假设是正确的，问题是the precedence of not is lower than and。

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

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

我在今天早些时候尝试解决这个问题时整理了一些example media queries。

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

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

因此，如果您有一个这样的媒体查询未指定类型，则它的隐含类型为all，（这会影响打印样式）

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

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

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

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

6 个答案: