@media

/* At the top level of your code */
@media screen and (width >= 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (width >= 900px) {
    article {
      display: flex;
    }
  }
}

Die @media-Regel kann auf oberster Ebene Ihres Codes platziert oder in jede andere bedingte Gruppenregel verschachtelt werden.

Für eine Diskussion über die Syntax von Media-Queries siehe bitte Using media queries.

Eine Media-Query's <media-query-list> umfasst <media-type>s, <media-feature>s und logische Operatoren.

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Außer bei Verwendung des logischen Operators only ist der Medientyp optional und der Typ all wird impliziert.

all

Geeignet für alle Geräte.

print

Vorgesehen für Printmaterial und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Bitte siehe paged media für Informationen zu Formatierungsfragen, die für diese Formate spezifisch sind.)

screen

Hauptsächlich für Bildschirme vorgesehen.

Ein <media-feature> beschreibt spezifische Eigenschaften des User-Agenten, des Ausgabegeräts oder der Umgebung. Medienmerkmal-Ausdrücke testen auf deren Vorhandensein, Wert oder Wertebereich und sind vollständig optional. Jedes Medienmerkmal muss von Klammern umgeben sein.

any-hover

Ermöglicht irgendein verfügbares Eingabegerät dem Benutzer, über Elemente zu fahren?

any-pointer

Ist irgendein verfügbares Eingabegerät ein Zeigegerät und, wenn ja, wie genau ist es?

aspect-ratio

Breite-zu-Höhe Seitenverhältnis des Viewports.

color

Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät keine Farbe hat.

color-gamut

Ungefähre Farbpalette, die vom User Agent und Ausgabegerät unterstützt wird.

color-index

Anzahl der Einträge in der Farbsuchliste des Ausgabegeräts oder null, wenn das Gerät keine solche Tabelle verwendet.

device-aspect-ratio

Breite-zu-Höhe Seitenverhältnis des Ausgabegeräts. In Media Queries Level 4 veraltet.

device-height

Höhe der Darstellungsfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.

device-posture

Erkennt die aktuelle Haltung des Geräts, das heißt ob der Bildschirm in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.

device-width

Breite der Darstellungsfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.

display-mode

Der Modus, in dem eine Anwendung angezeigt wird: zum Beispiel fullscreen oder picture-in-picture Modus. Hinzugefügt in Media Queries Level 5.

dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User Agent und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.

forced-colors

Erkennen, ob der User Agent die Farbpalette einschränkt. Hinzugefügt in Media Queries Level 5.

grid

Verwendet das Gerät ein Gitter- oder Bitmap-Bildschirm?

height

Höhe des Viewports.

hover

Ermöglicht der primäre Eingabemechanismus dem Benutzer, über Elemente zu fahren?

inverted-colors

Invertiert der User Agent oder das zugrunde liegende Betriebssystem die Farben? Hinzugefügt in Media Queries Level 5.

monochrome

Bits pro Pixel im Monochrom-Puffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.

orientation

Orientierung des Viewports.

overflow-block

Wie behandelt das Ausgabegerät Inhalte, die den Viewport entlang der Blockachse überlaufen?

overflow-inline

Können Inhalte, die den Viewport entlang der Inline-Achse überlaufen, gescrollt werden?

pointer

Ist der primäre Eingabemechanismus ein Zeigegerät und, wenn ja, wie genau ist es?

prefers-color-scheme

Erkennen, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. Hinzugefügt in Media Queries Level 5.

prefers-contrast

Erkennt, ob der Benutzer verlangt hat, dass das System den Kontrast zwischen benachbarten Farben erhöht oder verringert. Hinzugefügt in Media Queries Level 5.

prefers-reduced-data

Erkennt, ob der Benutzer angefordert hat, dass Webinhalte weniger Internet-Datenverkehr verbrauchen.

prefers-reduced-motion

Der Benutzer bevorzugt weniger Bewegung auf der Seite. Hinzugefügt in Media Queries Level 5.

prefers-reduced-transparency

Erkennt, ob ein Benutzer auf seinem Gerät eine Einstellung aktiviert hat, um die durchsichtigen oder durchscheinenden Schichteffekte zu reduzieren, die auf dem Gerät verwendet werden.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Bildschirmausgabe progressiv oder interlaced ist.

scripting

Erkennt, ob Scripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.

shape

Erkennt die Form des Geräts zur Unterscheidung zwischen rechteckigen und runden Anzeigen.

update

Wie häufig kann das Ausgabegerät das Erscheinungsbild von Inhalten ändern.

video-dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videoebene des User Agents und des Ausgabegeräts unterstützt werden. Hinzugefügt in Media Queries Level 5.

width

Breite des Viewports einschließlich der Breite der Bildlaufleiste.

-moz-device-pixel-ratio

Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen die resolution Funktion mit der Einheit dppx.

-webkit-animation

Der Browser unterstützt -webkit-präsentierte CSS animation. Verwenden Sie stattdessen die @supports (animation) Funktionsabfrage.

-webkit-device-pixel-ratio

Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen die resolution Funktion mit der Einheit dppx.

-webkit-transform-2d

Der Browser unterstützt -webkit-präsentierte 2D CSS transform. Verwenden Sie stattdessen die @supports (transform) Funktionsabfrage.

-webkit-transform-3d

Der Browser unterstützt -webkit-präsentierte 3D CSS transform. Verwenden Sie stattdessen die @supports (transform) Funktionsabfrage.

-webkit-transition

Der Browser unterstützt -webkit-präsentierte CSS transition. Verwenden Sie stattdessen die @supports (transition) Funktionsabfrage.

Die logischen Operatoren not, and, only und or können verwendet werden, um eine komplexe Media-Query zusammenzustellen. Sie können auch mehrere Media-Queries zu einer einzigen Regel kombinieren, indem Sie sie durch Kommata trennen.

and

Wird verwendet, um mehrere Medienmerkmale zu einer einzelnen Media-Query zu kombinieren, wobei jedes verknüpfte Merkmal true zurückgeben muss, damit die Abfrage true ist. Es wird auch verwendet, um Medienmerkmale mit Medientypen zu verknüpfen.

not

Wird verwendet, um eine Media-Query zu negieren und true zurückzugeben, wenn die Abfrage ansonsten false wäre. Wenn es in einer durch Kommas getrennten Liste von Abfragen vorhanden ist, negiert es nur die spezifische Abfrage, auf die es angewendet wird.

Hinweis: In Level 3 kann das not-Schlüsselwort nicht verwendet werden, um einen einzelnen Medienmerkmalausdruck zu negieren, sondern nur eine gesamte Media-Query.

only

Wendet einen Stil nur an, wenn eine gesamte Abfrage übereinstimmt. Es ist nützlich, um zu verhindern, dass ältere Browser ausgewählte Stile anwenden. Wenn only nicht verwendet wird, würden ältere Browser die Abfrage screen and (width <= 500px) als screen interpretieren und den Rest der Abfrage ignorieren, wodurch ihre Stile auf allen Bildschirmen angewendet würden. Wenn Sie den only-Operator verwenden, müssen Sie auch einen Medientyp angeben.

, (Komma)

Kommas werden verwendet, um mehrere Media-Queries zu einer einzigen Regel zu kombinieren. Jede Abfrage in einer durch Kommas getrennten Liste wird getrennt von den anderen behandelt. Wenn also eine der Abfragen in einer Liste true ist, gibt die gesamte Medienanweisung true zurück. Mit anderen Worten, Listen verhalten sich wie ein logischer or-Operator.

or

Äquivalent zum ,-Operator. Hinzugefügt in Media Queries Level 4.

Einige Media-Queries haben entsprechende User Agent Client-Hinweise. Dies sind HTTP-Header, die Inhalte anfordern, die für die jeweilige Medienanforderung voroptimiert sind. Dazu gehören Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

@media = 
  @media <media-query-list> { <rule-list> }  

Um Menschen, die die Textgröße einer Seite anpassen, optimal zu unterstützen, verwenden Sie ems, wenn Sie ein <length> für Ihre Media-Queries benötigen.

Sowohl em als auch px sind gültige Einheiten, aber em funktioniert besser, wenn der Benutzer die Browser-Textgröße ändert.

Berücksichtigen Sie auch Media-Queries oder HTTP-User-Agent-Client-Hinweise, um das Benutzererlebnis zu verbessern. Zum Beispiel kann die Media-Query prefers-reduced-motion oder der entsprechende HTTP-Header Sec-CH-Prefers-Reduced-Motion verwendet werden, um die Menge der Animationen oder Bewegungen basierend auf Benutzerpräferenzen zu minimieren.

Da Media-Queries Einblicke in die Fähigkeiten und damit in die Features und das Design des Geräts geben, mit dem der Benutzer arbeitet, besteht die Möglichkeit, dass sie missbraucht werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest bis zu einem gewissen Detailgrad kategorisiert, der für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potenzials kann sich ein Browser dazu entscheiden, die zurückgegebenen Werte in gewisser Weise zu verfälschen, um zu verhindern, dass sie dazu verwendet werden, einen Computer präzise zu identifizieren. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn Firefox's "Resist Fingerprinting"-Einstellung aktiviert ist, geben viele Media-Queries Standardwerte anstelle von Werten zurück, die den tatsächlichen Gerätezustand darstellen.

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

Die Bereichssyntax ermöglicht weniger ausführliche Media-Queries beim Testen von Merkmalen, die einen Bereich akzeptieren, wie in den unten stehenden Beispielen gezeigt:

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

@media (400px <= width <= 700px) {
  body {
    line-height: 1.4;
  }
}

Für weitere Beispiele sehen Sie bitte Using media queries.

• CSS media queries Modul
• Using media queries
• CSSMediaRule Schnittstelle
• Erweiterte Mozilla-Medienmerkmale
• Erweiterte WebKit-Medienmerkmale