Media Queries

Media Queries

Copyright © Shutterstock / Casimiro PT

Was sind Media Queries?

Definition

Media Queries, zu Deutsch: Medienabfrage, besteht aus einem Medientyp und mindestens einem Ausdruck, der den Bereich der Stilvorlagen durch Verwendung von Medienfunktionen wie Breite, Höhe und Farbe begrenzt. Media Queries, die in CSS3 hinzugefügt wurden, ermöglichen die Darstellung von Inhalten auf eine bestimmte Reihe von Ausgabegeräten, ohne den Inhalt selbst ändern zu müssen.

Wie sind Media Queries aufgebaut?

Media Queries bestehen aus einem Medientyp und können ab der CSS3-Spezifikation einen oder mehrere Ausdrücke enthalten. Ausgedrückt werden Medienmerkmale, die entweder zu wahr oder falsch aufgelöst werden. Das Ergebnis der Abfrage ist wahr, wenn der in den Media Queries angegebene Medientyp dem Gerätetyp entspricht, auf dem das Dokument angezeigt wird, und alle Ausdrücke in den Abfragen wahr sind.

Wenn Abfragen wahr sind, werden die entsprechenden Stylesheet- oder Style-Regeln gemäß den normalen Cascading-Regeln angewendet. Stylesheets mit Media Queries, die an die -Tags angehängt sind, werden auch dann heruntergeladen, wenn die Media Queries falsch zurückgeben werden. Sie werden dann jedoch nicht angewendet).

Was sind logische Operatoren?

Es können komplexe Media Queries mit logischen Operatoren erstellt werden, einschließlich ,,nicht” und ,,nur”. Der Operator ,,und” wird zum Kombinieren mehrerer Medienmerkmale zu einer einzigen Medienabfrage verwendet, wobei jedes verkettete Feature als wahr zurückgeben muss, damit die Abfrage wahr ist.

Info

Der ,,nicht” Operator wird verwendet, um eine gesamte Medienabfrage zu negieren.

Der ,,einzige” Operator wird verwendet, um einen Stil nur anzuwenden, wenn die gesamte Abfrage übereinstimmt. Dies ist nützlich, um zu verhindern, dass ältere Browser ausgewählte Stile anwenden.

Wenn die Nicht- oder Nur-Operatoren verwendet werden, muss ein expliziter Medientyp angegeben werden. Es können auch mehrere Media Queries in einer durch Kommas getrennten Liste kombiniert werden. Wenn eine der Media Queries in der Liste wahr ist, gibt die gesamte Medienanweisung ,,wahr” zurück.

Wie können durch Kommas Listen getrennt werden?

Durch Kommas getrennte Listen verhalten sich wie der logische Operator ,,oder”, wenn er in Medienabfragen verwendet wird. Wenn bei der Verwendung einer durch Kommas getrennten Liste von Media Queries eine der Abfrage den Wert ,,wahr” zurückgibt, werden die Stile oder Stylesheets angewendet.

Jede Abfrage in einer durch Kommas getrennten Liste wird als individuelle Abfrage behandelt, und jeder Operator, der auf eine Medienabfrage angewendet wird, wirkt sich nicht auf die anderen aus. Dies bedeutet, dass die durch Kommas getrennten Medienabfragen auf verschiedene Medienfunktionen, -typen und -zustände abzielen können.

Wenn man beispielsweise eine Reihe von Stilen anwenden möchten, wenn das Anzeigegerät eine Breite von mindestens 700 Pixel hat oder ein Handheld im Querformat ist, könnten Sie Folgendes schreiben:

(min-width: 700px), handheld and (orientation: landscape) { … }

Was ist der Nicht-Operator?

Das Schlüsselwort ,,nicht” gilt für die gesamte Abfrage und gibt ,,wahr” zurück, wenn die Medienabfrage andernfalls ,,falsch” zurückgibt (z. B. monochrom auf einem Farbdisplay oder einer Bildschirmbreite von 600 px mit einer min-width: 700px-Featureabfrage). Der Nicht-Operator wird nur die Medienabfrage negieren, auf die es angewendet wird, und nicht jede Medienabfrage, wenn sie in einer durch Kommas getrennten Liste von Medienabfragen vorhanden ist.

Das Schlüsselwort ,,nicht” kann nicht verwendet werden, um eine einzelne Feature-Abfrage zu negieren, sondern nur eine gesamte Medienabfrage.

Was sind die Medienfunktionen?

Die meisten Medienfunktionen können mit “min-” oder “max-” vorangestellt werden, um die Bedingungen ,,größer oder gleich” oder ,,weniger als oder gleich” auszudrücken. Dies vermeidet die Verwendung der Symbole ,,<” und ,,>”, was zu Konflikten mit HTML und XML führen würde. Wenn man eine Medienfunktion verwenden möchte, ohne einen Wert anzugeben, wird der Ausdruck in ,,wahr” aufgelöst, wenn der Wert des Features ungleich Null ist.

Info

Wenn eine Medienfunktion nicht für das Gerät gilt, auf dem der Browser ausgeführt wird, sind Ausdrücke, die diese Medienfunktion betreffen, immer falsch. Zum Beispiel führt die Abfrage des Seitenverhältnisses eines akustischen Geräts immer zu einem falschen Ergebnis.


Sie haben noch Fragen?

Kontaktieren Sie uns

Kostenloser SEO-Check der OSG


Weitere Inhalte