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

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