559

CSSメディアクエリを作成するときに、「OR」ロジックで複数の条件を指定する方法はありますか？

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

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

4 に答える 4

1067

2つ（またはそれ以上）の異なるルールを指定するには、コンマを使用します。

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

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queriesから

コンマは、複数のメディアクエリを1つのルールに結合するために使用されます。カンマ区切りのリスト内の各クエリは、他のクエリとは別に扱われます。したがって、リスト内のクエリのいずれかがtrueの場合、メディアステートメント全体がtrueを返します。つまり、リストは論理または演算子のように動作します。

于 2012-07-09T23:40:05.197 に答える
291

CSSメディアクエリと論理演算子：簡単な概要;）

簡単な答え。

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

長い答え。

ここにはたくさんありますが、ふわふわの文章だけでなく、情報を密集させようとしました。自分自身を学ぶ良い機会になりました！時間をかけて体系的に読んでください。お役に立てば幸いです。

メディアクエリ

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

論理演算子

これらの状況に合わせて設計する場合、さまざまなデバイスまたはビューポートサイズを対象とするときに、要件のより複雑な組み合わせを要求するために使用できる4つの論理演算子があるように見えます。

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

1. AND（およびキーワード）

スタイリングルールを有効にするには、指定されたすべての条件が満たされている必要があります。

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

次のすべてがtrueと評価されない限り、指定されたスタイリングルールは適用されません。

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

注：これらの3つの機能クエリを一緒に使用すると、単一のメディアクエリが構成されると思います。

2. OR（コンマ区切りリスト）

またはキーワードではなく、コンマ区切りのリストを使用して、複数のメディアクエリをチェーンし、より複雑なメディアルールを形成します。

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

指定されたスタイリングルールは、いずれかのメディアクエリがtrueと評価されると有効になります。

  1. メディアタイプは「ハンドヘルド」または
  2. ビューポートの幅が650px以上、または
  3. 画面の向きは現在横向きです。

3. NOT（キーワードではない）

notキーワードは、単一のメディアクエリを否定するために使用できます（完全なメディアルールではありません。つまり、@ media宣言に続く完全なメディアルールではなく、コンマのセット間のエントリのみを否定します）。

同様に、 notキーワードはメディアクエリを否定することに注意してください。メディアクエリ内の個々の機能クエリを否定するために使用することはできません。*

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

ここで指定したスタイルは、次の場合に有効になります。

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

つまり、メディアタイプが「画面」で最小解像度が300 dpiの場合、ビューポートの最小幅が少なくとも800ピクセルでない限り、ルールは有効になりません。

（notキーワードは、述べるのが少しファンキーかもしれません。もっとうまくできるかどうか教えてください。;）

4. ONLY（キーワードのみ）

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

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

古い/非準拠のブラウザは、このコード行を完全に無視します。唯一のキーワードを読み取り、誤ったメディアタイプと見なすためです。（賢い人からの詳細については、こことここを参照してください）

詳細情報

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

メディアクエリの用語を理解する

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

メディアルール（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)

メディアクエリは、機能クエリのセットです。1つの機能クエリのように単純にすることも、andキーワードを使用してより複雑なクエリを作成することもできます。メディアクエリは、より複雑なメディアルールを形成するためにコンマで区切ることができます（上記のまたはキーワードを参照）。

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つのメディアクエリがあります。）

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

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

コードスニペットと以下から派生した情報：

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

于 2014-05-07T17:41:07.990 に答える
4

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 */
}
于 2018-10-31T06:30:48.367 に答える
2

はい、and次のように使用します。

@media screen and (max-width: 800px), 
       screen and (max-height: 600px) {
  ...
}
于 2021-02-25T16:49:18.727 に答える