@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-Anweisung (CSS at-rule) kann verwendet werden, um einen Teil eines Stylesheets basierend auf dem Ergebnis von einem oder mehreren Media Queries anzuwenden. Damit spezifizieren Sie eine Media Query und einen Block von CSS, 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 CSS-Objektmodell-Schnittstelle 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-Anweisung kann auf der obersten Ebene Ihres Codes oder verschachtelt in einer anderen bedingten Gruppen-Anweisung 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 Media-Query-Syntax siehe bitte Using media queries.

Beschreibung

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

Medientypen

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Der Medientyp ist optional, es sei denn, der logische Operator only wird verwendet, dann wird der Typ all impliziert.

all: Geeignet für alle Geräte.
print: Vorgesehen für paginierte Materialien und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Für Informationen zu Formatierungsproblemen, die spezifisch für diese Formate sind, siehe paginierte Medien.)
screen: Vorrangig für Bildschirme gedacht.

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

Medienmerkmale

Ein <media feature> beschreibt spezifische Eigenschaften des User Agents, des Ausgabegeräts oder der Umgebung. Medienmerkmale-Ausdrücke testen das Vorhandensein, den Wert oder den Bereich von Werten und sind vollständig optional. Jeder Medienmerkmale-Ausdruck muss von Klammern umgeben sein.

any-hover: Erlaubt irgendein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?
any-pointer: Ist irgendein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?
aspect-ratio: Breiten-zu-Höhen-Verhältnis des Viewports.
color: Anzahl der Bits pro Farbkomponente des Ausgabegeräts, oder null, wenn das Gerät nicht farbfähig ist.
color-gamut: Ungefähre Bandbreite der Farben, die vom User Agent und Ausgabegerät unterstützt werden.
color-index: Anzahl der Einträge in der Farbnachschlagetabelle des Ausgabegeräts, oder null, wenn das Gerät keine solche Tabelle verwendet.
device-aspect-ratio: Breiten-zu-Höhen-Verhältnis des Ausgabegeräts. In Media Queries Level 4 veraltet.
device-height: Höhe der Rendering-Oberfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.
device-posture: Erkennt die aktuelle Haltung des Geräts, also ob der Viewport in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.
device-width: Breite der Rendering-Oberfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.
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 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-Display?
height: Höhe des Viewports.
hover: Erlaubt der primäre Eingabemechanismus dem Benutzer, über Elemente zu schweben?
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 monochromen Framebuffer 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 Block-Achse überfluten?
overflow-inline: Kann Inhalt, der den Viewport entlang der Inline-Achse überflutet, 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: Erkennen, ob der Benutzer das System aufgefordert hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.
prefers-reduced-data: Erkennen, ob der Benutzer angefordert hat, dass Webinhalte weniger Internetverkehr verbrauchen.
prefers-reduced-motion: Der Benutzer bevorzugt weniger Bewegung auf der Seite. Hinzugefügt in Media Queries Level 5.
prefers-reduced-transparency: Erkennen, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um die Effekte transparenter oder transluzenter Schichten zu reduzieren.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Anzeigeausgabe progressiv oder interlaced ist.
scripting: Erkennen, ob Skripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.
shape: Erkennt die Form des Geräts, um rechteckige und runde Displays zu unterscheiden.
update: Wie häufig das Ausgabegerät das Erscheinungsbild des Inhalts ändern kann.
video-dynamic-range: Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom Videoplane 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 Veraltet Nicht standardisiert: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen die resolution Funktion mit der Einheit dppx.
-webkit-animation Veraltet Nicht standardisiert: Der Browser unterstützt -webkit präfiziertes CSS animation. Verwenden Sie stattdessen die @supports (animation) Feature-Abfrage.
-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 Veraltet Nicht standardisiert: Der Browser unterstützt -webkit präfiziertes 2D CSS transform. Verwenden Sie stattdessen die @supports (transform) Feature-Abfrage.
-webkit-transform-3d: Der Browser unterstützt -webkit präfiziertes 3D CSS transform. Verwenden Sie stattdessen die @supports (transform) Feature-Abfrage.
-webkit-transition Veraltet Nicht standardisiert: Der Browser unterstützt -webkit präfiziertes CSS transition. Verwenden Sie stattdessen die @supports (transition) Feature-Abfrage.

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 zu einer einzigen Regel kombinieren, indem Sie sie durch Kommata trennen.

and: Wird verwendet, um mehrere Medienmerkmale in einer einzigen Media Query zusammenzufassen, die erfordert, dass jedes verkettete Merkmal true zurückgibt, damit die Abfrage true ist. Es wird auch verwendet, um Medienmerkmale mit Medientypen zu verbinden.
not: Wird verwendet, um eine Media Query zu negieren und true zurückzugeben, wenn die Abfrage ansonsten false zurückgeben würde. Wenn es in einer durch Kommata getrennten Liste von Abfragen vorhanden ist, negiert es nur die spezifische Abfrage, auf die es angewendet wird.

Hinweis: In Level 3 kann das Schlüsselwort not nicht verwendet werden, um einen einzelnen Medienmerkmale-Ausdruck zu negieren, sondern nur eine ganze 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. Ohne die Verwendung von only würden ältere Browser die Abfrage screen and (max-width: 500px) als screen interpretieren, den Rest der Abfrage ignorieren und ihre Stile auf alle Bildschirme anwenden. 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 Kommata getrennten Liste wird separat von den anderen behandelt. Wenn also eine der Abfragen in einer Liste true ist, gibt die gesamte Media Aussage 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 Hints

Einige Media Queries haben entsprechende User Agent Client Hints. Dies sind HTTP-Header, die Inhalte anfordern, die für die spezifische Medienanforderung vorab optimiert sind. Sie beinhalten 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 Seite anpassen, optimal zu berücksichtigen, verwenden Sie em, wenn Sie in Ihren media queries eine <length> benötigen.

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

Erwägen Sie auch, Media Queries oder HTTP User Agent Client Hints zu verwenden, um das Benutzererlebnis zu verbessern. Zum Beispiel kann die Media Query prefers-reduced-motion oder der äquivalente HTTP-Header Sec-CH-Prefers-Reduced-Motion verwendet werden, um die Menge an Animation oder Bewegung zu minimieren, die basierend auf den Benutzereinstellungen verwendet wird.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten—und in der Verlängerung, die Merkmale und das Design—des Geräts bieten, 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 in einem Detailgrad kategorisiert, der für die Benutzer möglicherweise unerwünscht ist.

Aufgrund dieses Potenzials könnte ein Browser die zurückgegebenen Werte auf irgendeine 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; zum Beispiel berichten viele Media Queries Standardwerte anstelle der tatsächlichen Gerätestatuswerte, wenn die "Resist Fingerprinting"-Einstellung von Firefox aktiviert ist.

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 ausführliche Media Queries beim Testen eines beliebigen Merkmals, das einen Bereich akzeptiert, wie in den nachfolgenden 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 bitte Using media queries.

Spezifikationen

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