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 verschiedenen Weisen kombiniert werden können, wobei logische Operatoren verwendet werden. Media Queries sind nicht case-sensitiv.

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

  Der Typ ist optional (und wird standardmäßig auf all gesetzt), außer wenn der logische Operator only verwendet wird.

• Media-Features beschreiben ein spezifisches Merkmal 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

  Zum Beispiel ermöglicht das hover-Feature eine Abfrage, ob das Gerät das Schweben über Elementen unterstützt. Media-Feature-Ausdrücke testen deren Vorhandensein oder Wert und sind vollständig optional. Jedes Media-Feature-Ausdruck muss von Klammern umgeben sein.

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

Eine Media Query wird als true berechnet, 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. Anfragen mit unbekannten Medientypen sind immer falsch.

Ansprechen von Medientypen

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

@media print {
  /* … */
}

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

@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 abgelehnt, und es bleiben nur screen, print und all. Um spezifischere Attribute anzusprechen, verwenden Sie stattdessen Media Features.

Ansprechen von Media Features

Media Features beschreiben die spezifischen Merkmale eines bestimmten User Agents, des Ausgabegeräts oder der Umgebung. Zum Beispiel können Sie spezielle Stile auf Breitbildschirme, Computer mit Mäusen oder Geräte anwenden, die unter schwachen Lichtverhältnissen verwendet werden. Dieses Beispiel wendet Stile an, wenn der primäre Eingabemechanismus 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 aufgezählten 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-" vorangestellt werden, um "Minimumsbedingung" oder "Maximalbedingung" Einschränkungen auszudrücken. Zum Beispiel wird dieses CSS Stile nur dann anwenden, wenn die Viewport-Breite Ihres Browsers gleich oder geringer als 1250px ist:

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

Die folgenden Media Queries entsprechen dem obigen Beispiel:

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

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

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

Die folgenden Media Queries sind gleichwertig:

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

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

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

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

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

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

Wenn Sie eine Media-Feature-Abfrage erstellen, ohne einen Wert anzugeben, 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 Farbdisplay angewendet:

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

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

Für weitere Beispiele zu Media Features sehen 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 not, and und only ins Spiel. Darüber hinaus können Sie mehrere Media Queries in eine durch Kommas getrennte Liste kombinieren; dies ermöglicht es Ihnen, dieselben Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische or-Komposition ausgewertet werden: So interpretiert, als wäre jede Media Query in Klammern mit einem or dazwischen.

Im vorherigen Beispiel haben wir den and-Operator verwendet, um einen Medientyp 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, und kehrt deren normale Bedeutung um. 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 ohne Bewertung der Media Feature-Ausdrücke anwenden, aber er hat keine Wirkung in modernen Browsern.

Kombinieren mehrerer Typen oder Features

Das and-Schlüsselwort kombiniert ein Media Feature mit einem Medientyp oder anderen Media Features. In diesem Beispiel werden zwei Media Features kombiniert, um Stile auf Geräte mit einer Breite von mindestens 30 ems und einer Landschaftsausrichtung 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 Medientyp screen verketten:

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

Testen mehrerer Abfragen

Sie können eine durch Kommas getrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem von mehreren Media-Typen, Features oder Zuständen übereinstimmt.

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

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

In diesem Beispiel, wenn der Benutzer auf ein PDF druckt und die Seitenhöhe 800px beträgt, gibt die Media Query true zurück, weil die erste Anfragekomponente — 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 Anfragekomponente 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 ({).

Umkehren der Bedeutung einer Abfrage

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

@media not print {
  /* … */
}

Der not-Operator negiert nur die Media Query, auf die er angewendet wird. 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 nur auf die einzelne Media Query angewendet wird, in der es enthalten ist, und auf alle Features in dieser einzigen Anfrage. In diesem Beispiel wird das not auf die erste Media Query screen and (color) angewendet, die am ersten Komma endet:

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

Da die Anfrage mit einem Medientyp screen beginnt, können Sie screen and (color) nicht in Klammern setzen. Wenn Ihre Media Query jedoch nur aus Features besteht, müssen Sie die Anfrage einklammern:

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

Klammern begrenzen die Komponenten der Anfrage, 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-Feature der Media Query, aber nicht den screen-Medientyp:

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

not (hover) stimmt überein, wenn das Gerät keine Hover-Funktion hat. In diesem Fall, aufgrund seiner Anordnung, wird not auf hover angewendet, aber nicht auf 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 Auswirkung auf moderne Browser.

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

Testen mehrerer Features mit or

Sie können or verwenden, um auf eine Übereinstimmung unter mehr als einem Feature zu testen, wobei true zurückgegeben wird, wenn eines der Features true ist. Zum Beispiel testet die folgende Abfrage Geräte mit einem Monochrom-Display oder Hover-Fähigkeit:

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

Beachten Sie, dass Sie den or-Operator nicht auf derselben 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 Sub-Ausdrücke von Media Features zu gruppieren, um die Reihenfolge der Auswertung zu verdeutlichen.

Zum Beispiel sind die folgenden Abfragen beide gültig:

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

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

Siehe auch

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