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

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

CSS メディア クエリでは、さまざまなデバイスや画面の条件に基づいてスタイルを適用できます。幅と高さとして。ただし、「OR」ロジックを使用して複数の条件を指定する必要がある状況が発生する場合があります。

「OR」を使用した複数の条件

CSS メディア クエリは明示的には指定しません。 「OR」ロジックをサポートしているため、カンマを使用して複数のクエリを 1 つのクエリに結合することで同様の機能を実現できます。 rules.

例

画面幅が995px以下、または画面高さが700px以下の場合にスタイルを適用したい場合、次のメディア クエリを使用できます:

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

この例では、カンマは論理「OR」演算子として機能します。 max-width 条件または max-height 条件のいずれかが満たされる場合、メディア クエリ内のスタイルが適用されます。

「AND」を含む複数の条件

メディア クエリ内のカンマは、「AND」ロジックもサポートします。 max-width と max-height の両方の条件が満たされた場合にのみスタイルを適用したい場合は、次の構文を使用できます:

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

結論

CSS メディア クエリでカンマを使用すると、「OR」または「AND」ロジックを使用して複数の条件を指定できます。これにより、さまざまな画面またはデバイスの特性に基づいてスタイルの適用を柔軟に制御できます。

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