CSS-Medienabfragen: max-width OR max-height

CSS Media Queries & Logische Operatoren: Ein Kurzer Überblick 😉

Die schnelle Antwort.

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

Die lange Antwort.

Es gibt eine Menge hier, aber ich habe versucht, es zu machen, Informationen dichten, nicht nur flauschig schreiben. Es war eine gute chance zu lernen, mich selbst! Die Zeit nehmen, systematisch zu Lesen, obwohl, und ich hoffe, es wird hilfreich sein.

---

Media Queries

Media queries im wesentlichen werden in web-design, erstellen von Geräte - oder situations-spezifische browsing-Erfahrungen; dies geschieht mit Hilfe der @media Erklärung innerhalb einer Seite CSS. Dies kann verwendet werden, zum anzeigen einer Webseite anders unter einer Vielzahl von Umständen: egal, ob Sie auf einem tablet oder TV-mit verschiedenen Seitenverhältnissen, ob Ihr Gerät verfügt über ein Farb-oder schwarz-weiß-Bildschirm, oder, vielleicht am häufigsten, wenn ein Benutzer ändert die Größe Ihres browser oder wechselt zwischen Browser-Geräte mit unterschiedlichen Bildschirmgrößen (sehr allgemein gesprochen, die Projektierung wie dieser bezeichnet wird als Responsive Web Design)

Logische Operatoren

In der Projektierung für diese Situationen, scheint es vier Logische Operatorendie verwendet werden können, erfordern komplexere Kombinationen von Anforderungen, wenn Sie auf einer Vielzahl von Geräten oder viewport Größen.

(Hinweis: Wenn Sie nicht verstehen, die die Unterschiede zwischen den Medien Regeln, media queries und Funktion Abfragen, durchsuchen Sie den unteren Abschnitt dieser Antwort zunächst ein bisschen besser vertraut mit der Terminologie, die im Zusammenhang mit media-query syntax

1. UND (und Schlüsselwort)

Erfordert, dass alle angegebenen Bedingungen müssen erfüllt sein, vor dem styling-Regeln wirksam werden.

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

Den angegebenen styling-Regeln gehen nicht in den Ort, es sei denn alle folgende als true ausgewertet:

• Der Medientyp ist 'Bildschirm' und
• Der viewport mindestens 700px breit und
• Bildschirm-Ausrichtung ist derzeit die Landschaft.

Hinweis: ich glaube, dass Sie zusammen verwendet werden, diese drei Funktion Abfragen make-up eine einzelne media query.

2. ODER (Komma-getrennte Listen)

Eher als eine oder Schlüsselwort, durch Komma getrennte Listen werden in die Verkettung mehrere media queries zusammen, um eine komplexe media-Regel

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

Den angegebenen styling Regeln in Kraft treten wird, sobald beliebigen Medien-Abfrage als true ausgewertet:

1. Der Medientyp ist 'handheld' oder
2. Der viewport mindestens 650px Breite oder
3. Bildschirm-Ausrichtung ist derzeit die Landschaft.

3. NICHT (nicht Schlüsselwort)

Den nicht keyword verwendet zu negieren einer einzigen media query (und NICHT ein full-media - Regel - was bedeutet, dass es nur negiert Einträge zwischen einem Satz mit Kommas und nicht der ganze media-Regel, die nach dem @media-Deklaration).

Ähnlich, Hinweisdass die nicht Stichwort negiert media queries, die es nicht verwendet werden, zu negieren, eine individuelle Eigenschaft der Abfrage in einem media-query.*

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

Das styling, die hier angegeben wird wirksam, wenn

1. Den media-Typ UND min-Auflösung nicht beide Ihren Anforderungen gerecht zu werden ('Bildschirm' und '300 dpi' beziehungsweise) oder
2. Der viewport mindestens 800 Pixel breit.

In anderen Worten, wenn der Medientyp ist 'Bildschirm' und die min-Auflösung ist 300 dpi, die Regel wird nicht in Kraft treten, es sei denn, die min-width der viewport mindestens 800 Pixel.

(Das Schlüsselwort kann ein wenig funky zum Staat. Lassen Sie mich wissen, wenn ich es besser machen können. 😉

4. NUR (nur Schlüsselwort)

Wie ich es verstehe, die nur Schlüsselwort ist verwendet, um zu verhindern, dass ältere Browser falsch interpretiert neuere media queries wie die früheren, engeren Medien-Typ. Wenn verwendet, richtig, ältere/nicht-kompatiblen Browsern sollte Sie einfach ignorieren, das styling insgesamt.

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

Einer älteren /nicht-konformen browser ignorieren Sie diese Zeile von code insgesamt, glaube ich, als würde es Lesen die nur Schlüsselwort und halte es für eine falsche Medien Typ. (Siehe hier und hier für mehr info aus intelligentere Menschen)

FÜR MEHR INFO

Weitere Infos (darunter mehr Funktionen abgefragt werden können) finden Sie unter: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#Logical_operators

---

Verstehen Der Media Query Terminologie

Hinweis: ich musste lernen, die folgende Terminologie für alles, was hier Sinn zu machen, insbesondere im Hinblick auf die nicht Schlüsselwort. Hier ist es so wie ich es verstehe:

Einen Medien Regel (MDN scheint auch nennen diese media-statements) enthält der Begriff @media mit all seinen daraus folgenden media queries

@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)

Einen Medien Abfrage ist eine Menge von feature-Anfragen. Sie können so einfach wie eine feature-Abfrage, oder Sie können die und Schlüsselwort, um eine komplexe Abfrage. Media queries werden können, durch Komma getrennt, um komplexere media-Regeln (siehe oder Stichwort oben).

screen (Hinweis: Nur ein feature-Abfrage-hier im Einsatz.)

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: es gibt zwei media queries hier.)

Einen Funktion Abfrage ist die basic-Teil der media-Regel und einfach um ein bestimmten Funktion und deren status in einer bestimmten alltäglichen situation.

screen

(min-width: 650px)

(orientation: landscape)

(device-aspect-ratio: 16/9)

---

Code-Schnipsel und Informationen aus:

CSS media queries von Mitwirkenden Am Mozilla-Projekt (lizenziert unter CC-BY-SA 2.5). Einige code-Beispiele wurden mit geringfügigen änderungen, um (hoffentlich) mehr Klarheit der Erklärung.

InformationsquelleAutor der Antwort matthewsheets