Verwendung von Media Queries

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.

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

  Der Typ ist optional (wird als all angenommen), es sei denn, es wird der logische Operator only verwendet.

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

  • 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 die hover-Funktion einer Abfrage zu prüfen, ob das Gerät das Hovern über Elemente unterstützt. Media Feature-Ausdrücke testen auf deren Vorhandensein oder Wert und sind völlig optional. Jedes Media Feature-Ausdruck muss in Klammern eingeschlossen sein.

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

Eine Media Query wird zu 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 evaluiert werden. Anfragen, die unbekannte Medientypen beinhalten, sind immer falsch.

Zielgerichtete Medientypen

Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts. Obwohl Websites üblicherweise mit Bildschirmen im Hinterkopf entworfen werden, möchten Sie möglicherweise auch Stile erstellen, die auf spezielle Geräte wie Drucker oder audiobasierte Screenreader abzielen. Dieses CSS zielt beispielsweise 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 zu berücksichtigen:

@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 der ursprünglich definierten Medientypen veraltet, mit nur screen, print und all verbleibend. Um spezifischere Attribute anzuvisieren, verwenden Sie stattdessen Media Features.

Zielgerichtete Media Features

Media Features beschreiben die spezifischen Eigenschaften eines bestimmten User Agents, Ausgabegeräts oder der Umgebung. Zum Beispiel können Sie bestimmte Stile auf Breitbildmonitore, Computer, die Mäuse verwenden, oder Geräte anwenden, die in dunklen Bedingungen verwendet werden. Dieses Beispiel wendet Stile an, wenn das primäre Eingabegerät des Benutzers (z.B. eine Maus) über Elemente schweben kann:

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

Media Features sind entweder Bereichs- oder diskrete Features.

Diskrete Features nehmen ihren Wert aus einem enumerierten Satz 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 "Mindestbedingungs-" oder "Höchstbedingungs-" Einschränkungen 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 entsprechen dem obigen Beispiel:

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

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

Mit den Bereichs-Features von Media Queries können Sie entweder die inklusiven min- und max- Präfixe verwenden oder die kürzeren Bereichssyntax-Operatoren <= und >=.

Die folgenden Media Queries sind gleichwertig:

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

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

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

Die obigen 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 Abfrage ohne Angabe eines Wertes erstellen, werden die verschachtelten Stile angewandt, solange der Wert des Features nicht 0 oder none ist. Zum Beispiel wird diese CSS für jedes Gerät mit einem Farbbildschirm angewendet:

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

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

Für weitere Media Feature-Beispiele, besuchen 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 in eine durch Kommas getrennte Liste kombinieren; dies ermöglicht es Ihnen, die gleichen Stile in unterschiedlichen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische or-Zusammensetzung ausgewertet werden: interpretiert, als ob jede Media Query in Klammern mit einem or dazwischen wäre.

Im vorherigen Beispiel haben wir den and-Operator gesehen, der verwendet wird, um einen Medien-Typ mit einem Medien-Feature zu gruppieren. Der and-Operator kann auch mehrere Media Features innerhalb einer einzige Media Query kombinieren. Der not-Operator negiert eine Media Query oder ein Media Feature, wenn er in Klammern verwendet wird, und kehrt ihre normalen Bedeutungen grundlegend um. Der or-Operator kann unter bestimmten Bedingungen verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren. Schließlich wurde der only-Operator verwendet, um zu verhindern, dass ältere Browser die Stile anwenden, ohne die Media Feature-Ausdrücke auszuwerten, aber er hat in modernen Browsern 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 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 Bildschirm zu beschränken, können Sie die Media Features an den Medientyp screen anfügen:

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

Testen von mehreren Abfragen

Sie können eine durch Kommas getrennte 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 im Hochformat ist (die Viewport-Höhe ist größer als die Viewport-Breite):

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

In diesem Beispiel gilt: Wenn der Benutzer in ein PDF druckt und die Seitenhöhe 800px beträgt, ergibt die Media Query true, 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 Hochformat mit einer Viewport-Höhe von 480px ist, ergibt die Media Query true, weil die zweite Abfragekomponente wahr ist.

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

Abfragebedeutung invertieren

Das Schlüsselwort not invertiert die Bedeutung einer einzelnen Media Query. Zum Beispiel werden die CSS-Stile in dieser Media Query auf alles außer gedruckten Medien 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, in einer durch Kommas getrennten Liste von Media Queries wendet sich jedes not auf die einzelne Abfrage, in der es enthalten ist, an und gilt für alle Features innerhalb dieser einzelnen Abfrage. In diesem Beispiel wendet sich das not auf die erste Media Query screen and (color) an, die beim ersten Komma endet:

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

Da die Abfrage mit einem Medientyp screen beginnt, kann man 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 (width > 1000px)-Abfrage zu negieren:

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

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

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

Das not (hover) trifft zu, wenn das Gerät keine Hover-Fähigkeit hat. Aufgrund seiner Anordnung bezieht sich das not auf hover, aber nicht auf screen.

Verbesserung der Kompatibilität mit älteren Browsern

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

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

Testen auf mehrere Features mit or

Sie können or verwenden, um auf eine Übereinstimmung unter mehr als einem Feature zu testen und löst true aus, wenn eines der Features zutrifft. Zum Beispiel testet die folgende Abfrage auf Geräte, die ein monochromes Display oder eine Hover-Fähigkeit haben:

@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 Unterausdrü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
• Medienabfragen programmgesteuert testen
• CSS-Animationen zwischen Media Queries
• Erweiterte Mozilla-Media-Features
• Erweiterte WebKit-Media-Features