CSS メディア クエリで「OR」ロジックを使用して複数の条件を組み合わせるにはどうすればよいですか?

CSS メディア クエリで OR ロジックを使用して複数の条件を組み合わせる

CSS メディア クエリでは、「OR」ロジックを使用して複数の条件を指定すると便利です画面のサイズや側面が異なるデバイスをターゲットにする場合。質問で提供されたコードは間違っていますが、目的の結果を達成する簡単な方法があります。

「OR」ロジックで複数の条件を指定するには、コンマで区切ります:

@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 を返します。つまり、リストは次のように動作します。論理和演算子。"

このアプローチを使用すると、メディア クエリは、画面の幅が 995 ピクセル以下であるかどうか、または画面の高さが 700 ピクセル以下であるかどうかを確認します。いずれかの条件が満たされる場合、メディア クエリ内で指定されたスタイルが適用されます。

以上がCSS メディア クエリで「OR」ロジックを使用して複数の条件を組み合わせるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。