Verwendung von Media Queries
Media Queries ermöglichen es Ihnen, CSS-Stile basierend auf dem Medientyp eines Geräts (wie Druck vs. Bildschirm) oder anderen Merkmalen oder Eigenschaften wie Bildschirmauflösung oder Orientierung, Seitenverhältnis, Viewport-Breite oder -Höhe des Browsers sowie 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. - Ausrichten auf bestimmte Medien für die
<style>
,<link>
,<source>
und andere HTML-Elemente mit den Attributenmedia=
odersizes="
. - Testen und Überwachen von Medienzuständen durch die Methoden
Window.matchMedia()
undEventTarget.addEventListener()
.
Hinweis:
Die Beispiele auf dieser Seite verwenden zur Veranschaulichung das CSS @media
, aber die grundlegende Syntax ist 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 case-sensitiv.
-
Medientypen definieren die übergeordnete Kategorie des Geräts, für die die Media Query gilt:
all
,print
,screen
.Der Typ ist optional (als
all
angenommen), es sei denn, der logische Operatoronly
wird verwendet. -
Media Features beschreiben eine spezifische Eigenschaft des User-Agent, 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 Query zu prüfen, ob das Gerät das Hovering über Elemente unterstützt. Media-Feature-Ausdrücke testen auf ihre Präsenz oder ihren Wert und sind vollständig optional. Jedes Media-Feature-Ausdruck muss in Klammern gesetzt werden. -
Logische Operatoren können verwendet werden, um eine komplexe Media Query zu erstellen:
not
,and
undonly
. Mehrere Media Queries können auch zu einer einzigen Regel kombiniert werden, indem sie durch Kommata getrennt werden.
Eine Media Query errechnet sich zu true
, wenn der Medientyp (falls angegeben) dem Gerät entspricht, auf dem ein Dokument angezeigt wird, und alle Media-Feature-Ausdrücke als wahr ausgewertet werden.
Abfragen mit unbekannten Medientypen sind immer falsch.
Hinweis:
Ein Stylesheet mit einer Media Query, die an sein <link>
-Tag angehängt ist, wird trotzdem heruntergeladen, auch wenn die Query false
zurückgibt. Der Download erfolgt, aber mit einer viel niedrigeren Priorität.
Dennoch werden die Inhalte nicht angewendet, es sei denn und bis das Ergebnis der Query auf true
wechselt.
Gründe dafür können Sie in Tomayacs Blog Why Browser Download Stylesheet with Non-Matching Media Queries nachlesen.
Medienarten gezielt ansprechen
Medientypen beschreiben die allgemeine Kategorie eines bestimmten Geräts. Obwohl Websites üblicherweise für Bildschirme entwickelt werden, möchten Sie vielleicht Stile erstellen, die spezielle Geräte wie Drucker oder audio-basierte Screenreader ansprechen. Zum Beispiel richtet sich dieses CSS an Drucker:
@media print {
/* … */
}
Sie können auch mehrere Geräte gezielt ansprechen.
Diese @media
-Regel verwendet beispielsweise zwei Media Queries, um sowohl Geräte mit 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 als veraltet markiert, wobei nur screen
, print
und all
übrigblieben. Um spezifischere Attribute zu adressieren, verwenden Sie stattdessen Media Features.
Zielgerichtetes Ansprechen von Media Features
Media Features beschreiben die spezifischen Eigenschaften eines bestimmten User-Agent, Ausgabegeräts oder der Umgebung. Beispielsweise können Sie spezifische Stile für Breitbildmonitore, Computer mit Maussteuerung oder Geräte in lichtarmen Umgebungen anwenden. Dieses Beispiel wendet Stile an, wenn der primäre Eingabemechanismus des Benutzers (wie eine Maus) über Elemente hovern kann:
@media (hover: hover) {
/* … */
}
Media Features sind entweder „Range“ oder „Discrete“.
Discrete Features beziehen ihren Wert aus einer enumerierten Menge möglicher Schlüsselwortwerte. Beispielsweise akzeptiert das diskrete Feature orientation
entweder landscape
oder portrait
.
@media print and (orientation: portrait) {
/* … */
}
Viele Range Features können mit "min-" oder "max-" vorangestellt werden, um „Mindestbedingungen“ oder „Höchstbedingungen“ auszudrücken. Zum Beispiel wird dieses CSS nur angewendet, wenn die Viewport-Breite des Browsers gleich oder kleiner als 1250px ist:
@media (max-width: 1250px) {
/* … */
}
Die folgenden Media Queries sind gleichwertig zu obigem Beispiel:
@media (width <= 1250px) {
/* … */
}
@media (1250px >= width) {
/* … */
}
Mit Range Features bei 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 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 Wertangabe erstellen, werden die verschachtelten Stile verwendet, solange der Wert des Features nicht 0
oder none
ist.
Zum Beispiel gilt dieses CSS für jedes Gerät mit einem Farbdisplay:
@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 beinhalten, immer false.
Weitere Beispiele zu Media Features finden Sie auf der 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 kommaseparierten Liste kombinieren. Dadurch können Sie dieselben Stile in verschiedenen Situationen anwenden, wobei die enthaltenen Media Queries als logische or
-Zusammensetzung ausgewertet werden: interpretiert, als ob jede Media Query in Klammern mit einem or
dazwischen stünde.
Im vorherigen Beispiel haben wir gesehen, wie der and
-Operator verwendet wird, um einen Medientyp mit einem Media Feature zu gruppieren.
Der and
-Operator kann auch mehrere Media Features innerhalb einer einzigen Media Query kombinieren.
Der not
-Operator negiert eine Media Query oder ein Media Feature, wenn er mit Klammern verwendet wird, und kehrt im Wesentlichen deren normale Bedeutungen 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 ältere Browser daran zu hindern, die Stile anzuwenden, ohne die Media Feature-Ausdrücke auszuwerten. Er hat jedoch in modernen Browsern keine Wirkung.
Hinweis:
In den meisten Fällen wird der Medientyp all
standardmäßig verwendet, wenn kein anderer Typ angegeben ist.
Wenn Sie jedoch den only
-Operator verwenden, müssen Sie explizit einen Medientyp angeben. Sie könnten beispielsweise only screen
oder only print
als Gesamtheit sehen.
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 die Stile auf Geräte im Querformat mit einer Breite von mindestens 30 em
zu beschränken:
@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
verketten:
@media screen and (min-width: 30em) and (orientation: landscape) {
/* … */
}
Testen mehrerer Queries
Sie können eine kommaseparierte Liste von Media Queries verwenden, um Stile anzuwenden, wenn das Gerät des Benutzers mit einem der 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 sich der Browser-Viewport im Hochformat befindet (die Höhe des Viewports ist größer als die Breite):
@media (min-height: 680px), screen and (orientation: portrait) {
/* … */
}
In diesem Beispiel wird die Media Query bei einem Druck in eine PDF-Datei mit einer Seitenhöhe von 800px als wahr ausgewertet, da die erste Komponentenabfrage – die prüft, ob der Viewport eine Höhe von 680px
oder mehr hat – wahr ist.
Ähnlich wird die Media Query wahr, wenn der Benutzer ein Smartphone im Hochformat verwendet, dessen Viewport-Höhe 480px beträgt, da die zweite Komponentenabfrage wahr ist.
In einer kommaseparierten Liste von Media Queries enden die einzelnen Media Queries am Komma oder im Fall der letzten Media Query der Liste mit der öffnenden Klammer ({
).
Umkehren der Bedeutung einer Query
Das Schlüsselwort not
kehrt die Bedeutung einer einzelnen Media Query um.
Beispielsweise 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. Ohne Klammern negiert not
alle Features innerhalb der Media Query, in der es enthalten ist.
Das bedeutet: In einer kommaseparierten Liste von Media Queries wird jedes not
nur auf die einzelne Query angewendet, in der es enthalten ist, und gilt 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:
@media not screen and (color), print and (color) {
/* … */
}
Die obige Abfrage wird so ausgewertet:
@media (not (screen and (color))), print and (color) {
/* … */
}
Beide Beispiele sind gültig.
Medienbedingungen können gruppiert werden, indem sie in Klammern (()
) gesetzt werden.
Diese Gruppen können dann in einer Bedingung verschachtelt werden, genauso wie eine einzelne Media Query.
Der not
-Operator wird in einer Media Query zuletzt ausgewertet, wodurch er auf die gesamte Media Query und nicht auf ein einzelnes Feature innerhalb einer Query angewendet wird, als ob direkt nach dem not
eine öffnende Klammer gesetzt und am Ende der Media Query wieder geschlossen würde.
Die folgende Query:
@media not all and (monochrome) {
/* … */
}
wird so ausgewertet:
@media not (all and (monochrome)) {
/* … */
}
Sie wird nicht so ausgewertet:
@media (not all) and (monochrome) {
/* … */
}
Um ein einzelnes Feature innerhalb einer Media Query zu negieren, verwenden Sie Klammern. Indem Sie ein not
und ein Media Feature in Klammern einschließen, schränken Sie die Komponenten der Query ein, die negiert werden.
In diesem Beispiel negieren wir das Media Feature hover
, aber nicht den Medientyp all
:
@media all and (not(hover)) {
/* … */
}
Das not(hover)
trifft zu, wenn das Gerät keine Hover-Fähigkeiten hat. In diesem Fall gilt das not
wegen der Klammern nur für hover
, nicht aber 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.
Es hat keine Wirkung auf moderne Browser.
@media only screen and (color) {
/* … */
}
Testen mehrerer Features mit or
Sie können or
verwenden, um eine Übereinstimmung unter mehreren Features zu testen, wobei das Ergebnis true
ist, wenn eines der Features wahr ist.
Zum Beispiel testet die folgende Query Geräte, die über ein monochromes Display oder Hover-Fähigkeiten verfügen:
@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 die Media Features entweder mit einem Komma trennen oder Klammern verwenden, um Teil-Ausdrücke von Media Features zu gruppieren und die Reihenfolge der Auswertung zu klären.
Die folgenden Queries sind zum Beispiel beide gültig:
@media ((color) and (hover)) or (monochrome) {
/* … */
}
/* or */
@media (color) and (hover), (monochrome) {
/* … */
}