How to hide a CSS media query from print? “not” logical operator does not work

问题

I am trying to hide a media query from being printed, so I came up with @media not print and (min-width:732px). But for whatever reason, this (and many variations I have tried) does not display as I would expect in browsers.

The only option I can think of is to use @media screen and (max-width:732px), but I would like to avoid this as it excludes all the other media types besides screen.

回答1:

How about something like this?

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

The min-width will be set to 732 for everything, except print, which will get some other value that you specify. Depending on your situation, you can set a different width, or try something like "thiswontwork" (which sometimes causes the value to be set to the initial value) or "inherit" or something like that.

回答2:

Media queries grammar is pretty limited to say the least.

But with CSS3 (not CSS2.1) it seems that you can nest @media rules.

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

This basically executes as (not print) and (min-width:732px).

See https://stackoverflow.com/a/11747166/3291457 for more info.

回答3:

If I'm correct in my assumptions about the behavior you expected, the issue is that the precedence of not is lower than and.

@media not print and (min-width:732px) means "any media except for printers with at least 732px-wide viewports" (so it will apply to any non-printer and skinny printers) not "any media except printers, as long as that media has at least a 732px-wide viewport" (which is what I assume you expected).

Since parentheses aren't valid around media types and @media rules cannot be nested, working around it is kind of annoying. For simple cases, brentonstrine's answer is a good solution, but for queries which enclose many styles it can be burdensome to make sure they're all overridden properly.

I put together some example media queries when I was trying to figure this out myself earlier today.

回答4:

As you can't put something like this

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

you should write pairs for each media like following:

@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) { ... }

回答5:

You could try something like:

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

回答6:

The above nested query didn't work for me, but after a little reading on Media Queries Media Types at MDN, you can exclude you're media query from print styles by specifying the screen type

So if you have a media query like this which doesn't specify a type, it will have an implied type of all, (which will affect print styles)

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

To exclude the style from print styles, you'd need to change it to this:

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

来源：https://stackoverflow.com/questions/10591273/how-to-hide-a-css-media-query-from-print-not-logical-operator-does-not-work

标签

css

css3

media-queries