Verwendung von Media Queries

Media Queries ermöglichen es Ihnen, CSS-Stile basierend auf dem Medientyp eines Geräts (z. B. Drucken vs. Bildschirm) oder anderen Merkmalen wie Bildschirmauflösung oder -ausrichtung, Bildseitenverhältnis, Browser-Viewport-Breite oder -Höhe, Benutzereinstellungen wie bevorzugte reduzierte Bewegung, Datennutzung oder Transparenz anzuwenden.

Media Queries werden für Folgendes verwendet:

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

Syntax

Eine Media Query besteht aus einem optionalen Medientyp und beliebig vielen Media-Feature-Ausdrücken, die optional auf verschiedene Weise mit logischen Operatoren kombiniert werden können. Media Queries sind nicht zwischen Groß- und Kleinschreibung unterscheidend.

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 zu true ausgewertet werden. Abfragen mit unbekannten Medientypen ergeben immer false.

Hinweis: Ein Stylesheet mit einer an sein <link>-Tag gebundene Media Query wird trotzdem heruntergeladen, auch wenn die Abfrage false ergibt. Der Download wird jedoch mit einer deutlich niedrigeren Priorität durchgeführt. Dennoch werden die Inhalte erst angewendet, wenn das Ergebnis der Anfrage zu true wechselt. Sie können in Tomayacs Blog Why Browsers Download Stylesheets with Non-Matching Media Queries nachlesen, warum dies geschieht.

Medientypen ansprechen

Medientypen beschreiben die allgemeine Kategorie eines gegebenen Geräts. Obwohl Websites häufig für Screens entwickelt werden, möchten Sie möglicherweise Stile erstellen, die spezielle Geräte wie Drucker oder audio-basierte Screenreader ansprechen. Dieses Beispiel zeigt CSS, das Drucker anspricht:

css
@media print {
  /* … */
}

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

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

Sehen Sie in der Liste der Medientypen nach, welche Optionen verfügbar sind. Da Medientypen Geräte nur in sehr allgemeinen Begriffen beschreiben, wurden die meisten ursprünglich definierten Medientypen abgelehnt, wobei nur screen, print und all verblieben sind. Um spezifischere Attribute anzusprechen, verwenden Sie stattdessen Media Features.

Media Features ansprechen

Media Features beschreiben die spezifischen Merkmale eines bestimmten User Agents, Ausgabegeräts oder einer Umgebung. Zum Beispiel können Sie spezifische Stile für Breitbildmonitore, Computer mit Mausnutzung oder Geräte, die in Umgebungen mit schwachem Licht verwendet werden, anwenden. Dieses Beispiel wendet Stile an, wenn der Benutzer eine primäre Eingabemethode (wie eine Maus) verwendet, die Hovering über Elementen unterstützt:

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

Media Features können entweder Bereichs- oder diskrete Features sein.

Diskrete Features nehmen ihren Wert aus einer enumerierten Menge möglicher Schlüsselwörter. 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"-Einschränkungen auszudrücken. Das folgende CSS wendet nur Stile an, wenn die Viewport-Breite Ihres Browsers gleich oder kleiner als 1250px ist:

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

Die folgenden Media Queries sind äquivalent zum obigen Beispiel:

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

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

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

Die folgenden Media Queries sind äquivalent:

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

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

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

Wenn Sie eine Media-Feature-Query ohne Angabe eines Werts 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 Farbbildschirm angewendet:

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

Falls ein Feature nicht auf das Gerät zutrifft, auf dem der Browser ausgeführt wird, ergeben Ausdrücke, die dieses Media Feature verwenden, immer false.

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

Komplexe Media Queries erstellen

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. Außerdem können Sie mehrere Media Queries zu einer kommagetrennten Liste kombinieren; dies erlaubt es Ihnen, dieselben Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische or-Zusammensetzung ausgewertet werden: Sie werden so interpretiert, als ob jede Media Query in Klammern steht und mit einem or dazwischen.

Im vorherigen Beispiel haben wir gesehen, dass der Operator and verwendet wurde, um einen Media-Typ mit einem Media Feature zu kombinieren. Der Operator and kann auch mehrere Media Features innerhalb einer einzigen Media Query kombinieren. Der Operator not negiert eine Media Query oder ein Media Feature beim Einsatz mit Klammern, was ihre normale Bedeutung im Wesentlichen umkehrt. Der Operator or kann unter bestimmten Bedingungen verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren. Abschließend wurde der Operator only verwendet, um ältere Browser daran zu hindern, die Stile ohne die Evaluierung der Media-Feature-Ausdrücke anzuwenden, aber er hat in modernen Browsern keinen Effekt.

Hinweis: In den meisten Fällen wird der Medientyp all standardmäßig verwendet, wenn kein anderer Typ angegeben ist. Allerdings müssen Sie, falls Sie den Operator only verwenden, explizit einen Medientyp angeben. Sie können only screen oder only print als Gesamtbegriff sehen.

Mehrere Typen oder Features kombinieren

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 em zu beschränken:

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

Um die Stile auf Geräte mit Bildschirm zu beschränken, können Sie die Media Features mit dem Medientyp screen verbinden:

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

Prüfung mehrerer Abfragen

Sie können eine kommagetrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem beliebigen der Media-Typen, -Features oder -Zustände übereinstimmt.

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

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

In diesem Beispiel ergibt die Media Query true, wenn der Benutzer eine PDF-Datei druckt und die Seitenhöhe 800px beträgt, da die erste Abfragekomponente – die überprüft, ob die Viewport-Höhe mindestens 680px beträgt – wahr ist. Ebenso ergibt die Media Query true, wenn ein Benutzer auf einem Smartphone im Hochformat mit einer Viewport-Höhe von 480px arbeitet, da die zweite Abfragekomponente wahr ist.

In einer kommagetrennten Liste von Media Queries endet jede einzelne Media Query am Komma oder, im Fall der letzten Media Query in der Liste, an der öffnenden geschwungenen Klammer ({).

Bedeutung einer Abfrage invertieren

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

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

Das not negiert nur die Media Query, auf die es angewendet wird. Ohne Klammern negiert not alle Features innerhalb der Media Query, in der es enthalten ist. In einer kommagetrennten Liste von Media Queries gilt jedes not nur für die einzelne Query, in der es enthalten ist, und damit für alle Features innerhalb dieser einzelnen Query. In diesem Beispiel gilt das not für die erste Media Query, die am ersten Komma endet:

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

Die obige Abfrage wird so ausgewertet:

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

Beide Beispiele sind gültig. Media-Bedingungen können durch Einfassen in Klammern (()) gruppiert werden. Diese Gruppen können dann wie eine einzelne Media Query innerhalb einer Bedingung verschachtelt werden.

Das not wird zuletzt in einer Media Query ausgewertet, das bedeutet, es gilt für die gesamte Media Query, nicht nur für ein einzelnes Feature innerhalb einer Abfrage, so als ob unmittelbar nach dem not eine öffnende Klammer hinzugefügt und am Ende der Media Query geschlossen wurde.

Die folgende Abfrage:

css
@media not all and (monochrome) {
  /* … */
}

wird so ausgewertet:

css
@media not (all and (monochrome)) {
  /* … */
}

Sie wird nicht so ausgewertet:

css
@media (not all) and (monochrome) {
  /* … */
}

Um ein einzelnes Feature innerhalb einer Media Query zu negieren, verwenden Sie Klammern. Das Einfassen eines not und eines Media Features in Klammern beschränkt die Komponenten der Abfrage, die negiert werden.

In diesem Beispiel negieren wir das hover-Media Feature, aber nicht den Medientyp all:

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

Das not(hover) trifft zu, wenn das Gerät keine Hover-Funktionalität hat. In diesem Fall gilt das not, aufgrund der Klammern, nur für hover, nicht jedoch für all.

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 angegebenen Stile anwenden. In modernen Browsern hat es keinen Effekt.

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

Testen mehrerer Features mit or

Sie können or verwenden, um mehrere Features zu prüfen und eine Übereinstimmung zu erzielen, wenn eines der Features true ergibt. Zum Beispiel testet die folgende Abfrage Geräte, die ein monochromes Display oder Hover-Funktionalität besitzen:

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

Beachten Sie, dass Sie den Operator or nicht auf derselben Ebene wie die Operatoren and und not verwenden können. Sie können entweder die Media Features mit einem Komma trennen oder Klammern verwenden, um Unterausdrücke der Media Features zu gruppieren und die Auswertungsreihenfolge zu verdeutlichen.

Zum Beispiel sind die folgenden Abfragen beide gültig:

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

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

Siehe auch