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

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

何かあなたは、カンマ区切りのリストで複数のメディアクエリを組み合わせることができます

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

出典

2012-01-24 Kevin Burke

関連：http://stackoverflow.com/questions/7668301/is-it-possible-to-embed -media-queries-within-media-queries –

カンマで区切る：

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

See the spec、特に、実施例VI（強調追加）：

複数のメディアクエリーは、メディアクエリーリストで組み合わせることができます。 A カンマで区切られたメディアクエリのリスト。コンマで区切られたリスト内の1つ以上のメディアが真である場合、リスト全体は真であり、であり、そうでない場合はfalseです。メディアクエリの構文では、コンマは論理ORを表し、 'and'キーワードは論理ANDを表します。

私は二onlyが必要であることを疑うので、あなたはおそらく行うことができます。

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

出典

2012-01-24 21:50:58

"only"演算子は、クエリ全体が一致した場合にのみスタイルを適用するために使用され、古いブラウザが選択したスタイルを適用しないようにするのに便利です。したがって、カンマを使用してください... 例：デバイスが横向きモードのときにスタイルを適用する場合： @media（最小幅：700px）と（向き：風景）{...} – Aruna

https://developer.mozilla.org/en/CSS/Media_queriesから等。リスト内のメディアクエリのいずれかが真の場合、関連するスタイルシートが適用されます。これは、論理的な「または」操作と同じです。

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

出典

2012-01-24 21:50:31 entropid

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

答えて

関連する問題