回答:
コンマを使用して、2つ(またはそれ以上)の異なるルールを指定します。
@media screen and (max-width: 995px) , screen and (max-height: 700px) {
...
}
https://developer.mozilla.org/en/CSS/Media_queries/から
...さらに、複数のメディアクエリをコンマ区切りのリストに組み合わせることができます。リスト内のいずれかのメディアクエリがtrueの場合、関連するスタイルシートが適用されます。これは、論理的な「or」操作に相当します。
簡単な答え。
規則はコンマで区切ります。
@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と評価されない限り、指定されたスタイルルールは適用されません。
注:これら3つの機能クエリを組み合わせて使用すると、1つのメディアクエリを構成することになります。
2. OR(カンマ区切りリスト)
orキーワードではなく、カンマ区切りのリストを使用して複数のメディアクエリをチェーン化し、より複雑なメディアルールを形成します
@media handheld, (min-width: 650px), (orientation: landscape) { ... }
指定されたスタイルルールは、いずれかのメディアクエリがtrueと評価されると有効になります。
3. NOT(キーワードではない)
ないキーワードことができ、単一の否定に使用されるメディアクエリー(とNOTフルメディアが支配する、それが唯一のカンマの集合ではなく、完全なメディアが@media宣言次のルール間のエントリを否定すること--meaningを)。
同様に、notキーワードはメディアクエリを無効にすることに注意してください。これを使用して、メディアクエリ内の個々の機能クエリを無効にすることはできません。*
@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }
ここで指定されたスタイリングは、以下の場合に有効になります
つまり、メディアタイプが「画面」で最小解像度が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でライセンス供与)。一部のコードサンプルは、説明を明確にするために(できれば)小さな変更を加えて使用されました。
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 */
}