Gibt es eine Möglichkeit, beim Schreiben einer CSS-Medienabfrage mehrere Bedingungen mit "ODER" -Logik anzugeben?

Ich versuche so etwas zu tun:

/* This doesn't work */
@media screen and (max-width: 995px OR max-height: 700px) {
  ...
}

Verwenden Sie ein Komma, um zwei (oder mehr) verschiedene Regeln anzugeben:

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

Von https://developer.mozilla.org/en/CSS/Media_queries/

... Darüber hinaus können Sie mehrere Medienabfragen in einer durch Kommas getrennten Liste kombinieren. Wenn eine der Medienabfragen in der Liste wahr ist, wird das zugehörige Stylesheet angewendet. Dies entspricht einer logischen "oder" Operation.

CSS-Medienabfragen und logische Operatoren: Ein kurzer Überblick;)

Die schnelle Antwort.

Separate Regeln mit Kommas: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Die lange Antwort.

Es gibt viel hier, aber ich habe versucht, die Informationen dicht zu machen, nicht nur das flauschige Schreiben. Es war eine gute Chance, mich selbst zu lernen! Nehmen Sie sich Zeit zum systematischen Lesen und ich hoffe, es wird hilfreich sein.

Medien-Anfragen

Medienabfragen werden im Wesentlichen im Webdesign verwendet, um geräte- oder situationsspezifische Browsing-Erlebnisse zu erstellen. Dies erfolgt mithilfe der @mediaDeklaration im CSS einer Seite . Dies kann verwendet werden, um eine Webseite unter einer Vielzahl von Umständen anders anzuzeigen: ob Sie sich auf einem Tablet oder Fernseher mit unterschiedlichen Seitenverhältnissen befinden, ob Ihr Gerät einen Farb- oder Schwarzweißbildschirm hat oder, vielleicht am häufigsten, wann Ein Benutzer ändert die Größe seines Browsers oder wechselt zwischen Browsing-Geräten mit unterschiedlichen Bildschirmgrößen (im Allgemeinen wird das Entwerfen wie dieses als Responsive Web Design bezeichnet ).

Logische Operatoren

Beim Entwerfen für diese Situationen scheint es vier logische Operatoren zu geben , die verwendet werden können, um komplexere Kombinationen von Anforderungen zu erfordern, wenn auf eine Vielzahl von Geräten oder Ansichtsfenstergrößen abgezielt wird.

(Hinweis: Wenn Sie die Unterschiede zwischen Medienregeln, Medienabfragen und Funktionsabfragen nicht verstehen, durchsuchen Sie zuerst den unteren Abschnitt dieser Antwort, um sich ein wenig mit der Terminologie vertraut zu machen, die mit der Syntax von Medienabfragen verbunden ist

1. UND ( und Schlüsselwort)

Erfordert, dass alle angegebenen Bedingungen erfüllt sein müssen, bevor die Styling-Regeln in Kraft treten.

@media screen and (min-width: 700px) and (orientation: landscape) { ... }

Die angegebenen Stilregeln werden erst angewendet, wenn alle folgenden Punkte als wahr bewertet werden:

• Der Medientyp ist "Bildschirm" und
• Das Ansichtsfenster ist mindestens 700px breit und
• Die Bildschirmausrichtung ist derzeit im Querformat.

Hinweis: Ich glaube, dass diese drei Feature-Abfragen zusammen eine einzige Medienabfrage bilden .

2. ODER (durch Kommas getrennte Listen )

Anstelle eines oder eines Schlüsselworts werden durch Kommas getrennte Listen verwendet, um mehrere Medienabfragen miteinander zu verketten und eine komplexere Medienregel zu bilden

@media handheld, (min-width: 650px), (orientation: landscape) { ... }

Die angegebenen Stilregeln werden wirksam, sobald eine Medienabfrage als wahr ausgewertet wird :

1. Der Medientyp ist "Handheld" oder
2. Das Ansichtsfenster ist mindestens 650px breit oder
3. Die Bildschirmausrichtung ist derzeit im Querformat.

3. NICHT ( kein Schlüsselwort)

Die nicht kann keyword werden verwendet , um eine einzige zu negieren Medienabfrage (und nicht um ein vollständigen Medien regieren --meaning dass es negiert nur Einträge zwischen einem Satz von Kommata und nicht die vollständigen Medien im Anschluss an der @media Erklärung ausschließen).

In ähnlicher Weise zur Kenntnis , dass die nicht Schlüsselwort negieren Medienanfragen, es kann nicht eine einzelne Feature - Abfrage innerhalb einer Medienabfrage negieren verwendet werden. *

@media not screen and (min-resolution: 300dpi), (min-width: 800px) { ... }

Das hier angegebene Styling wird wirksam, wenn

1. Der Medientyp UND die minimale Auflösung erfüllen nicht beide ihre Anforderungen ('Bildschirm' bzw. '300 dpi') oder
2. Das Ansichtsfenster ist mindestens 800 Pixel breit.

Mit anderen Worten, wenn der Medientyp "Bildschirm" ist und die minimale Auflösung 300 dpi beträgt, wird die Regel erst wirksam, wenn die minimale Breite des Ansichtsfensters mindestens 800 Pixel beträgt.

(Das Schlüsselwort not kann etwas unkonventionell sein. Lassen Sie mich wissen, ob ich es besser machen kann .;)

4. NUR ( nur Schlüsselwort)

Soweit ich weiß, wird das einzige Schlüsselwort verwendet, um zu verhindern, dass ältere Browser neuere Medienabfragen als den früher verwendeten, engeren Medientyp falsch interpretieren . Bei korrekter Verwendung sollten ältere / nicht konforme Browser das Styling einfach ganz ignorieren.

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

Ein älterer / nicht-konformer Browser würde nur diese Codezeile ignoriert insgesamt, glaube ich , wie es das lesen würde nur Stichwort und es einen falsche Medien betrachtet Typ . (Siehe hier und hier für weitere Informationen von klügeren Leuten)

FÜR MEHR INFORMATION

Weitere Informationen (einschließlich weiterer Funktionen, die abgefragt werden können) finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

Grundlegendes zur Terminologie für Medienabfragen

Hinweis: Ich musste die folgende Terminologie lernen, damit hier alles Sinn macht, insbesondere in Bezug auf das Schlüsselwort not . Hier ist es so wie ich es verstehe:

Eine Medien - Regel (MDN scheint auch diese Medien Aussagen zu nennen) den Begriff @mediamit all seinen folgenden Medien - Anfragen

@media all and (min-width: 800px)

@media only screen and (max-resolution:800dpi), not print

@media screen and (min-width: 700px), (orientation: landscape)

@media handheld, (min-width: 650px), (min-aspect-ratio: 1/1)

Eine Medien - Abfrage ist eine Reihe von Feature - Abfragen. Sie können so einfach wie eine Feature-Abfrage sein oder das Schlüsselwort und verwenden , um eine komplexere Abfrage zu erstellen . Medienabfragen können durch Kommas getrennt werden, um komplexere Medienregeln zu bilden (siehe das Schlüsselwort oder oben).

screen (Hinweis: Hier wird nur eine Feature-Abfrage verwendet.)

only screen

only screen and (max-resolution:800dpi)

only tv and (device-aspect-ratio: 16/9) and (color)

NICHT handheld, (min-width: 650px). (Beachten Sie das Komma: Hier gibt es zwei Medienabfragen.)

Eine Feature- Abfrage ist der grundlegendste Teil einer Medienregel und betrifft lediglich ein bestimmtes Feature und seinen Status in einer bestimmten Browsersituation.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

Codefragmente und Informationen abgeleitet von:

CSS-Medienabfragen von Mozilla-Mitwirkenden (lizenziert unter CC-BY-SA 2.5 ). Einige Codebeispiele wurden mit geringfügigen Änderungen verwendet, um (hoffentlich) die Klarheit der Erklärung zu erhöhen.

Es gibt zwei Möglichkeiten, um ordnungsgemäße Medienabfragen in CSS zu schreiben. Wenn Sie zuerst Medienabfragen für ein größeres Gerät schreiben, lautet die richtige Schreibweise:

@media only screen 
and (min-width : 415px){
    /* Styles */
}

@media only screen 
and (min-width : 769px){
    /* Styles */
}

@media only screen 
and (min-width : 992px){
    /* Styles */
}

Wenn Sie jedoch zuerst Medienabfragen für kleinere Geräte schreiben, ist dies ungefähr so:

@media only screen 
and (max-width : 991px){
    /* Styles */
}

@media only screen 
and (max-width : 768px){
    /* Styles */
}

@media only screen 
and (max-width : 414px){
    /* Styles */
}