@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-Regel kann verwendet werden, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer oder mehrerer Media Queries anzuwenden. Damit können Sie eine Media Query und einen CSS-Block angeben, der auf das Dokument angewendet wird, wenn und nur wenn die Media Query mit dem Gerät übereinstimmt, auf dem der Inhalt genutzt wird.

Hinweis: In JavaScript können die mit @media erstellten Regeln über das CSSMediaRule CSS-Objektmodell-Interface 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-Regel kann auf oberster Ebene Ihres Codes platziert oder in eine andere bedingte Gruppen-At-Regel eingebettet 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 zur Media Query-Syntax, siehe Using 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: Für Seitenmaterial und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden, vorgesehen. (Bitte siehe Paged Media für Informationen zu formatierungsspezifischen Fragen dieser Formate.)
screen: Hauptsächlich für Bildschirme vorgesehen.

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

Medienfeatures

Ein <media feature> beschreibt spezifische Merkmale des User-Agents, des Ausgabegeräts oder der Umgebung. Medien-Feature-Ausdrücke testen ihre Anwesenheit, ihren Wert oder ihren Wertebereich und sind völlig optional. Jeder Medien-Feature-Ausdruck muss von Klammern umgeben sein.

any-hover: Erlaubt es irgendeinem verfügbaren Eingabemechanismus, über Elemente zu schweben?
any-pointer: Ist irgendein verfügbarer Eingabemechanismus 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 nicht farbig ist.
color-gamut: Ungefähre Farbskala, die vom User-Agent und dem Ausgabegerät unterstützt wird.
color-index: Anzahl der Einträge in der Farb-Lookup-Tabelle des Ausgabegeräts oder null, wenn das Gerät eine solche Tabelle nicht verwendet.
device-aspect-ratio: Breite-zu-Höhe-Verhältnis des Ausgabegeräts. In Media Queries Level 4 veraltet.
device-height: Höhe der Wiedergabeoberfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.
device-posture: Erkennt die aktuelle Haltung des Geräts, das heißt, ob der Viewport in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.
device-width: Breite der Wiedergabeoberfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird: zum Beispiel Vollbildmodus oder Bild-im-Bild-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: 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 Viewports.
hover: Erlaubt es der primäre Eingabemechanismus, über Elemente zu schweben?
inverted-colors: Invertiert der User-Agent oder das zugrunde liegende Betriebssystem Farben? Hinzugefügt in Media Queries Level 5.
monochrome: Bits pro Pixel im monochromen Framebuffer des Ausgabegeräts, oder null, wenn das Gerät nicht monochrom ist.
orientation: Orientierung des Viewports.
overflow-block: Wie geht das Ausgabegerät mit Inhalt um, der den Viewport entlang der Blockachse überläuft?
overflow-inline: Kann Inhalt, der den Viewport entlang der Inline-Achse überläuft, gescrollt werden?
pointer: Ist der primäre Eingabemechanismus 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 Webinhalte angefordert hat, die weniger Internetverkehr 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 durchsichtige oder transluzente Ebeneneffekte zu reduzieren.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Anzeigeausgabe progressiv oder verz 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 von rechteckigen und runden Displays.
update: Wie häufig das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann.
video-dynamic-range: Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom Videoebene des User-Agents und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.
width: Breite des Viewports 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 komponieren. Sie können auch mehrere Media Queries zu einer einzigen Regel kombinieren, indem Sie sie mit Kommas trennen.

and: Wird verwendet, um mehrere Medienfeatures zu einer einzigen Media Query zu kombinieren, die erfordert, dass jedes verkettete Feature true zurückgibt, damit die Abfrage true ist. Es wird auch verwendet, um Medienfeatures mit Medientypen zu verbinden.
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 es nur die spezifische Abfrage negieren, auf die es angewendet wird.

Hinweis: In Level 3 kann das not Schlüsselwort nicht verwendet werden, um einen einzelnen Medienfeature-Ausdruck 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 Sie only nicht verwenden, interpretierten ältere Browser die Abfrage screen and (max-width: 500px) als screen und ignorierten den Rest der Abfrage und wendeten die Stile auf allen Bildschirmen an. 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 kommagetrennten Liste wird separat von den anderen behandelt. Wenn also eine der Abfragen in einer Liste true ist, gibt die gesamte Media-Erklärung true zurück. 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-Hinweise

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

Formale Syntax

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

Barrierefreiheit

Um Menschen bestmöglich zu unterstützen, die die Textgröße einer Website anpassen, verwenden Sie em, wenn Sie eine <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 Textgröße des Browsers ä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) dazu verwendet werden, die Menge an Animationen oder Bewegungen, die basierend auf Benutzerpräferenzen verwendet werden, zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten—und im weiteren Sinne, die Merkmale und das Design—des Geräts geben, das der Benutzer verwendet, besteht das Potenzial, dass sie missbraucht werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest in einem solchen Detailgrad kategorisiert, der für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potentials kann ein Browser beschließen, die zurückgegebenen Werte in irgendeiner Weise zu verändern, um zu verhindern, dass sie verwendet werden, um einen Computer präzise zu identifizieren. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn die Firefox-Einstellung "Resist Fingerprinting" aktiviert ist, geben viele Media Queries Standardwerte zurück, anstatt die tatsächlichen Gerätezustände darzustellen.

Beispiele

Testen von Druck- und Bildschirmmedientypen

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 umfassende 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 Using media queries.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser