Verwendung von Media Queries

Media Queries ermöglichen es Ihnen, CSS-Stile abhängig vom Medientyp eines Geräts (wie z.B. Druck vs. Bildschirm) oder anderen Merkmalen oder Eigenschaften wie Bildschirmauflösung oder -ausrichtung, Seitenverhältnis, Browser-Viewport-Breite oder -Höhe, Benutzerpräferenzen wie der Präferenz für reduzierte Bewegung, Datennutzung oder Transparenz anzuwenden.

Media Queries werden für Folgendes verwendet:

Hinweis: Die Beispiele auf dieser Seite verwenden CSS's @media zu Illustrationszwecken, aber die grundlegende Syntax bleibt für alle Arten von Media Queries gleich.

Syntax

Ein Media Query besteht aus einem optionalen Medientyp und einer beliebigen Anzahl von Media-Feature-Ausdrücken, die optional auf verschiedene Weise mit logischen Operatoren kombiniert werden können. Media Queries sind nicht case-sensitiv.

Eine Media Query ergibt true, wenn der Medientyp (falls angegeben) mit dem Gerät übereinstimmt, auf dem ein Dokument angezeigt wird und alle Media-Feature-Ausdrücke als wahr berechnet werden. Abfragen mit unbekannten Medientypen sind immer falsch.

Hinweis: Ein mit einer Media Query verbundenes Stylesheet im <link>-Tag wird trotzdem heruntergeladen, selbst wenn die Abfrage false ergibt, der Download erfolgt, aber die Priorität des Downloads ist wesentlich niedriger. Dennoch wird der Inhalt nicht angewendet, es sei denn, das Ergebnis der Abfrage wird true. Sie können in Tomayacs Blog nachlesen, warum dies passiert: Why Browser Download Stylesheet with Non-Matching Media Queries.

Zielorientierung von Medientypen

Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts. Obwohl Websites häufig mit Bildschirmen im Hinterkopf gestaltet werden, möchten Sie möglicherweise Stile erstellen, die auf spezielle Geräte wie Drucker oder audio-basierte Screenreader abzielen. Zum Beispiel zielt dieses CSS auf Drucker ab:

css
@media print {
  /* … */
}

Sie können auch mehrere Geräte anvisieren. Zum Beispiel verwendet diese @media-Regel zwei Media Queries, um sowohl Bildschirm- als auch Druckgeräte anzuvisieren:

css
@media screen, print {
  /* … */
}

Siehe Medientypen für die Liste der verfügbaren Medientypen. Da Medientypen Geräte in sehr allgemeinen Begriffen beschreiben, wurden die meisten ursprünglich definierten Medientypen veraltet, wobei nur screen, print und all erhalten bleiben. Um spezifischere Attribute zu zielen, verwenden Sie stattdessen Media Features.

Zielorientierung von Media-Features

Media-Features beschreiben die spezifischen Merkmale eines bestimmten User-Agents, Ausgabegeräts oder Umgebung. Zum Beispiel können Sie spezifische Stile für Breitbildmonitore, Computer, die Mäuse verwenden, oder Geräte, die unter schlechten Lichtbedingungen verwendet werden, anwenden. Dieses Beispiel wendet Stile an, wenn der primäre Eingabemechanismus des Benutzers (wie eine Maus) über Elemente schweben kann:

css
@media (hover: hover) {
  /* … */
}

Media-Features sind entweder Bereiche oder diskret.

Diskrete Features beziehen ihren Wert aus einem aufgezählten Satz möglicher Schlüsselwortwerte. Zum Beispiel akzeptiert das diskrete orientation-Feature entweder landscape oder portrait.

css
@media print and (orientation: portrait) {
  /* … */
}

Viele Bereichs-Features können mit "min-" oder "max-" vorangestellt werden, um "Mindestbedingung" oder "Höchstbedingung" Einschränkungen auszudrücken. Zum Beispiel wird dieses CSS Stile nur anwenden, wenn die Viewport-Breite Ihres Browsers gleich oder kleiner als 1250px ist:

css
@media (max-width: 1250px) {
  /* … */
}

Dies kann auch so geschrieben werden:

css
@media (width <= 1250px) {
  /* … */
}

Mit Media Query-Bereichs-Features können Sie entweder die inklusiven Präfixe min- und max- oder die knapperen Bereichs-Syntaxoperatoren <= und => verwenden.

Die folgenden Media Queries sind äquivalent:

css
@media (min-width: 30em) and (max-width: 50em) {
  /* … */
}

@media (30em <= width <= 50em) {
  /* … */
}

Die obigen Bereichsvergleiche sind inklusiv. Um den Vergleichswert nicht einzuschließen, verwenden Sie < und >.

css
@media (30em < width < 50em) {
  /* … */
}

Wenn Sie eine Media-Feature-Abfrage ohne Angabe eines Wertes erstellen, werden die verschachtelten Stile verwendet, solange der Wert des Features nicht 0 oder none ist. Zum Beispiel wird dieses CSS auf jedes Gerät mit einem Farbbildschirm angewendet:

css
@media (color) {
  /* … */
}

Wenn ein Feature nicht auf das Gerät zutrifft, auf dem der Browser ausgeführt wird, sind Ausdrücke, die dieses Media Feature beinhalten, immer falsch.

Für weitere Media Feature- Beispiele sehen Sie bitte die Referenzseite für jedes spezifische Feature.

Erstellen komplexer Media Queries

Manchmal möchten Sie möglicherweise eine Media Query erstellen, die von mehreren Bedingungen abhängt. Hier kommen die logischen Operatoren ins Spiel: not, and, und only. Darüber hinaus können Sie mehrere Media Queries zu einer kommagetrennten Liste kombinieren; dies ermöglicht es Ihnen, die gleichen Stile in verschiedenen Situationen anzuwenden.

Im vorherigen Beispiel haben wir gesehen, wie der Operator and verwendet wird, um einen Media Typ mit einem Media Feature zu gruppieren. Der and-Operator kann auch mehrere Media Features zu einer einzigen Media Query kombinieren. Der Operator not negiert hingegen eine Media Query, indem er im Wesentlichen deren normale Bedeutung umkehrt. Der Operator only verhindert, dass ältere Browser die Stile anwenden.

Hinweis: In den meisten Fällen wird der Media-Typ all standardmäßig verwendet, wenn kein anderer Typ angegeben ist. Wenn Sie jedoch den only-Operator verwenden, müssen Sie explizit einen Medientyp angeben. Sie können only screen oder only print in seiner Gesamtheit sehen.

Kombinieren mehrerer Typen oder Features

Das Schlüsselwort and kombiniert ein Media Feature mit einem Medientyp oder anderen Media Features. Dieses Beispiel kombiniert zwei Media Features, um Stile auf Geräte mit landschaftsorientierten Ausrichtungen und einer Breite von mindestens 30 em zu beschränken:

css
@media (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Um die Stile auf Geräte mit einem Bildschirm zu beschränken, können Sie die Media Features an den screen-Medientyp anhängen:

css
@media screen and (min-width: 30em) and (orientation: landscape) {
  /* … */
}

Testen mehrerer Abfragen

Sie können eine kommagetrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem der verschiedenen Medientypen, Features oder Zustände übereinstimmt.

Die folgende Regel enthält zwei Media Queries. Die Stile des Blocks werden angewendet, wenn entweder das Gerät des Benutzers eine Höhe von 680px oder mehr hat oder wenn das Browser-Viewport sich im Portraitmodus befindet (die Höhe des Viewports ist größer als die Breite des Viewports):

css
@media (min-height: 680px), screen and (orientation: portrait) {
  /* … */
}

In diesem Beispiel wird die Media Query true, wenn der Benutzer auf ein PDF druckt und die Seitenhöhe 800px beträgt, weil die erste Abfragekomponente - die testet, ob das Viewport eine Höhe von 680px oder mehr hat - wahr ist. Ebenso, wenn ein Benutzer auf einem Smartphone im Portraitmodus mit einem Viewport von 480px ist, wird die Media Query true, weil die zweite Abfragekomponente wahr ist.

In einer kommagetrennten Liste von Media Queries enden die einzelnen Media Queries am Komma oder im Fall der letzten Media Query in der Liste am öffnenden Klammer ({).

Invertieren der Bedeutung einer Abfrage

Das Schlüsselwort not hebt die Bedeutung einer einzelnen Media Query auf. Zum Beispiel werden die CSS-Stile in dieser Media Query auf alles angewendet, außer auf gedruckte Medien:

css
@media not print {
  /* … */
}

Das not negiert nur die Media Query, auf die es angewendet wird. Das not ohne Klammern negiert alle Features innerhalb der Media Query, in der es enthalten ist. Das bedeutet, dass in einer kommagetrennten Liste von Media Queries jedes not auf die einzelne Abfrage, in der es enthalten ist, angewendet wird und sich auf alle Features innerhalb dieser einzelnen Abfrage auswirkt. In diesem Beispiel wird das not auf die erste Media Query angewendet, die am ersten Komma endet:

css
@media not screen and (color), print and (color) {
  /* … */
}

Die obige Abfrage wird so ausgewertet:

css
@media (not (screen and (color))), print and (color) {
  /* … */
}

Beide Beispiele sind gültig. Medienbedingungen können gruppiert werden, indem sie in Klammern (()) gesetzt werden. Diese Gruppen können dann innerhalb einer Bedingung wie eine einzelne Media Query verschachtelt werden.

Das not wird zuletzt in einer Media Query ausgewertet, was bedeutet, dass es auf die gesamte Media Query angewendet wird, nicht auf ein einzelnes Feature innerhalb einer Query, so als ob direkt nach dem not eine offene Klammer hinzugefügt und am Ende der Media Query geschlossen werden würde.

Die folgende Abfrage:

css
@media not all and (monochrome) {
  /* … */
}

wird so ausgewertet:

css
@media not (all and (monochrome)) {
  /* … */
}

Sie wird nicht so ausgewertet:

css
@media (not all) and (monochrome) {
  /* … */
}

Um ein einzelnes Feature innerhalb einer Media Query zu negieren, verwenden Sie Klammern. Das Umschließen eines not und eines Media Features in Klammern begrenzt die Komponenten der Abfrage, die negiert werden.

In diesem Beispiel negieren wir das hover-Media Feature, jedoch nicht den Medientyp all:

css
@media all and (not(hover)) {
  /* … */
}

Der not(hover) passt, wenn das Gerät keine Hover-Fähigkeit hat. In diesem Fall bezieht sich das not aufgrund der Klammern auf hover, jedoch nicht auf all.

Verbesserung der Kompatibilität mit älteren Browsern

Das Schlüsselwort only verhindert, dass ältere Browser, die keine Media Queries mit Media Features unterstützen, die gegebenen Stile anwenden. Es hat keinen Effekt auf moderne Browser.

css
@media only screen and (color) {
  /* … */
}

Testen mehrerer Features mit or

Sie können or verwenden, um nach Übereinstimmungen unter mehr als einem Feature zu testen, wobei es auf true auflöst, wenn eines der Features wahr ist. Zum Beispiel testet die folgende Abfrage auf Geräte mit monochromem Display oder Hover-Fähigkeit:

css
@media (not (color)) or (hover) {
  /* … */
}

Siehe auch