CSSメディアクエリ:max-width OR max-height


490

CSSメディアクエリを記述する場合、「OR」ロジックで複数の条件を指定する方法はありますか?

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

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

回答:


938

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

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

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

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


3
@media screen and(max-width:568px)and(max-height:320px){}-私の場合、これは正しく動作します
nosensus

5
@nosensus、コンマはOR関係を意味します。つまり、元の質問のように、ルールが適用される場合はどちらも当てはまる可能性があります。表示するコードは、ルールを適用するために両方がtrueでなければならないAND関係のコードです。
Drew Noakes 2017

あなたが正しいです。"AND"は、スケール(高さと幅)の両方のルールです。場合によっては、このようなルールが必要になることもあります。たとえば、320x560と320x480の2つのデバイスがあり、デバイスのローテーションが失敗するためです。つまり、「カンマ」と「AND」の記号の意味は異なります。
nosensus 2017

265

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

簡単な答え。

規則はコンマで区切ります。 @media handheld, (min-width: 650px), (orientation: landscape) { ... }

長い答え。

ここにはたくさんありますが、フワフワした文章だけでなく、情報を密にしようと試みました。自分を学ぶ良い機会になりました!時間をかけて体系的に読んでください。参考になれば幸いです。


メディアクエリ

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

論理演算子

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

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

1. AND(およびキーワード)

指定されすべての条件が満たされていないと、スタイルルールが有効になりません。

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

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

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

注:これら3つの機能クエリを組み合わせて使用​​すると、1つのメディアクエリを構成することになります

2. OR(カンマ区切りリスト

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

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

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

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

3. NOT(キーワードではない

ないキーワードことができ、単一の否定に使用されるメディアクエリー(とNOTフルメディアが支配する、それが唯一のカンマの集合ではなく、完全なメディアが@media宣言次のルール間のエントリを否定すること--meaningを)。

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

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

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

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

つまり、メディアタイプが「画面」で最小解像度が300 dpiの場合、ビューポートの最小幅が800ピクセル以上でなければ、ルールは有効になりません

(notキーワードは少しファンキーな状態になる可能性があります。もっとうまくできるかどうか教えてください。;)

4.のみ(キーワードのみ

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

<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キーワードを使用してより複雑なクエリを作成することもできます。メディアクエリをカンマで区切って、より複雑なメディアルールを作成できます(上記の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つのメディアクエリがあります。)

機能クエリは、メディア・ルールの最も基本的な部分であり、単に与えられた特徴と与えられたブラウジング状況でその地位に関するものです。

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)


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

Mozilla貢献​​者によるCSSメディアクエリCC-BY-SA 2.5でライセンス供与)。一部のコードサンプルは、説明を明確にするために(できれば)小さな変更を加えて使用されました。


3
すばらしい答えですが、必要な答え( "max-width OR max-height")をできるだけ簡潔にすぐに提供する序文で改善することができます(fcalderansの答えを参照)。その後、複雑なサポートコンテキストが続く必要があります。多くのユーザーは、必要以上に幅広い学習曲線に投資する必要がないインスタントソリューションを期待しています。ユーザーとして、私はインスタントの答えを見つけることを好むだろう追求するためのオプションではなく、追加のコンテキストを取捨選択することよりも、追加のコンテキストを見つけるために、答えを。関係なく、良い仕事とフォーマット。
Clarus Dignus

3
これは良い記事ですが、特定の質問がMedia Queries入門全体にとって良い場所かどうかはわかりません。あるいは逆に言えば、質問は非常に具体的であり、この答えを正義にしないようにします。また、「機能クエリ」という用語はメディアクエリには表示されず、別のCSS仕様にも表示されます。メディアクエリのコンテキストでこの用語を使用すると混乱を招きますが、その用語をそもそもMDNの記事。メディアクエリ4以降の正しい用語は「メディアの状態」です。
BoltClock

すべてのiPhoneデバイスをサポートする必要があるとしましょう。たとえば、iPhone 5(縦向きと横向きの両方)、iPhone6、iPhone 6 Plusなど、デバイスごとにメディアクエリを個別に作成する必要があります。デバイスのサイズ。私は正しいですか?
IAmRkrishnaV21

2

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 */
}
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.