@media

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨Juli 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 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 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

css

/* 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-At-Regel kann entweder auf oberster Ebene Ihres Codes oder verschachtelt innerhalb jeder anderen bedingten Gruppenregel platziert werden.

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

Beschreibung

Eine Media Query-Liste <media-query-list> enthält <media-type>s, <media-feature>s und logische Operatoren.

Medientypen

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Mit Ausnahme der Verwendung des only-Logikoperators ist der Medientyp optional und der all-Typ wird impliziert.

all: Geeignet für alle Geräte.
print: Beabsichtigt für seitenorientiertes Material und Dokumente, die auf einem Bildschirm im Druckvorschau-Modus angezeigt werden. (Bitte siehe Paginierte Medien für Informationen zu Formatierungsproblemen, die für diese Formate spezifisch sind.)
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, aber sie wurden in Media Queries 4 veraltet und sollten nicht verwendet werden.

Medienmerkmale

Ein <media feature> beschreibt spezifische Merkmale des User-Agents, Ausgabegeräts oder der Umgebung. Medienmerkmalsausdrücke prüfen auf deren Vorhandensein, Wert oder Wertebereich und sind vollständig optional. Jeder Medienmerkmalsausdruck muss in Klammern eingeschlossen 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 falls 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 Reichweite der Farben, die vom User-Agent und dem Ausgabegerät unterstützt werden.
color-index: Anzahl der Einträge in der Farbwiedergabetabelle 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. Veraltet in Media Queries Level 4.
device-height: Höhe der Anzeigefläche des Ausgabegeräts. Veraltet in Media Queries Level 4.
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 Anzeigefläche des Ausgabegeräts. Veraltet in Media Queries Level 4.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird: zum Beispiel Vollbild oder Bild-in-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: Erkennen, ob der User-Agent die Farbpalette einschränkt. Hinzugefügt in Media Queries Level 5.
grid: Verwendet das Gerät einen Raster- oder Bitmapschirm?
height: Höhe des Viewports.
horizontal-viewport-segments: Erkennt, ob das Gerät eine angegebene Anzahl von Viewport-Segmenten horizontal anordnet.
hover: Erlaubt der primäre Eingabemechanismus dem Benutzer, über Elemente zu schweben?
inverted-colors: Kehrt der User-Agent oder das zugrunde liegende Betriebssystem Farben um? Hinzugefügt in Media Queries Level 5.
monochrome: Bits pro Pixel im monochromen Rahmenpuffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.
orientation: Orientierung des Viewports.
overflow-block: Wie verarbeitet das Ausgabegerät Inhalt, der über den Viewport entlang der Blockachse hinausgeht?
overflow-inline: Kann Inhalt, der über den Viewport entlang der Inline-Achse hinausgeht, gescrollt werden?
pointer: Ist der primäre Eingabemechanismus ein Zeigegerät, und falls 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 gebeten hat, den Kontrast zwischen angrenzenden 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 eine Einstellung auf seinem Gerät aktiviert hat, um die durchscheinenden oder transparenten Schichteffekte auf dem Gerät zu reduzieren.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Bildschirmausgabe progressiv oder interlaced ist.
scripting: Erkennt, ob Skripte (d.h. JavaScript) verfügbar sind. Hinzugefügt in Media Queries Level 5.
shape: Erkennt die Form des Geräts, um rechteckige und runde Anzeigen zu unterscheiden.
update: Wie häufig das Ausgabegerät das Aussehen von Inhalten ändern kann.
vertical-viewport-segments: Erkennt, ob das Gerät eine angegebene Anzahl von Viewport-Segmenten vertikal anordnet. Hinzugefügt in Media Queries Level 5.
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 das Merkmal resolution mit der Einheit dppx.
-webkit-animation: Der Browser unterstützt -webkit-gekennzeichnete CSS animation. Verwenden Sie stattdessen die Merkmalabfrage @supports (animation).
-webkit-device-pixel-ratio: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen das Merkmal resolution mit der Einheit dppx.
-webkit-transform-2d: Der Browser unterstützt -webkit-gekennzeichnete 2D CSS transform. Verwenden Sie stattdessen die Merkmalabfrage @supports (transform).
-webkit-transform-3d: Der Browser unterstützt -webkit-gekennzeichnete 3D CSS transform. Verwenden Sie stattdessen die Merkmalabfrage @supports (transform).
-webkit-transition: Der Browser unterstützt -webkit-gekennzeichnete CSS transition. Verwenden Sie stattdessen die Merkmalabfrage @supports (transition).

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

and: Wird verwendet, um mehrere Medienmerkmale zu einer einzigen 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 verbinden.
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, wird nur die spezifische Abfrage negiert, auf die es angewendet wird.

Hinweis: In Level 3 kann das Schlüsselwort not nicht verwendet werden, um einen einzelnen Medienmerkmalsausdruck zu negieren, sondern nur eine gesamte Media Query.
only: Gilt eine Art nur, 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 (width <= 500px) als screen interpretieren, den Rest der Abfrage ignorieren und ihre Stile auf alle Bildschirme anwenden. Wenn Sie den Operator only 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 unabhängig 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: Entspricht dem ,-Operator. Hinzugefügt in Media Queries Level 4.

User-Agent-Client-Hinweise

Einige Media Queries haben entsprechende User-Agent-Client-Hinweise. Dies sind HTTP-Header, die Inhalte anfordern, die für die spezifische Medienanforderung voroptimiert 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 Personen, die die Textgröße einer Website anpassen, am besten zu unterstützen, 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 Browser-Textgröße ändert.

Denken Sie auch an Media Queries oder HTTP User-Agent-Client-Hinweise, um die Benutzererfahrung zu verbessern. Zum Beispiel kann die Media Query prefers-reduced-motion oder der entsprechende HTTP-Header Sec-CH-Prefers-Reduced-Motion verwendet werden, um je nach Benutzerpräferenz die Menge an Animationen oder Bewegungen zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten—und somit in die Merkmale und das Design—des Geräts geben, das der Benutzer verwendet, besteht die Möglichkeit, dass sie missbraucht werden könnten, um einen "Fingerabdruck" zu erstellen, der das Gerät identifiziert oder zumindest in einem Detailgrad kategorisiert, der für Benutzer unerwünscht sein kann.

Aufgrund dieses Potentials kann ein Browser beschließen, die zurückgegebenen Werte in irgendeiner Weise zu verschleiern, 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 "Resist Fingerprinting"-Einstellung von Firefox aktiviert ist, melden viele Media Queries Standardwerte anstelle von Werten, die den tatsächlichen Gerätezustand darstellen.

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;
  }
}

Die Bereichs-Syntax ermöglicht weniger ausführliche Media Queries beim Testen von Merkmalen, 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;
  }
}

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

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden