web-dev-qa-db-ja.com

CSSメディアクエリを印刷から非表示にする方法は？ 「not」論理演算子が機能しない

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

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

cssmedia-queries
22
cyreb7

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

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

最小幅は、指定した他の値を取得するprintを除いて、すべて732に設定されます。状況に応じて、別の幅を設定するか、「thiswontwork」（値が初期値に設定される場合があります）や「inherit」などを試すことができます。

9
brentonstrine

メディアクエリの文法は控えめに言ってもかなり制限されています。

しかし、CSS3（CSS2.1ではない）では、@mediaルールをネストできるようです。

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

これは基本的に(not print) and (min-width:732px)として実行されます。

詳細については、 https://stackoverflow.com/a/11747166/3291457 を参照してください。

27
Que

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

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

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

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

7
Matt Kantor

あなたはこのようなものを置くことができないので

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

上記のネストされたクエリは私には機能しませんでしたが、 MDNでのメディアクエリメディアタイプ を少し読んだ後、screenタイプを指定することで、メディアクエリを印刷スタイルから除外できます。

したがって、タイプを指定しないこのようなメディアクエリがある場合、暗黙のタイプはallになります（これは印刷スタイルに影響します）

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

印刷スタイルからスタイルを除外するには、次のように変更する必要があります。

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

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

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