Wie verwende ich „OR'-Logik in CSS-Medienabfragen?

ODER-Logik in CSS-Medienabfragen verwenden

Beim Definieren von Medienabfragen ist es wichtig zu wissen, wie man mehrere Bedingungen mithilfe der „ODER“-Logik angibt . Angenommen, Sie möchten eine Stilregel definieren, die gilt, wenn entweder die maximale Breite oder maximale Höhe des Ansichtsfensters bestimmte Kriterien erfüllt.

Leider ist die Verwendung des Schlüsselworts „OR“ in CSS-Medienabfragen ungültig. Stattdessen besteht die korrekte Syntax darin, jede Bedingung durch ein Komma zu trennen.

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

Durch die Verwendung eines Kommas gilt die Medienabfrage für jedes Ansichtsfenster, in dem die maximale Breite kleiner oder gleich 995 Pixel ist max-height ist kleiner oder gleich 700px.

Dieses Verhalten ist auf den grundlegenden Unterschied zwischen „AND“ (&&) und „OR“ zurückzuführen. (||) logische Operatoren in CSS-Medienabfragen. Der „AND“-Operator erfordert, dass beide Bedingungen wahr sind, während der Komma-Operator (",") eine „ODER“-Operation darstellt, bei der es ausreicht, dass eine der beiden Bedingungen wahr ist.

Diese Unterscheidung beim Schreiben von Medienabfragen ist zu verstehen Entscheidend für das Erreichen des gewünschten Stils basierend auf den verschiedenen Eigenschaften des Geräteansichtsfensters.

Das obige ist der detaillierte Inhalt vonWie verwende ich „OR'-Logik in CSS-Medienabfragen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!