Media Queries

handling-in-back-c-code.jpg

Copyright ┬ę Shutterstock / Casimiro PT

Was sind Media Queries?

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.

Hinweis

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