Verwenden von Media Queries
Media Queries erlauben es Ihnen, CSS-Stile abhängig vom Medientyp eines Geräts (wie z.B. Druck vs. Bildschirm) oder anderen Merkmalen oder Eigenschaften wie Bildschirmauflösung, Seitenverhältnis, Browser-Viewport-Breite oder -Höhe, Benutzerpräferenzen wie reduzierte Bewegung, Datennutzung oder Transparenz anzuwenden.
Media Queries werden für Folgendes verwendet:
- Bedingtes Anwenden von Stilen mit den CSS
@media
und@import
At-Regeln. - Zielgerichtetes Ansprechen bestimmter Medien für die
<style>
,<link>
,<source>
und andere HTML-Elemente mit denmedia=
odersizes="
Attributen. - Testen und Überwachen von Medienzuständen mittels der Methoden
Window.matchMedia()
undEventTarget.addEventListener()
.
Hinweis:
Die Beispiele auf dieser Seite verwenden CSS @media
zu Illustrationszwecken, aber die grundlegende Syntax bleibt für alle Arten von Media Queries gleich.
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), außer wenn deronly
logische Operator verwendet wird. -
Media Features beschreiben ein spezifisches Merkmal des Benutzeragenten, des Ausgabegeräts oder der Umgebung:
any-hover
any-pointer
aspect-ratio
color
color-gamut
color-index
device-aspect-ratio
Veraltetdevice-height
Veraltetdevice-posture
device-width
Veraltetdisplay-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
-Feature einer Abfrage 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 von Klammern umgeben sein. -
Logische Operatoren können verwendet werden, um eine komplexe Media Query zu erstellen:
not
,and
, undonly
. Sie können auch mehrere Media Queries zu einer einzigen Regel kombinieren, indem Sie sie mit Kommas trennen.
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 als wahr berechnet werden.
Abfragen, die unbekannte Medientypen umfassen, sind immer falsch.
Hinweis:
Ein Style Sheet mit einer Media Query, die an sein <link>
-Tag angehängt ist, wird dennoch heruntergeladen, auch wenn die Abfrage false
zurückgibt; der Download erfolgt, aber die Priorität des Herunterladens ist deutlich niedriger.
Dennoch werden seine Inhalte nicht angewendet, es sei denn, bis das Ergebnis der Abfrage auf true
ändert.
Sie können lesen, warum das passiert, in Tomayacs Blog Why Browser Download Stylesheet with Non-Matching Media Queries.
Ausrichten auf Medientypen
Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts. Obwohl Websites meist für Bildschirme entworfen werden, möchten Sie möglicherweise Stile erstellen, die spezielle Geräte wie Drucker oder audiobasierte Screenreader ansprechen. Zum Beispiel ist dieses CSS auf Drucker ausgerichtet:
@media print {
/* … */
}
Sie können auch mehrere Geräte ansprechen.
Zum Beispiel verwendet diese @media
-Regel zwei Media Queries, um sowohl Bildschirm- als auch Druckergeräte zu adressieren:
@media screen, print {
/* … */
}
Sehen Sie Medientypen für die Liste verfügbarer 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 Media Features.
Ausrichten auf Media Features
Media Features beschreiben die spezifischen Eigenschaften eines bestimmten Benutzeragenten, Ausgabegeräts oder Umgebung. Zum Beispiel können Sie spezifische Stile für Breitbildmonitore, Computer mit Mäusen oder Geräte, die unter schlechten Lichtverhältnissen genutzt werden, anwenden. Dieses Beispiel wendet Stile an, wenn der primäre Eingabemechanismus des Benutzers (wie eine Maus) Elemente überfahren kann:
@media (hover: hover) {
/* … */
}
Media Features sind entweder Bereich oder diskret.
Diskrete Features nehmen ihren Wert aus einer aufgezählten Menge von möglichen Schlüsselwortwerten. 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 "Mindestbedingung" oder "Höchstbedingung"-Beschränkungen auszudrücken. Zum Beispiel wird dieses CSS nur dann Stile anwenden, wenn die Breite des Viewports Ihres Browsers gleich oder schmaler als 1250px ist:
@media (max-width: 1250px) {
/* … */
}
Die folgenden Media Queries sind gleichwertig mit dem obigen Beispiel:
@media (width <= 1250px) {
/* … */
}
@media (1250px >= width) {
/* … */
}
Mit Bereichs-Features bei Media Queries können Sie entweder die inklusiven min-
und max-
Präfixe oder die prägnanteren Bereichssyntax-Operatoren <=
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 Media Feature-Abfrage 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 für jedes Gerät mit einem Farbbildschirm angewendet:
@media (color) {
/* … */
}
Wenn ein Merkmal nicht auf das Gerät zutrifft, auf dem der Browser läuft, 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 Merkmal.
Erstellen komplexer Media Queries
Manchmal möchten Sie eine Media Query erstellen, die von mehreren Bedingungen abhängig ist. Hier kommen die logischen Operatoren ins Spiel: not
, and
, und only
.
Darüber hinaus können Sie mehrere Media Queries zu einer kommagetrennten Liste zusammenfassen; dies ermöglicht es Ihnen, die gleichen Stile in verschiedenen Situationen anzuwenden, wobei die enthaltenen Media Queries als logische or
-Komposition ausgewertet werden: interpretiert als ob jede Media Query in Klammern mit einem or
zwischen ihnen wäre.
Im vorherigen Beispiel sahen wir den and
-Operator, der verwendet wurde, um einen Media Typ mit einem Media Feature zu gruppieren.
Der and
-Operator kann auch verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren.
Der not
-Operator negiert eine Media Query oder ein Media Feature, wenn er mit Klammern verwendet wird, und kehrt im Wesentlichen ihre normalen Bedeutungen um.
Der or
-Operator kann unter bestimmten Bedingungen verwendet werden, um mehrere Media Features innerhalb einer einzigen Media Query zu kombinieren.
Zuletzt wurde der only
-Operator verwendet, um zu verhindern, dass ältere Browser die Stile anwenden, ohne die Ausdrücke der Media Features auszuwerten, aber er hat in modernen Browsern keine Wirkung.
Hinweis:
In den meisten Fällen wird der all
-Medientyp standardmäßig verwendet, wenn kein anderer Typ angegeben wird.
Wenn Sie jedoch den only
-Operator verwenden, müssen Sie einen Medientyp ausdrücklich angeben. Sie können only screen
oder only print
als Ganzes sehen.
Kombinieren mehrerer Typen oder Merkmale
Das and
-Schlüsselwort 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 einem Bildschirm zu beschränken, können Sie die Media Features an den screen
-Medientyp anketten:
@media screen and (width >= 30em) and (orientation: landscape) {
/* … */
}
Testen für mehrere Abfragen
Sie können eine kommagetrennte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem beliebigen von verschiedenen Medientypen, Features oder Zuständen ü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 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 eine PDF druckt und die Seitenhöhe 800px beträgt, gibt die Media Query true zurück, weil die erste Abfragekomponente - die prüft, ob der 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, gibt die Media Query true zurück, weil die zweite Abfragekomponente wahr ist.
In einer kommagetrennten Liste von Media Queries enden die einzelnen Media Queries beim Komma oder, im Fall der letzten Media Query in der Liste, bei der öffnenden Klammer ({
).
Eine Abfrage umkehren
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
negiert ohne Klammern alle Features, die innerhalb der Media Query enthalten sind. Das bedeutet, in einer kommagetrennten Liste von Media Queries, dass jedes not
auf die einzelne Query angewendet wird, in der es enthalten ist, und auf alle Features innerhalb dieser einzelnen Query. In diesem Beispiel bezieht sich das not
auf die erste Media Query screen and (color)
, die beim ersten Komma endet:
@media not screen and (color), print and (color) {
/* … */
}
Weil 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) {
/* … */
}
Die Klammern begrenzen die Komponenten der Abfrage, die negiert werden. Um zum Beispiel nur die (width > 1000px)
-Abfrage zu negieren:
@media (not (width > 1000px)) and (color), print and (color) {
/* … */
}
not
negiert nur die Abfrage zu seiner Rechten. In diesem Beispiel negieren wir die 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, bezieht sich das not
auf hover
, aber nicht auf screen
.
Verbesserung der Kompatibilität mit älteren Browsern
Das only
-Schlüsselwort verhindert, dass ältere Browser, die Media Queries mit Media Features nicht unterstützen, die gegebenen Stile anwenden.
Es hat keine Wirkung in modernen Browsern.
@media only screen and (color) {
/* … */
}
Testen für mehrere Features mit or
Sie können or
verwenden, um auf eine Übereinstimmung unter mehreren Features zu testen, wobei true
zurückgegeben wird, wenn eines der Features wahr ist.
Zum Beispiel testet die folgende Abfrage auf Geräte, die ein monochromes Display oder Hover-Fähigkeit haben:
@media (not (color)) or (hover) {
/* … */
}
Bitte 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 durch ein Komma trennen oder Klammern verwenden, um Unterausdrücke von Media Features zu gruppieren, um die Auswertungsreihenfolge zu klären.
Zum Beispiel sind die folgenden Abfragen beide gültig:
@media ((color) and (hover)) or (monochrome) {
/* … */
}
/* or */
@media (color) and (hover), (monochrome) {
/* … */
}