css - CSSメディアクエリを印刷から隠す方法は? 「not」論理演算子は機能しません

Question

メディアクエリが印刷されないようにしようとしているので、@media not print and (min-width:732px). しかし、何らかの理由で、これ (および私が試した多くのバリエーション) は、ブラウザーで期待どおりに表示されません。

私が考えることができる唯一のオプションは を使用することですが@media screen and (max-width:732px)、画面以外の他のすべてのメディアタイプを除外するため、これは避けたいと思います。

Answer 1

このようなものはどうですか？

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

min-width は、指定した他の値を取得する print を除くすべてに対して 732 に設定されます。状況に応じて、別の幅を設定するか、「thiswontwork」(値が初期値に設定されることがあります) や「inherit」などを試してください。

Answer 2

あなたが期待した動作についての私の仮定が正しければ、問題はの優先順位notが よりも低いことですand。

@media not print and (min-width:732px)「少なくとも 732px 幅のビューポートを持つプリンターを除くすべてのメディア」を意味します (したがって、非プリンターおよびスキニー プリンターに適用されます)。 （これはあなたが期待したものだと思います）。

括弧はメディア タイプを囲むのに有効ではなく、@mediaルールをネストできないため、これを回避するのは面倒です。単純なケースでは、ブレントンストリンの答えは良い解決策ですが、多くのスタイルを囲むクエリの場合、それらがすべて適切にオーバーライドされていることを確認するのは面倒です。

今日、自分でこれを理解しようとしていたときに、いくつかのメディア クエリの例をまとめました。

Answer 3

こんなの入れられないから

@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 4

次のようなものを試すことができます：

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