Wie kann ich die „ODER'-Logik verwenden, um mehrere Bedingungen in CSS-Medienabfragen zu kombinieren?

Kombinieren mehrerer Bedingungen in CSS-Medienabfragen mit ODER-Logik

In CSS-Medienabfragen kann die Angabe mehrerer Bedingungen mithilfe der „OR“-Logik nützlich sein für die Ausrichtung auf Geräte mit unterschiedlichen Bildschirmgrößen oder -formaten. Obwohl der in der Frage angegebene Code falsch ist, gibt es eine einfache Methode, um das gewünschte Ergebnis zu erzielen.

Um mehrere Bedingungen mit „ODER“-Logik anzugeben, trennen Sie sie durch Kommas:

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

Wie in der Dokumentation unter erklärt https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries:

"Kommas werden verwendet, um mehrere Medienabfragen in einer einzigen Regel zu kombinieren. Jede Abfrage in einem Komma- Eine getrennte Liste wird getrennt von den anderen behandelt. Wenn also eine der Abfragen in einer Liste wahr ist, gibt die gesamte Medienanweisung „wahr“ zurück. Mit anderen Worten: Listen verhalten sich wie ein logisches Oder Operator."

Mit diesem Ansatz prüft die Medienabfrage, ob die Bildschirmbreite kleiner oder gleich 995 Pixel ist oder ob die Bildschirmhöhe kleiner oder gleich 700 Pixel ist. Wenn eine der Bedingungen erfüllt ist, werden die in der Medienabfrage angegebenen Stile angewendet.

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