CSS メディア クエリで「OR」ロジックを使用するにはどうすればよいですか?

CSS メディア クエリでの OR ロジックの使用

メディア クエリを定義するときは、「OR」ロジックを使用して複数の条件を指定する方法を知ることが重要です。 。ビューポートの最大幅または最大高さが特定の基準を満たす場合に適用されるスタイル ルールを定義するとします。

残念ながら、CSS メディア クエリでは「OR」キーワードの使用は無効です。代わりに、正しい構文は、各条件をカンマで区切ることです。

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

カンマを使用すると、メディア クエリは、最大幅が 995 ピクセル以下であるビューポートに適用されます。 max-height は 700px 以下です。

この動作は、「AND」 (&&) とCSS メディア クエリの「OR」(||) 論理演算子。 「AND」演算子は両方の条件が true である必要がありますが、コンマ (「,」) 演算子は「OR」演算を表し、どちらかの条件が true であれば十分です。

メディア クエリを作成する場合は、この区別を理解する必要があります。さまざまなデバイスのビューポート特性に基づいて目的のスタイルを実現するために重要です。

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