Verwenden von Media Queries

Syntax

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

• Medientypen definieren die breite Kategorie des Geräts, für das die Media Query gilt: all, print, screen.

  Der Typ ist optional (wird als all angenommen), es sei denn, Sie verwenden den logischen Operator only.

• Media-Features beschreiben eine spezifische Eigenschaft des User Agents, des Ausgabegeräts oder der Umgebung:

  • any-hover
  • any-pointer
  • aspect-ratio
  • color
  • color-gamut
  • color-index
  • device-aspect-ratio Veraltet
  • device-height Veraltet
  • device-posture
  • device-width Veraltet
  • display-mode
  • dynamic-range
  • forced-colors
  • grid
  • height
  • hover
  • inverted-colors
  • monochrome
  • orientation
  • overflow-block
  • overflow-inline
  • pointer
  • prefers-color-scheme
  • prefers-contrast
  • prefers-reduced-motion
  • prefers-reduced-transparency
  • resolution
  • scripting
  • update
  • video-dynamic-range
  • width

  Beispielsweise erlaubt das hover-Feature einer Query zu überprüfen, ob das Gerät das Überfahren von Elementen unterstützt. Media Feature-Ausdrücke testen auf ihre Anwesenheit oder ihren Wert und sind vollständig optional. Jedes Media Feature-Ausdruck muss in Klammern gesetzt werden.

• Logische Operatoren können verwendet werden, um eine komplexe Media Query zu erstellen: not, and, und only. Sie können auch mehrere Media Queries zu einer einzigen Regel kombinieren, indem Sie sie mit Kommas trennen.

Eine Media Query wird als true ausgewertet, 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.

Anvisieren von Medientypen

Medientypen beschreiben die allgemeine Kategorie eines gegebenen Geräts. Obwohl Websites häufig mit Blick auf Bildschirme gestaltet werden, möchten Sie möglicherweise Stile erstellen, die spezielle Geräte wie Drucker oder audio-basierte Bildschirmlesegeräte anvisieren. Zum Beispiel zielt dieses CSS auf Drucker ab:

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

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

Siehe Medientypen für die Liste der verfügbaren Medientypen. Da Medientypen Geräte sehr allgemein beschreiben, wurden die meisten ursprünglich definierten Medientypen veraltet, wobei nur screen, print und all verbleiben. Um gezieltere Attribute anzusprechen, verwenden Sie Media Features stattdessen.

Anvisieren von Media Features

Media Features beschreiben die spezifischen Eigenschaften eines gegebenen User Agents, Ausgabegeräts oder der Umgebung. Beispielsweise können Sie spezifische Stile auf Breitbild-Monitore, Computer, die Mäuse verwenden, oder Geräte anwenden, die unter Bedingungen mit wenig Licht genutzt werden. Dieses Beispiel wendet Stile an, wenn der Hauptinputmechanismus des Benutzers (wie eine Maus) über Elemente schweben kann:

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

Media Features sind entweder Bereichs- oder diskrete Features.

Diskrete Features nehmen ihren Wert aus einer enumerierten Menge möglicher Schlüsselwortwerte. Zum Beispiel akzeptiert das diskrete orientation-Feature entweder landscape oder portrait.

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

Viele Bereichs-Features können mit "min-" oder "max-" präfixiert werden, um Einschränkungen für "minimale Bedingung" oder "maximale Bedingung" auszudrücken. Zum Beispiel wird dieses CSS nur dann Stile anwenden, wenn die Viewport-Breite Ihres Browsers gleich oder kleiner als 1250px ist:

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

Die folgenden Media Queries sind äquivalent zu dem obigen Beispiel:

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

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

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

Die folgenden Media Queries sind äquivalent:

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

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

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

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

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

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

Wenn Sie eine Media Feature-Query 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 Farbdisplay angewendet:

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

Wenn ein Feature nicht auf das Gerät angewendet wird, auf dem der Browser ausgeführt wird, 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 Feature.

Erstellen komplexer Media Queries

Manchmal möchten Sie 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 durch Kommas getrennten Liste kombinieren; dies ermöglicht es Ihnen, dieselben Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische or-Zusammensetzung bewertet werden: interpretiert als ob jede Media Query in Klammern mit einem or dazwischen wäre.

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

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 die Stile auf Geräte im Querformat mit einer Breite von mindestens 30 ems zu beschränken:

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

Um die Stile auf Geräte mit einem Bildschirm zu beschränken, können Sie die Media Features mit dem Bildschirmmedientyp verketten:

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

Testen auf mehrere Queries

Sie können eine durch Kommas getrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers einem der verschiedenen Medientypen, Features oder Zustände entspricht.

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 sich der Browser-Viewport im Hochformat befindet (die Viewport-Höhe ist größer als die Viewport-Breite):

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

In diesem Beispiel, wenn der Benutzer in eine PDF druckt und die Seitenhöhe 800px beträgt, gibt die Media Query true zurück, weil die erste Abfragekomponente — die testet, ob der Viewport eine Höhe von 680px oder mehr hat — true 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 true ist.

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

Bedeutung einer Query umkehren

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

@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 durch Kommas getrennten Liste von Media Queries jedes not auf die einzelne Query angewendet wird, in der es enthalten ist, und alle Features innerhalb dieser einzelnen Query betrifft. In diesem Beispiel wird das not auf die erste Media Query screen and (color) angewendet, die beim ersten Komma endet:

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

Da 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:

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

Klammern begrenzen die Komponenten der Abfrage, die negiert werden. Zum Beispiel, um nur die Abfrage (width > 1000px) zu negieren:

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

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

@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, gilt das not für hover aber nicht für screen.

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 keine Wirkung auf moderne Browser.

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

Testen auf mehrere Features mit or

Sie können or verwenden, um auf eine Übereinstimmung zwischen mehr als einem Feature zu testen, das true ist, wenn eines der Features wahr ist. Zum Beispiel testet die folgende Abfrage auf Geräte, die entweder ein Monochromanzeige- oder eine Hover-Fähigkeit haben:

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

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 mit einem Komma trennen oder Klammern verwenden, um Unterausdrücke von Media Features zu gruppieren, um die Reihenfolge der Auswertung zu klären.

Zum Beispiel sind die folgenden Abfragen beide gültig:

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

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

Siehe auch

• @media
• Containment Queries
• Medienabfragen programmatisch testen
• CSS-Animationen zwischen Media Queries
• Erweiterte Mozilla-Media-Features
• Erweiterte WebKit-Media-Features