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:
- Bedingtes Anwenden von Stilen mit den CSS
@media
- und@import
-At-Regeln. - Ansprechen bestimmter Medien für die
<style>
,<link>
,<source>
und andere HTML-Elemente mit den Attributenmedia=
odersizes="
. - Testen und Überwachen von Medienzuständen mithilfe der Methoden
Window.matchMedia()
undEventTarget.addEventListener()
.
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.
-
Medientypen definieren die übergeordnete Kategorie des Geräts, für die die Media Query gilt:
all
,print
,screen
.Der Typ ist optional (wird standardmäßig als
all
angenommen), außer wenn der logische Operatoronly
verwendet wird. -
Media Features beschreiben eine spezifische Eigenschaft des User Agents, 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 ermöglicht das Feature
hover
, eine Media Query zu erstellen, die überprüft, ob das Gerät Hovering über Elemente unterstützt. Media-Feature-Ausdrücke testen auf Vorhandensein oder Wert und sind vollständig optional. Jedes Media-Feature-Ausdruck muss in Klammern eingegrenzt werden. -
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 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:
@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:
@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:
@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
.
@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:
@media (max-width: 1250px) {
/* … */
}
Die folgenden Media Queries sind äquivalent zum obigen Beispiel:
@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:
@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-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:
@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:
@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:
@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):
@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:
@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:
@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.
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:
@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.
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
:
@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.
@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:
@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:
@media ((color) and (hover)) or (monochrome) {
/* … */
}
/* or */
@media (color) and (hover), (monochrome) {
/* … */
}