`@media` CSS at-rule

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

Die @media CSS at-Regel kann verwendet werden, um Teile 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 über die 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 auf der obersten Ebene Ihres Codes platziert oder in einer anderen bedingten Gruppen-at-Regel verschachtelt werden.

Für eine Diskussion der Syntax von Media Queries siehe bitte 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 beim Einsatz 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 gedrucktes Material und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm betrachtet werden. (Bitte sehen Sie sich paged media für Informationen zu Formatierungsproblemen an, die spezifisch für diese Formate sind.)
screen: Vorwiegend 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 als veraltet eingestuft und sollten nicht verwendet werden.

Medienmerkmale

Ein <media feature> beschreibt spezifische Merkmale des User Agents, des Ausgabegeräts oder der Umgebung. Medienmerkmalsexpressionen testen auf deren Vorhandensein, Wert oder Wertebereich und sind völlig optional. Jede Medienmerkmalsexpression muss in Klammern eingeschlossen sein.

any-hover: Ermöglicht irgendein verfügbares Eingabemechanismus dem Benutzer, über Elemente zu schweben?
any-pointer: Ist irgendein verfügbares Eingabemechanismus ein Zeigegerät und wenn ja, wie genau ist es?
aspect-ratio: Breiten-Höhen-Verhältnis des Viewports.
color: Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät nicht bunt 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 Farblookuptabelle des Ausgabegeräts oder null, wenn das Gerät keine solche Tabelle verwendet.
device-aspect-ratio: Breiten-Höhen-Verhältnis des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
device-height: Höhe der Zeichenflä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 flach oder gefaltet ist. Definiert in der Device Posture API.
device-width: Breite der Zeichenflä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. 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 Gitterbildschirm oder ein Bitmapscreen?
height: Höhe des Viewports.
horizontal-viewport-segments: Erkennt, ob das Gerät über eine bestimmte Anzahl von Viewport-Segmenten verfügt, die horizontal angeordnet sind.
hover: Ermöglicht das primäre Eingabemechanismus dem Benutzer, ü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: Ausrichtung des Viewports.
overflow-block: Wie behandelt das Ausgabegerät den Inhalt, der über den Viewport hinaus geht, entlang der Blockachse?
overflow-inline: Kann der Inhalt, der über den Viewport hinausgeht entlang der Inline-Achse gescrollt werden?
pointer: Ist das 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 angefordert 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 angefordert hat, dass die Webinhalte weniger Internetverkehr verbrauchen.
prefers-reduced-motion: Der Benutzer bevorzugt weniger Bewegungen 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 durchsichtigen oder transparenten Schichteffekte, die auf dem Gerät verwendet werden, zu reduzieren.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Displayausgabe progressiv oder 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, um rechteckige und runde Displays zu unterscheiden.
update: Wie häufig das Ausgabegerät das Erscheinungsbild des Inhalts ändern kann.
vertical-viewport-segments: Erkennt, ob das Gerät über eine bestimmte Anzahl von Viewport-Segmenten verfügt, die vertikal angeordnet sind. Hinzugefügt in Media Queries Level 5.
video-dynamic-range: Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom Videoflugzeug 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.
-moz-device-pixel-ratio: Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie die resolution Funktion mit der dppx Einheit stattdessen.
-webkit-animation: Der Browser unterstützt -webkit-Prefix CSS animation. Verwenden Sie die @supports (animation) Funktionsabfrage stattdessen.
-webkit-device-pixel-ratio: Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie die resolution Funktion mit der dppx Einheit stattdessen.
-webkit-transform-2d: Der Browser unterstützt -webkit-Prefix für 2D CSS transform. Verwenden Sie die @supports (transform) Funktionsabfrage stattdessen.
-webkit-transform-3d: Der Browser unterstützt -webkit-Prefix für 3D CSS transform. Verwenden Sie die @supports (transform) Funktionsabfrage stattdessen.
-webkit-transition: Der Browser unterstützt -webkit-Prefix CSS transition. Verwenden Sie die @supports (transition) Funktionsabfrage 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 in eine einzige Regel kombinieren, indem Sie sie mit Kommas trennen.

and: Wird verwendet, um mehrere Medienmerkmale zu einer einzigen Media Query zu kombinieren, wobei jede verknüpfte Funktion 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, die true zurückgibt, 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 angewandt wird.

Hinweis: In Level 3 kann das not Schlüsselwort nicht verwendet werden, um eine einzelne Medienmerkmalsexpression zu negieren, 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. Ohne only würden ältere Browser die Abfrage screen and (width <= 500px) als screen interpretieren und den Rest der Abfrage ignorieren und ihre Stile auf alle Bildschirme anwenden. Wenn Sie den only Operator verwenden, müssen Sie einen Medientyp auch spezifizieren.
, (Komma): Kommas werden verwendet, um mehrere Media Queries in eine einzige Regel zu kombinieren. Jede Abfrage in einer kommagetrennten 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: Äquivalent zum , 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 das jeweilige Medienerfordernis 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 Website anpassen, besser gerecht zu werden, 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 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 an Animation oder Bewegung zu minimieren, die basierend auf den Benutzervorlieben verwendet wird.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten – und somit die Funktionen und das Design – des Geräts, das der Benutzer verwendet, geben können, besteht die Möglichkeit, dass sie missbräuchlich verwendet werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest bis zu einem unerwünschten Detailgrad klassifiziert.

Aufgrund dieses Potenzials könnte ein Browser beschließen, die zurückgegebenen Werte auf irgendeine Weise zu verändern, um zu verhindern, dass sie dazu verwendet werden, einen Computer genau zu identifizieren. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn in Firefox die Einstellung "Fingerprinting widerstehen" aktiviert ist, geben viele Media Queries Standardwerte zurück anstelle von Werten, die den tatsächlichen Zustand des Geräts widerspiegeln.

Beispiele

Testen auf 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 Bereichssyntax ermöglicht weniger umfangreiche Media Queries beim Testen einer Funktion, die einen Bereich akzeptiert, wie in den unten stehenden 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

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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

@media CSS at-rule

Help improve MDN

`@media` CSS at-rule