CSS-Medienabfragen: max-width OR max-height

Können Sie beim Schreiben einer CSS-Medienabfrage mehrere Bedingungen mit “ODER” -Logik angeben?

Ich versuche, so etwas zu tun:

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

Solutions Collecting From Web of "CSS-Medienabfragen: max-width OR max-height"

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 Media Queries & Logische Operatoren: Ein kurzer Überblick;)

Die schnelle Antwort.

Trennen Sie die Regeln durch Kommas: @media handheld, (min-width: 650px), (orientation: landscape) { ... }

Die lange Antwort.

Es gibt eine Menge hier, aber ich habe versucht, es informationsreich zu machen, nicht nur flauschiges Schreiben. Es war eine gute Chance, mich selbst zu lernen! Nehmen Sie sich die Zeit, systematisch zu lesen, und ich hoffe, es wird hilfreich sein.


Medien-Anfragen

Medienabfragen werden im Wesentlichen im Webdesign verwendet, um geräte- oder situationsspezifische Browsererfahrungen zu erstellen. Dies geschieht mithilfe der @media Deklaration im CSS einer Seite. Dies kann verwendet werden, um eine Webseite unter einer Vielzahl von Umständen unterschiedlich anzuzeigen: ob Sie sich auf einem Tablet oder einem Fernseher mit unterschiedlichen Seitenverhältnissen befinden, ob Ihr Gerät über einen Farb- oder Schwarzweißbildschirm verfügt oder am häufigsten wann Ein Benutzer ändert die Größe seines Browsers oder wechselt zwischen Browser-Geräten mit unterschiedlichen Bildschirmgrößen (in der Regel wird ein solches Design als Responsive Web Design bezeichnet ).

Logische Operatoren

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

(Hinweis: Wenn Sie die Unterschiede zwischen Medienregeln, Medienabfragen und functionsabfragen nicht verstehen, durchsuchen Sie den unteren Abschnitt dieser Antwort, um sich mit der Terminologie für die Medienabfragesyntax vertraut zu machen

1. UND ( und Schlüsselwort)

Vorausgesetzt, dass alle angegebenen Bedingungen erfüllt sein müssen, bevor die Formatierungsregeln wirksam werden.

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

Die angegebenen Formatierungsregeln werden erst dann angewendet, wenn alle folgenden Werte als wahr gewertet werden:

  • Der Medientyp ist “Bildschirm” und
  • Das Ansichtsfenster ist mindestens 700 Pixel breit und
  • Bildschirmausrichtung ist derzeit Landschaft.

Hinweis: Ich glaube, dass diese drei Featureabfragen zusammen eine einzelne Medienabfrage ergeben .

2. ODER (durch Kommas getrennte Listen )

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

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

Die angegebenen Formatierungsregeln werden wirksam, sobald eine Medienanfrage als wahr ausgewertet wird :

  1. Der Medientyp ist “Handheld” oder
  2. Das Ansichtsfenster ist mindestens 650 Pixel breit oder
  3. Bildschirmausrichtung ist derzeit Landschaft.

3. NICHT ( kein Schlüsselwort)

Das Schlüsselwort not kann verwendet werden, um eine einzelne Medienabfrage zu negieren (und NICHT eine vollständige Medienregel – das heißt, es negiert nur Einträge zwischen einer Reihe von Kommas und nicht die vollständige Medienregel nach der @ media-Deklaration).

Beachten Sie auch, dass das Schlüsselwort not Medienabfragen negiert. Es kann nicht dazu verwendet werden, eine einzelne functionsabfrage innerhalb einer Medienabfrage zu negieren. *

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

Das hier angegebene Styling wird in Kraft treten, wenn

  1. Der Medientyp AND min-resolution erfüllt nicht beide Anforderungen (‘screen’ und ‘300dpi’) bzw.
  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 Mindestbreite des Darstellungsbereichs mindestens 800 Pixel beträgt.

(Das Nicht-Keyword kann ein bisschen unkonventionell sein. Lassen Sie es mich wissen, wenn ich es besser machen kann.;)

4. NUR ( nur Schlüsselwort)

Wie ich es verstehe, wird das einzige Schlüsselwort verwendet, um zu verhindern, dass ältere Browser neuere Medienabfragen als den früher verwendeten, schmaleren Medientyp missinterpretieren . Bei richtiger Verwendung sollten ältere / nicht kompatible Browser den Stil komplett ignorieren.

Ein älterer / nicht konformer Browser würde diese Codezeile einfach ignorieren. Ich glaube, da er das einzige Keyword liest und es als einen falschen Medientyp betrachtet. (Siehe hier und hier für weitere Informationen von intelligenteren Menschen)

FÜR MEHR INFORMATION

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


Verstehen der Medienabfrage-Terminologie

Hinweis: Ich musste die folgende Terminologie für alles lernen, um einen Sinn zu ergeben, insbesondere in Bezug auf das Schlüsselwort not . Hier ist es wie ich es verstehe:

Eine Medienregel (MDN scheint auch diese Medienanweisungen zu nennen) enthält den Begriff @media mit allen folgenden Medienabfragen

@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 Medienabfrage besteht aus einer Reihe von Featureabfragen. Sie können so einfach wie eine Feature-Abfrage sein oder sie können das Schlüsselwort und verwenden , um eine komplexere Abfrage zu erstellen. Medienabfragen können durch Kommas voneinander getrennt werden, um komplexere Medienregeln zu erstellen (siehe das oder Schlüsselwort oben).

screen (Hinweis: Nur eine Feature-Abfrage wird hier 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 eine bestimmte function und ihren Status in einer bestimmten Browser-Situation.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)


Code-Snippets und Informationen abgeleitet von:

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