@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 aufgrund des Ergebnisses einer oder mehrerer Media Queries anzuwenden. Damit können Sie eine Media Query und einen Block von CSS 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 mit der CSSMediaRule CSS-Objektmodell-Schnittstelle abgerufen werden.

Probieren Sie es aus

abbr {
  color: #860304;
  font-weight: bold;
  transition: color 0.5s ease;
}

@media (hover: hover) {
  abbr:hover {
    color: #001ca8;
    transition-duration: 0.5s;
  }
}

@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 oder innerhalb jeder anderen bedingten Gruppen-At-Regel verschachtelt 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;
    }
  }
}

Eine Diskussion der Syntax von Media Queries finden Sie unter Using media queries.

Beschreibung

Die <media-query-list> einer Media Query 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: Vorgesehen für paginierte Materialien und Dokumente, die in der Druckvorschau auf einem Bildschirm angezeigt werden. (Siehe paged media für Informationen zu formatierungsspezifischen Problemen dieser Formate.)
screen: Primär für Bildschirme gedacht.

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

Medienmerkmale

Ein <media feature> beschreibt spezifische Merkmale des User Agent, des Ausgabegeräts oder der Umgebung. Medienmerkmalausdrücke testen auf deren Vorhandensein, Wert oder Wertebereich und sind vollständig optional. Jeder Medienmerkmalausdruck muss in Klammern eingeschlossen werden.

any-hover: Erlaubt ein verfügbares Eingabegerät dem Benutzer, über Elemente zu hoveren?
any-pointer: Ist ein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?
aspect-ratio: Breiten-zu-Höhen-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 Bandbreite der Farben, die vom User Agent und Ausgabegerät unterstützt werden.
color-index: Anzahl der Einträge in der Farbsuchtafel des Ausgabegeräts oder null, wenn das Gerät keine solche Tafel verwendet.
device-aspect-ratio: Breiten-zu-Höhen-Seitenverhältnis des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
device-height: Höhe der Rendering-Fläche des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
device-posture: Erkennt die aktuelle Haltung des Geräts, d.h. ob der Viewport in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.
device-width: Breite der Rendering-Fläche des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird: zum Beispiel fullscreen oder picture-in-picture Modus. In Media Queries Level 5 hinzugefügt.
dynamic-range: Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User Agent und dem Ausgabegerät unterstützt werden. In Media Queries Level 5 hinzugefügt.
forced-colors: Überprüfen, ob der User Agent die Farbpalette einschränkt. In Media Queries Level 5 hinzugefügt.
grid: Verwendet das Gerät einen Gitter- oder Bitmap-Bildschirm?
height: Höhe des Viewports.
hover: Erlaubt das primäre Eingabegerät dem Benutzer, über Elemente zu hoveren?
inverted-colors: Invertiert der User Agent oder das zugrundeliegende Betriebssystem Farben? In Media Queries Level 5 hinzugefügt.
monochrome: Bits pro Pixel im Monochrom-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 überlaufen?
overflow-inline: Können Inhalte, die den Viewport entlang der Inline-Achse überlaufen, gescrollt werden?
pointer: Ist das primäre Eingabegerät ein Zeigegerät und, wenn ja, wie genau ist es?
prefers-color-scheme: Erkennen, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. In Media Queries Level 5 hinzugefügt.
prefers-contrast: Erkennen, ob der Benutzer das System gebeten hat, den Unterschied zwischen angrenzenden Farben zu erhöhen oder zu verringern. In Media Queries Level 5 hinzugefügt.
prefers-reduced-data: Erkennen, ob der Benutzer webseitige Inhalte angefordert hat, die weniger Internet-Traffic verbrauchen.
prefers-reduced-motion: Der Benutzer bevorzugt weniger Bewegung auf der Seite. In Media Queries Level 5 hinzugefügt.
prefers-reduced-transparency: Erkennen, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um transparente oder durchscheinende Schichteffekte zu reduzieren, die auf dem Gerät verwendet werden.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Anzeigeausgabe progressiv oder interlaced ist.
scripting: Erkennen, ob Scripting (d.h. JavaScript) verfügbar ist. In Media Queries Level 5 hinzugefügt.
shape: Erkennt die Form des Geräts, um rechteckige und runde Anzeigen 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 Videofläche des User Agents und des Ausgabegeräts unterstützt werden. In Media Queries Level 5 hinzugefügt.
width: Breite des Viewports einschließlich der Breite der Scrollleiste.
-moz-device-pixel-ratio: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie das resolution-Merkmal mit der Einheit dppx stattdessen.
-webkit-animation: Der Browser unterstützt -webkit-präfixiertes CSS animation. Verwenden Sie die @supports (animation)-Abfrage für Merkmale stattdessen.
-webkit-device-pixel-ratio: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie das resolution-Merkmal mit der Einheit dppx stattdessen.
-webkit-transform-2d: Der Browser unterstützt -webkit-präfixierte 2D-CSS transform. Verwenden Sie die @supports (transform)-Abfrage für Merkmale stattdessen.
-webkit-transform-3d: Der Browser unterstützt -webkit-präfixierte 3D-CSS transform. Verwenden Sie die @supports (transform)-Abfrage für Merkmale stattdessen.
-webkit-transition: Der Browser unterstützt -webkit-präfixiertes CSS transition. Verwenden Sie die @supports (transition)-Abfrage für Merkmale stattdessen.

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 mit Kommas trennen.

and: Wird verwendet, um mehrere Medienmerkmale zu einer einzelnen Media Query zu kombinieren, wobei jede verknüpfte Bedingung true zurückgeben muss, damit die Anfrage 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 Anfrage ansonsten false zurückgeben würde. Wenn es in einer durch Kommas getrennten Liste von Abfragen vorhanden ist, wird es nur die spezielle Abfrage negieren, auf die es angewendet wird.

Hinweis: In Level 3 kann das not-Schlüsselwort nicht verwendet werden, um einen einzelnen Medienmerkmal-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, würden ältere Browser die Abfrage screen and (max-width: 500px) als screen interpretieren und den Rest der Abfrage ignorieren, und ihre 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 zu einer einzelnen Regel zu kombinieren. Jede Abfrage in einer durch Kommas getrennten Liste wird separat von den anderen behandelt. Daher, wenn eine der Abfragen in einer Liste true ist, gibt die gesamte Media-Anweisung true zurück. Mit anderen Worten verhalten sich Listen wie ein logischer or-Operator.
or: Entspricht dem ,-Operator. In Media Queries Level 4 hinzugefügt.

Client-Hinweise des User Agents

Einige Media Queries haben entsprechende User Agent Client Hints. Dabei handelt es sich um HTTP-Header, die Inhalte anfordern, die bereits für die speziellen Medienanforderungen 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, am besten entgegenzukommen, 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 funktionieren 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 Menge der Animation oder Bewegung basierend auf den Benutzerpräferenzen zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten - und somit in die Eigenschaften 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 in einem unerwünschten Detaillierungsgrad kategorisiert.

Aufgrund dieses Potenzials kann 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, wenn Firefox's Einstellung "Fingerprinting widerstehen" aktiviert ist, geben viele Media Queries Standardwerte zurück, anstatt Werte, die den tatsächlichen Gerätezustand repräsentieren.

Beispiele

Prüfung 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 umständliche Media Queries beim Testen für Merkmale, die einen Bereich akzeptieren, wie in den folgenden Beispielen gezeigt:

css

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

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

Weitere Beispiele finden Sie unter Using media queries.

Spezifikationen

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