Wie kann ich die „ODER'-Logik in CSS-Medienabfragen verwenden?

Verwendung der „ODER“-Logik in CSS-Medienabfragen

Mit CSS-Medienabfragen können Sie Stile basierend auf verschiedenen Geräte- oder Bildschirmbedingungen anwenden, z als Breite und Höhe. Es kann jedoch vorkommen, dass Sie mehrere Bedingungen mithilfe der „ODER“-Logik angeben müssen.

Mehrere Bedingungen mit „ODER“

Während CSS-Medienabfragen dies nicht explizit tun Wenn Sie die „ODER“-Logik unterstützen, können Sie eine ähnliche Funktionalität erreichen, indem Sie Kommas verwenden, um mehrere Abfragen zu einer einzigen zu kombinieren Regel.

Beispiel

Wenn Sie Stile anwenden möchten, wenn die Bildschirmbreite kleiner oder gleich 995 Pixel oder die Bildschirmhöhe kleiner oder gleich 700 Pixel ist, Sie können die folgende Medienabfrage verwenden:

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

In diesem Beispiel fungieren Kommas als logischer „ODER“-Operator. Wenn entweder die Bedingung für maximale Breite oder maximale Höhe erfüllt ist, werden die Stile innerhalb der Medienabfrage angewendet.

Mehrere Bedingungen mit „UND“

Beachten Sie das Kommas in Medienabfragen unterstützen auch die „AND“-Logik. Wenn Sie Stile nur anwenden möchten, wenn sowohl die Bedingungen für die maximale Breite als auch die maximale Höhe erfüllt sind, können Sie die folgende Syntax verwenden:

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

Schlussfolgerung

Durch die Verwendung von Kommas in CSS-Medienabfragen können Sie mehrere Bedingungen mithilfe der „OR“- oder „AND“-Logik angeben. Dies bietet Flexibilität bei der Steuerung der Anwendung von Stilen basierend auf verschiedenen Bildschirm- oder Geräteeigenschaften.

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