Verwenden von Media Queries

Media Queries erlauben 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, Seitenverhältnis, Browser-Viewport-Breite oder -Höhe, Benutzerpräferenzen wie reduzierte Bewegung, Datennutzung oder Transparenz anzuwenden.

Media Queries werden für Folgendes verwendet:

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

Syntax

Eine 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, die unbekannte Medientypen umfassen, sind immer falsch.

Hinweis: Ein Style Sheet mit einer Media Query, die an sein <link>-Tag angehängt ist, wird dennoch heruntergeladen, auch wenn die Abfrage false zurückgibt; der Download erfolgt, aber die Priorität des Herunterladens ist deutlich niedriger. Dennoch werden seine Inhalte nicht angewendet, es sei denn, bis das Ergebnis der Abfrage auf true ändert. Sie können lesen, warum das passiert, in Tomayacs Blog Why Browser Download Stylesheet with Non-Matching Media Queries.

Ausrichten auf Medientypen

Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts. Obwohl Websites meist für Bildschirme entworfen werden, möchten Sie möglicherweise Stile erstellen, die spezielle Geräte wie Drucker oder audiobasierte Screenreader ansprechen. Zum Beispiel ist dieses CSS auf Drucker ausgerichtet:

css
@media print {
  /* … */
}

Sie können auch mehrere Geräte ansprechen. Zum Beispiel verwendet diese @media-Regel zwei Media Queries, um sowohl Bildschirm- als auch Druckergeräte zu adressieren:

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

Sehen Sie Medientypen für die Liste verfügbarer Medientypen. Da Medientypen Geräte in sehr allgemeinen Begriffen beschreiben, wurden die meisten ursprünglich definierten Medientypen veraltet, wobei nur screen, print, und all verbleiben. Um spezifischere Attribute anzusprechen, verwenden Sie stattdessen Media Features.

Ausrichten auf Media Features

Media Features beschreiben die spezifischen Eigenschaften eines bestimmten Benutzeragenten, Ausgabegeräts oder Umgebung. Zum Beispiel können Sie spezifische Stile für Breitbildmonitore, Computer mit Mäusen oder Geräte, die unter schlechten Lichtverhältnissen genutzt werden, anwenden. Dieses Beispiel wendet Stile an, wenn der primäre Eingabemechanismus des Benutzers (wie eine Maus) Elemente überfahren kann:

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

Media Features sind entweder Bereich oder diskret.

Diskrete Features nehmen ihren Wert aus einer aufgezählten Menge von möglichen Schlüsselwortwerten. 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"-Beschränkungen auszudrücken. Zum Beispiel wird dieses CSS nur dann Stile anwenden, wenn die Breite des Viewports Ihres Browsers gleich oder schmaler als 1250px ist:

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

Die folgenden Media Queries sind gleichwertig mit dem obigen Beispiel:

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

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

Mit Bereichs-Features bei Media Queries können Sie entweder die inklusiven min- und max- Präfixe oder die prägnanteren Bereichssyntax-Operatoren <= und >= verwenden.

Die folgenden Media Queries sind gleichwertig:

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

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

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

Die Bereichsvergleiche oben sind inklusiv. Um den Vergleichswert auszuschließen, verwenden Sie < und/oder >.

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

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

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 für jedes Gerät mit einem Farbbildschirm angewendet:

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

Wenn ein Merkmal nicht auf das Gerät zutrifft, auf dem der Browser läuft, sind Ausdrücke, die dieses Media Feature betreffen, immer falsch.

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

Erstellen komplexer Media Queries

Manchmal möchten Sie eine Media Query erstellen, die von mehreren Bedingungen abhängig ist. Hier kommen die logischen Operatoren ins Spiel: not, and, und only. Darüber hinaus können Sie mehrere Media Queries zu einer kommagetrennten Liste zusammenfassen; dies ermöglicht es Ihnen, die gleichen Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische or-Komposition ausgewertet werden: interpretiert als ob jede Media Query in Klammern mit einem or zwischen ihnen wäre.

Im vorherigen Beispiel sahen wir den and-Operator, der verwendet wurde, um einen Media Typ mit einem Media Feature zu gruppieren. Der and-Operator kann auch verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren. Der not-Operator negiert eine Media Query oder ein Media Feature, wenn er mit Klammern verwendet wird, und kehrt im Wesentlichen ihre normalen Bedeutungen um. Der or-Operator kann unter bestimmten Bedingungen verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren. Zuletzt wurde der only-Operator verwendet, um zu verhindern, dass ältere Browser die Stile anwenden, ohne die Ausdrücke der Media Features auszuwerten, aber er hat in modernen Browsern keine Wirkung.

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

Kombinieren mehrerer Typen oder Merkmale

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

css
@media (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 anketten:

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

Testen für mehrere Abfragen

Sie können eine kommagetrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem beliebigen von verschiedenen Medientypen, Features oder Zuständen ü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 der Browser-Viewport im Hochformat ist (die Viewport-Höhe ist größer als die Viewport-Breite):

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

In diesem Beispiel, wenn der Benutzer auf eine PDF druckt und die Seitenhöhe 800px beträgt, gibt die Media Query true zurück, weil die erste Abfragekomponente - die prüft, ob der Viewport eine Höhe von 680px oder mehr hat - wahr ist. Ebenso, wenn ein Benutzer auf einem Smartphone im Hochformat mit einer Viewport-Höhe von 480px ist, gibt die Media Query true zurück, weil die zweite Abfragekomponente wahr ist.

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

Eine Abfrage umkehren

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

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

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

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

Weil die Abfrage mit einem Medientyp screen beginnt, können Sie screen and (color) nicht in Klammern setzen. Andererseits, wenn Ihre Media Query nur aus Features besteht, müssen Sie die Abfrage in Klammern setzen:

css
@media not ((width > 1000px) and (color)), print and (color) {
  /* … */
}

Die Klammern begrenzen die Komponenten der Abfrage, die negiert werden. Um zum Beispiel nur die (width > 1000px)-Abfrage zu negieren:

css
@media (not (width > 1000px)) and (color), print and (color) {
  /* … */
}

not negiert nur die Abfrage zu seiner Rechten. In diesem Beispiel negieren wir die hover Media Feature aber nicht den screen Medientyp:

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

Das not (hover) trifft zu, wenn das Gerät keine Hover-Fähigkeit hat. In diesem Fall, aufgrund seiner Reihenfolge, bezieht sich das not auf hover, aber nicht auf screen.

Verbesserung der Kompatibilität mit älteren Browsern

Das only-Schlüsselwort verhindert, dass ältere Browser, die Media Queries mit Media Features nicht unterstützen, die gegebenen Stile anwenden. Es hat keine Wirkung in modernen Browsern.

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

Testen für mehrere Features mit or

Sie können or verwenden, um auf eine Übereinstimmung unter mehreren Features zu testen, wobei true zurückgegeben wird, wenn eines der Features wahr ist. Zum Beispiel testet die folgende Abfrage auf Geräte, die ein monochromes Display oder Hover-Fähigkeit haben:

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

Bitte beachten Sie, dass Sie den or-Operator nicht auf der gleichen Ebene wie die and- und not-Operatoren verwenden können. Sie können entweder die Media Features durch ein Komma trennen oder Klammern verwenden, um Unterausdrücke von Media Features zu gruppieren, um die Auswertungsreihenfolge zu klären.

Zum Beispiel sind die folgenden Abfragen beide gültig:

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

/* or */
@media (color) and (hover), (monochrome) {
  /* … */
}

Siehe auch