web-dev-qa-db-ja.com

CSSメディアクエリの組み合わせ

ページを印刷する人（media = print）と携帯電話で閲覧する人に同じCSSスタイルのセットを表示したい。 CSSメディアクエリを組み合わせる方法はありますか？

何かのようなもの

@media only print or @media only screen and (max-device-width: 480px) {
  #container {
    width: 480px;
  }
}
cssmedia-queries
45
Kevin Burke

それらをコンマで区切ります：

@media only print, only screen and (max-device-width: 480px)

仕様を参照 、特に、例VI（強調を追加）：

複数のメディアクエリを1つのメディアクエリリストにまとめることができます。メディアクエリのカンマ区切りリスト。コンマ区切りリストの1つ以上のメディアクエリがtrueの場合、リスト全体がtrueになり、それ以外の場合はfalseになります。メディアクエリの構文では、コンマは論理ORを表し、「and」キーワードは論理ANDを表します。

2番目のonlyが必要だとは思わないので、おそらく次のことができます。

@media only print, screen and (max-device-width: 480px)
62
James Allardice

から https://developer.mozilla.org/en/CSS/Media_queries

複数のメディアクエリをコンマ区切りリストで組み合わせることができます。リスト内のメディアクエリのいずれかがtrueの場合、関連付けられたスタイルシートが適用されます。これは論理的な「または」操作に相当します。

2番目の@mediaを削除して、角かっこを追加するだけです。

3
entropid