@media

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Die @media CSS at-rule kann verwendet werden, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer oder mehrerer Media-Queries anzuwenden. Damit spezifizieren Sie eine Media-Query und einen CSS-Block, der auf das Dokument angewendet wird, wenn und nur wenn die Media-Query mit dem Gerät übereinstimmt, auf dem der Inhalt verwendet wird.

Hinweis: In JavaScript können die mit @media erstellten Regeln über die CSSMediaRule Schnittstelle des CSS-Objektmodells abgerufen werden.

Probieren Sie es aus

abbr {
  color: chocolate;
}

@media (hover: hover) {
  abbr:hover {
    color: limegreen;
    transition-duration: 1s;
  }
}

@media not all and (hover: hover) {
  abbr::after {
    content: " (" attr(title) ")";
  }
}

<p>
  <abbr title="National Aeronautics and Space Administration">NASA</abbr> is a
  U.S. government agency that is responsible for science and technology related
  to air and space.
</p>

Syntax

Die @media at-rule kann auf oberster Ebene Ihres Codes oder verschachtelt innerhalb einer anderen bedingten Gruppenregel platziert werden.

css

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

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

Für eine Diskussion der Syntax von Media-Queries siehe Verwendung von Media-Queries.

Beschreibung

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

Medientypen

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: Bestimmt für gedruckte Materialien und Dokumente, die auf einem Bildschirm im Druckvorschau-Modus betrachtet werden. (Siehe paged media für Informationen zu Formatierungsproblemen, die für diese Formate spezifisch sind.)
screen: Hauptsächlich für Bildschirme bestimmt.

Hinweis: CSS2.1 und Media Queries 3 haben mehrere zusätzliche Medientypen definiert (tty, tv, projection, handheld, braille, embossed und aural), aber sie wurden in Media Queries 4 als veraltet angesehen und sollten nicht verwendet werden.

Medienmerkmale

Ein <media feature> beschreibt spezifische Eigenschaften des User-Agents, des Ausgabegeräts oder der Umgebung. Ausdrücke für Medienmerkmale testen auf deren Vorhandensein, Wert oder Wertebereich und sind vollständig optional. Jeder Ausdruck für ein Medienmerkmal muss in Klammern gesetzt werden.

any-hover: Erlaubt ein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?
any-pointer: Ist ein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?
aspect-ratio: Breite-zu-Höhe Seitenverhältnis des Ansichtsfensters.
color: Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät nicht farbig ist.
color-gamut: Ungefähre Bandbreite der Farben, die vom User-Agent und Ausgabegerät unterstützt wird.
color-index: Anzahl der Einträge in der Farbsuchbautabelle 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 als veraltet angesehen.
device-height: Höhe der Anzeigefläche des Ausgabegeräts. In Media Queries Level 4 als veraltet angesehen.
device-posture: Erkennt die aktuelle Haltung des Geräts, also ob das Ansichtsfenster in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.
device-width: Breite der Anzeigefläche des Ausgabegeräts. In Media Queries Level 4 als veraltet angesehen.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird: beispielsweise fullscreen oder picture-in-picture Modus. Hinzugefügt in Media Queries Level 5.
dynamic-range: Kombination von 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: Erkennt, ob der User-Agent die Farbpalette einschränkt. Hinzugefügt in Media Queries Level 5.
grid: Verwendet das Gerät einen Raster- oder Bitmap-Bildschirm?
height: Höhe des Ansichtsfensters.
hover: Erlaubt das primäre Eingabegerät dem Benutzer, über Elemente zu schweben?
inverted-colors: Invertiert der User-Agent oder das darunterliegende Betriebssystem die Farben? Hinzugefügt in Media Queries Level 5.
monochrome: Bits pro Pixel in der Monochrom-Bildpuffertabelle des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.
orientation: Orientierung des Ansichtsfensters.
overflow-block: Wie behandelt das Ausgabegerät Inhalte, die das Ansichtsfenster entlang der Blockachse überlaufen?
overflow-inline: Kann Inhalt, der das Ansichtsfenster entlang der Inline-Achse überläuft, gescrollt werden?
pointer: Ist das primäre Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?
prefers-color-scheme: Erkennt, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. Hinzugefügt in Media Queries Level 5.
prefers-contrast: Erkennt, ob der Benutzer das System angewiesen hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.
prefers-reduced-data: Erkennt, ob der Benutzer Inhalte angefordert hat, die weniger Internet-Traffic benötigen.
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 eine Einstellung auf seinem Gerät aktiviert hat, die die durchsichtigen oder durchscheinenden Schichteffekte auf dem Gerät reduziert.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Anzeigeausgabe progressiv oder interlaced ist.
scripting: Erkennt, ob Skripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.
shape: Erkennt die Form des Geräts, um zwischen rechteckigen und runden Displays zu unterscheiden.
update: Wie häufig das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann.
video-dynamic-range: Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videoebene des User-Agents und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.
width: Breite des Ansichtsfensters einschließlich der Breite der Bildlaufleiste.

Logische Operatoren

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

and: Wird verwendet, um mehrere Medienmerkmale zu einer einzigen Media-Query zu kombinieren, wobei jedes verkettete 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 gibt true zurück, wenn die Abfrage ansonsten false zurückgeben würde. Wenn es in einer kommagetrennten Liste von Abfragen vorhanden ist, wird nur die spezifische Abfrage negiert, auf die es angewendet wird.

Hinweis: In Level 3 kann das not Schlüsselwort nicht verwendet werden, um einen einzelnen Ausdruck für ein Medienmerkmal zu negieren, sondern nur eine gesamte Media-Query.
only: Wendet einen Stil nur an, wenn eine gesamte Abfrage zutrifft. 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 (max-width: 500px) als screen interpretieren und den Rest der Abfrage ignorieren und die Stile auf allen Bildschirmen anwenden. Wenn Sie den only Operator verwenden, müssen Sie auch einen Medientyp angeben.
, (Komma): Kommas werden verwendet, um mehrere Media-Queries in einer einzigen Regel zu kombinieren. Jede Abfrage in einer kommagetrennten Liste wird separat von den anderen behandelt. Wenn also eine der Abfragen in einer Liste true ist, ist die gesamte Media-Statement true. Mit anderen Worten, Listen verhalten sich wie ein logischer or Operator.
or: Entspricht dem , Operator. Hinzugefügt in Media Queries Level 4.

User-Agent-Client-Hints

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

Formale Syntax

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

Barrierefreiheit

Um Menschen, die die Textgröße einer Website anpassen, entgegenzukommen, verwenden Sie em, wenn Sie ein Länge für Ihre Media-Queries benötigen.

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

Berücksichtigen Sie auch Media-Queries oder HTTP User-Agent-Client-Hints, 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 Anzahl der Animationen oder Bewegungen entsprechend den Benutzerpräferenzen zu minimieren.

Sicherheit

Da Media-Queries Einblicke in die Fähigkeiten – und damit die Funktionen und das Design – des Geräts geben können, mit dem der Benutzer arbeitet, besteht das Potenzial, dass sie missbraucht werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest bis zu einem gewissen Grad detailliert kategorisiert, was für Benutzer möglicherweise unerwünscht ist.

Aufgrund dieses Potenzials könnte ein Browser die zurückgegebenen Werte in gewisser Weise verfälschen, um zu verhindern, dass sie zur genauen Identifizierung eines Computers verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; beispielsweise wenn in Firefox die Einstellung "Resist Fingerprinting" aktiviert ist, melden viele Media-Queries Standardwerte anstelle der Werte, die den tatsächlichen Gerätezustand repräsentieren.

Beispiele

Testen auf Druck- und Bildschirm-Medientypen

css

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

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

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

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Die Bereichssyntax ermöglicht weniger umfangreiche Media-Queries beim Testen eines beliebigen Merkmals, das einen Bereich akzeptiert, wie in den folgenden Beispielen gezeigt:

css

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

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

Für weitere Beispiele siehe Verwendung von Media-Queries.

Spezifikationen

Specification
Media Queries Level 4 # media-descriptor-table
CSS Conditional Rules Module Level 3 # at-media