web-dev-qa-db-ja.com

CSSメディアクエリ：最大幅 OR 最大高

CSSメディアクエリーを書くとき、 "OR"ロジックで複数の条件を指定できる方法はありますか？

私はこのようなことをやろうとしています：

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}
cssmedia-queries
428
Fraser

2つ（またはそれ以上）の異なる規則を指定するには、コンマを使用してください。

@media screen and (max-width: 995px) , screen and (max-height: 700px) {
  ...
}

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

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

852
fcalderan

CSS Media Queries＆Logical Operators：A Brief Overview;）

簡単な答え。

ルールをコンマで区切ります：@media handheld, (min-width: 650px), (orientation: landscape) { ... }

長い答え。

ここにはたくさんありますが、ふわふわした文章だけでなく、情報を密にしようとしました。自分自身を学ぶ良い機会でした！ 時間をかけて体系的に読んでください。参考になることを願っています。

メディアクエリ

メディアクエリは基本的にウェブデザインで使用され、デバイス固有または状況固有のブラウジングエクスペリエンスを作成します。これは、ページの CSS 。内で@media宣言を使用して行われます。これは、多くの状況下でWebページを異なる方法で表示するために使用できます。または、アスペクト比の異なるテレビ、デバイスの画面がカラーか白黒か、またはおそらく最も頻繁に、ユーザーがブラウザのサイズを変更したり、さまざまな画面サイズのブラウジングデバイスを切り替えたりする場合（非常に一般的には、このような設計は レスポンシブWebデザイン ）と呼ばれます

論理演算子

これらの状況に合わせて設計する場合、 four Logical Operators が表示されます。これを使用して、さまざまなデバイスを対象とする場合に要件のより複雑な組み合わせを要求できます- ビューポート サイズ。

（注：メディアルール、メディアクエリ、および機能クエリの違いを理解していない場合は、この回答の下部セクションを最初に参照して、メディアクエリに関連する用語を少し理解してください。構文

1。 AND（ and キーワード）

スタイリングルールが有効になる前に指定されたすべての条件を満たす必要があるが必要です。

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

次の all がtrueと評価されない限り、指定されたスタイリングルールは所定の位置に配置されません。

  • メディアタイプは「スクリーン」 and
  • ビューポートは少なくとも700ピクセル幅 and
  • 現在、画面の向きは横向きです。

注：これら3つの機能クエリを組み合わせて、単一のメディアクエリを構成すると思います。

2。 OR（カンマ区切りリスト）

or キーワードではなく、複数のメディアクエリを連結してより複雑なメディアルールを形成するためにコンマ区切りリストが使用されます

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

指定されたスタイリングルールは any one メディアクエリがtrueと評価されると有効になります：

  1. メディアタイプは「ハンドヘルド」 or
  2. ビューポートは少なくとも650ピクセル幅または
  3. 現在、画面の向きは横向きです。

。 NOT（ not キーワード）

not キーワードは、単一の media query （および完全なメディア rule -@ media宣言に続く完全なメディアルールではなく、コンマセット間のエントリのみを無効にすることを意味します）。

同様に、 注 not キーワードはメディアクエリを無効にします。 cannot は個々の機能クエリを無効にしますメディアクエリ内。*

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

ここで指定されたスタイリングは、次の場合に有効になります

  1. メディアタイプと最小解像度両方/は要件を満たしません（それぞれ 'screen'と '300dpi'） or
  2. ビューポートの幅は少なくとも800ピクセルです。

つまり、メディアタイプが「スクリーン」で、最小解像度が300 dpiの場合、ビューポートの最小幅が少なくとも1でない限り、ルールは not になります800ピクセル。

（notキーワードは少しファンキーになることがあります。もっとうまくできるかどうか教えてください。;）

4。のみ（ only キーワード）

私が理解しているように、 only キーワードは古いブラウザが新しいメディアクエリを誤って解釈しないようにするために使用が以前に使用されたより狭いメディアタイプです。正しく使用されている場合、古い/非準拠のブラウザーは、スタイル設定を完全に無視する必要があります。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

古い/非準拠のブラウザは、このコード行を完全に無視します。 only キーワードを読み取り、誤ったメディア type。 （より賢い人々からの詳細は here と here を参照してください）

詳細

詳細（クエリ可能な機能を含む）については、以下を参照してください： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

メディアクエリの用語について

注：ここですべてを理解するために、特に not キーワードに関して、次の用語を学ぶ必要がありました。ここに私が理解しているとおりです：

media rule （MDNはこれらのメディアステートメントも呼び出すようです）@mediaという用語とそれに続くすべてのメディアクエリが含まれます

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

media query は、機能クエリのセットです。それらは1つの機能クエリと同じくらい単純なものでも、 and キーワードを使用してより複雑なクエリを形成するものでもかまいません。メディアクエリをコンマで区切って、より複雑なメディアルールを形成できます（上記の or キーワードを参照）。

screen（注：ここで使用されている機能クエリは1つだけです。）

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

handheld, (min-width: 650px)ではありません。 （コンマに注意してください：ここには2つのメディアクエリがあります。）

feature query はメディアルールの最も基本的な部分であり、特定のブラウジング状況での特定の機能とそのステータスに関するものです。

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

コードスニペットと派生情報：

CSSメディアクエリ by Mozilla Contributors （ CC-BY-SA 2.5 でライセンスされています）。一部のコードサンプルは、説明を明確にするために（できれば）わずかな変更を加えて使用されました。

247
matthewsheets

Cssで適切なメディアクエリを書くには2つの方法があります。あなたが最初にもっと大きなデバイスからメディアクエリーを書いているなら、正しい書き方は次のようになります。

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

しかし、あなたが最初にもっと小さなデバイスのためにメディアクエリを書いているならば、それはそれのようになるでしょう：

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}
1
Navneet Kumar