Verwendung von Media Queries

Syntax

Eine Media Query besteht aus einem optionalen Medientyp und beliebig vielen Medienmerkmal-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 (Standard ist all), außer wenn Sie den logischen Operator only verwenden.

• Medienmerkmale beschreiben ein bestimmtes Merkmal des User-Agenten, 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 erlaubt das hover-Merkmal einer Query zu überprüfen, ob das Gerät das Überfahren von Elementen unterstützt. Medienmerkmal-Ausdrücke testen auf deren Vorhandensein oder Wert und sind völlig optional. Jeder Medienmerkmal-Ausdruck muss in Klammern gesetzt werden.

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

Eine Media Query wird zu true, wenn der Medientyp (falls spezifiziert) mit dem Gerät übereinstimmt, auf dem ein Dokument angezeigt wird, und alle Medienmerkmal-Ausdrücke zutreffen. Anfragen, die unbekannte Medientypen betreffen, sind immer falsch.

Zielgerichtetes Ansprechen von Medientypen

Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts. Obwohl Websites gewöhnlich unter Berücksichtigung von Bildschirmen 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 {
  /* … */
}

Die Medientypen bieten eine 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 verbleiben. Um spezifischere Attribute anzusprechen, verwenden Sie stattdessen Medienmerkmale.

Zielgerichtetes Ansprechen von Medienmerkmalen

Medienmerkmale beschreiben die spezifischen Eigenschaften eines bestimmten User-Agenten, Ausgabegeräts oder Umgebung. Beispielsweise können Sie spezifische Stile auf Breitbildmonitore, Computer, die Mäuse verwenden, oder Geräte, die bei schlechten Lichtverhältnissen verwendet werden, anwenden. Dieses Beispiel wendet Stile an, wenn das primäre Eingabegerät des Nutzers (z.B. eine Maus) über Elemente fahren kann:

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

Medienmerkmale sind entweder Bereichs- oder diskrete Merkmale.

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

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

Viele Bereichsmerkmale können mit "min-" oder "max-" vorangestellt werden, um "mindestens"-Bedingungen oder "höchstens"-Bedingungen auszudrücken. Zum Beispiel wird dieses CSS nur Stile anwenden, wenn die Viewport-Breite Ihres Browsers gleich oder schmaler als 1250px ist:

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

Die folgenden Media Queries entsprechen dem obigen Beispiel:

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

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

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

Die folgenden Media Queries sind gleichwertig:

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

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

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

Wenn Sie eine Medienmerkmal-Query erstellen, ohne einen Wert anzugeben, werden die verschachtelten Stile verwendet, solange der Wert des Merkmals nicht 0 oder none ist. Zum Beispiel wird dieses CSS auf jedes Gerät mit einem Farbbildschirm angewendet:

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

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

Für weitere Beispiele zu Medienmerkmalen besuchen Sie bitte die Referenzseite zu jedem spezifischen Merkmal.

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. Zudem können Sie mehrere Media Queries zu einer durch Kommata getrennten Liste kombinieren; dies ermöglicht es Ihnen, die gleichen Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logisches or-Konstrukt ausgewertet werden: interpretiert, als ob jede Media Query innerhalb von Klammern mit einem or dazwischen wäre.

Im vorherigen Beispiel haben wir den and-Operator verwendet, um einen Medien-typ mit einem Medien-merkmal zu gruppieren. Der and-Operator kann auch verwendet werden, um mehrere Medienmerkmale innerhalb einer einzelnen Media Query zu kombinieren. Der not-Operator negiert eine Media Query oder ein Medienmerkmal, wenn es in Klammern verwendet wird, und kehrt im Wesentlichen deren normale Bedeutungen um. Der or-Operator kann – unter bestimmten Bedingungen – verwendet werden, um mehrere Medienmerkmale innerhalb einer einzelnen Media Query zu kombinieren. Schließlich wurde der only-Operator verwendet, um zu verhindern, dass ältere Browser die Stile anwenden, ohne die Medienmerkmal-Ausdrücke auszuwerten – er hat in modernen Browsern jedoch keine Wirkung.

Kombination mehrerer Typen oder Merkmale

Das and-Schlüsselwort kombiniert ein Medienmerkmal mit einem Medientyp oder anderen Medienmerkmalen. Dieses Beispiel kombiniert zwei Medienmerkmale, um Stile auf Geräte im Querformat mit einer Breite von mindestens 30ems 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 Medienmerkmale mit dem Medientyp screen verketten:

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

Testen mehrerer Queries

Sie können eine durch Kommata getrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Nutzers einem der verschiedenen Medientypen, -merkmalen oder -zuständen entspricht.

Die folgende Regel enthält zwei Media Queries. Die Stile des Blocks werden angewendet, wenn entweder das Gerät des Nutzers 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 Nutzer in einem PDF druckt und die Seitenhöhe 800px beträgt, ist die Media Query wahr, weil die erste Anfragenkomponente – die prüft, ob der Viewport eine Höhe von 680px oder mehr hat – wahr ist. Ebenso, wenn ein Nutzer auf einem Smartphone im Hochformat mit einer Viewport-Höhe von 480px ist, ist die Media Query wahr, weil die zweite Anfragenkomponente wahr ist.

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

Umkehrung der Bedeutung einer Query

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:

@media not print {
  /* … */
}

Das not negiert nur die Media Query, auf die es angewendet wird. Das not, ohne Klammern, negiert alle Merkmale innerhalb der Media Query, in der es enthalten ist. Dies bedeutet, dass in einer durch Kommata getrennten Liste von Media Queries, jedes not auf die einzelne Query angewendet wird, in der es sich befindet, und auf alle Merkmale innerhalb dieser einzelnen Query. 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 Query mit einem Medientyp screen beginnt, können Sie screen and (color) nicht mit Klammern umschließen. Andererseits, wenn Ihre Media Query nur aus Merkmalen besteht, müssen Sie die Query klammern:

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

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

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

not negiert nur die Query rechts davon. In diesem Beispiel negieren wir das hover-Medienmerkmal, aber nicht den Medientyp screen:

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

Das not (hover) trifft zu, wenn das Gerät keine Hover-Funktionalität hat. In diesem Fall, weil die Reihenfolge so ist, wird not auf hover angewendet, aber nicht auf screen.

Verbesserung der Kompatibilität mit älteren Browsern

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

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

Testen mehrerer Merkmale mit or

Sie können or verwenden, um ein Übereinstimmungen unter mehr als einem Merkmal zu testen, wobei true zurückgegeben wird, wenn eines der Merkmale zutrifft. Zum Beispiel testet die folgende Query für Geräte, die ein monochromes Display oder Hover-Funktionalität 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 Medienmerkmale mit einem Komma trennen oder Klammern verwenden, um Unterausdrücke von Medienmerkmalen zu gruppieren, um die Reihenfolge der Auswertung klarzustellen.

Zum Beispiel sind die folgenden Queries 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-Medienmerkmale
• Erweiterte WebKit-Medienmerkmale