`@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.

Vollständige Kompatibilität anzeigen
Mehr erfahren

Mit der @media-CSS-At-Regel können Sie Teile eines Stylesheets abhängig vom Ergebnis einer oder mehrerer Media Queries anwenden. Dazu geben Sie eine Media Query und einen CSS-Block an. Der Block wird nur dann auf das Dokument angewendet, wenn die Media Query auf das Gerät zutrifft, auf dem der Inhalt verwendet wird.

Hinweis: In JavaScript können Sie über die CSS-Objektmodell-Schnittstelle CSSMediaRule auf Regeln zugreifen, die mit @media erstellt wurden.

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 oder verschachtelt innerhalb einer anderen bedingten Gruppen-At-Regel stehen.

Eine Erläuterung der Syntax von Media Queries finden Sie unter Media Queries verwenden.

Beschreibung

Die <media-query-list> einer Media Query umfasst Media Types (<media-type>), Media Features (<media-feature>) und logische Operatoren.

Media Types

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Sofern Sie nicht den logischen Operator only verwenden, ist der Media Type optional; ohne Angabe wird all angenommen.

all: Geeignet für alle Geräte.
print: Für seitenweise ausgegebene Inhalte und Dokumente, die auf einem Bildschirm im Druckvorschaumodus angezeigt werden. (Informationen zu Formatierungsfragen, die für diese Ausgabeformen spezifisch sind, finden Sie unter Seitenbasierte Medien.)
screen: Hauptsächlich für Bildschirme vorgesehen.

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

Media Features

Ein <media feature> beschreibt bestimmte Eigenschaften des User Agents, des Ausgabegeräts oder der Umgebung. Media-Feature-Ausdrücke prüfen, ob eine Eigenschaft vorhanden ist oder einen bestimmten Wert beziehungsweise Wertebereich hat. Ihre Verwendung ist optional. Jeder Media-Feature-Ausdruck muss in Klammern stehen.

any-hover: Ermöglicht irgendein verfügbares Eingabegerät, den Mauszeiger über Elemente zu bewegen?
any-pointer: Ist irgendein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?
aspect-ratio: Das Seitenverhältnis zwischen Breite und Höhe des Viewports.
color: Die Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät keine Farben darstellen kann.
color-gamut: Der ungefähre Farbbereich, den der User Agent und das Ausgabegerät unterstützen.
color-index: Die Anzahl der Einträge in der Farbnachschlagetabelle des Ausgabegeräts oder null, wenn das Gerät keine solche Tabelle verwendet.
device-aspect-ratio: Das Seitenverhältnis zwischen Breite und Höhe des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
device-height: Die Höhe der Darstellungsfläche des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
device-posture: Erkennt die aktuelle Haltung des Geräts, also ob sich der Viewport in einem flachen oder gefalteten Zustand befindet. Definiert in der Device Posture API.
device-width: Die Breite der Darstellungsfläche des Ausgabegeräts. In Media Queries Level 4 als veraltet eingestuft.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird, beispielsweise im Vollbildmodus oder im Bild-in-Bild-Modus. In Media Queries Level 5 hinzugefügt.
dynamic-range: Die Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die der User Agent und das Ausgabegerät unterstützen. In Media Queries Level 5 hinzugefügt.
forced-colors: Erkennt, ob der User Agent die Farbpalette einschränkt. In Media Queries Level 5 hinzugefügt.
grid: Verwendet das Gerät einen Raster- oder einen Bitmap-Bildschirm?
height: Die Höhe des Viewports.
horizontal-viewport-segments: Erkennt, ob das Gerät eine bestimmte Anzahl horizontal angeordneter Viewport-Segmente hat.
hover: Ermöglicht das primäre Eingabegerät, den Mauszeiger über Elemente zu bewegen?
inverted-colors: Invertiert der User Agent oder das zugrunde liegende Betriebssystem Farben? In Media Queries Level 5 hinzugefügt.
monochrome: Die Anzahl der Bits pro Pixel im monochromen Framebuffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.
orientation: Die Ausrichtung des Viewports.
overflow-block: Wie behandelt das Ausgabegerät Inhalte, die entlang der Blockachse über den Viewport hinausragen?
overflow-inline: Können Inhalte gescrollt werden, die entlang der Inline-Achse über den Viewport hinausragen?
pointer: Ist das primäre Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?
prefers-color-scheme: Erkennt, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. In Media Queries Level 5 hinzugefügt.
prefers-contrast: Erkennt, ob der Benutzer eine Erhöhung oder Verringerung des Kontrasts zwischen benachbarten Farben angefordert hat. In Media Queries Level 5 hinzugefügt.
prefers-reduced-data: Erkennt, ob der Benutzer Webinhalte angefordert hat, die weniger Datenverkehr verursachen.
prefers-reduced-motion: Der Benutzer bevorzugt weniger Bewegung auf der Seite. In Media Queries Level 5 hinzugefügt.
prefers-reduced-transparency: Erkennt, ob ein Benutzer auf seinem Gerät eine Einstellung aktiviert hat, die transparente oder durchscheinende Ebeneneffekte reduziert.
resolution: Die Pixeldichte des Ausgabegeräts.
scan: Ob die Bildausgabe progressiv oder im Zeilensprungverfahren erfolgt.
scripting: Erkennt, ob Skripting (z. B. JavaScript) verfügbar ist. In Media Queries Level 5 hinzugefügt.
shape: Erkennt die Form des Geräts, um zwischen rechteckigen und runden Displays zu unterscheiden.
update: Wie häufig das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann.
vertical-viewport-segments: Erkennt, ob das Gerät eine bestimmte Anzahl vertikal angeordneter Viewport-Segmente hat. In Media Queries Level 5 hinzugefügt.
video-dynamic-range: Die Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die die Videoebene des User Agents und das Ausgabegerät unterstützen. In Media Queries Level 5 hinzugefügt.
width: Die 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 Feature resolution mit der Einheit dppx.
-webkit-animation: Der Browser unterstützt CSS animation mit dem Präfix -webkit. Verwenden Sie stattdessen die Feature Query @supports (animation).
-webkit-device-pixel-ratio: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen das Feature resolution mit der Einheit dppx.
-webkit-transform-2d: Der Browser unterstützt 2D-CSS-transform mit dem Präfix -webkit. Verwenden Sie stattdessen die Feature Query @supports (transform).
-webkit-transform-3d: Der Browser unterstützt 3D-CSS-transform mit dem Präfix -webkit. Verwenden Sie stattdessen die Feature Query @supports (transform).
-webkit-transition: Der Browser unterstützt CSS transition mit dem Präfix -webkit. Verwenden Sie stattdessen die Feature Query @supports (transition).

Logische Operatoren

Mit den logischen Operatoren not, and, only und or können Sie komplexe Media Queries zusammensetzen. Sie können auch mehrere Media Queries zu einer einzigen Regel kombinieren, indem Sie sie durch Kommas trennen.

and: Kombiniert mehrere Media Features zu einer einzigen Media Query. Damit die Query true ergibt, muss jedes verknüpfte Feature true ergeben. Der Operator wird auch verwendet, um Media Features mit Media Types zu verknüpfen.
not: Negiert eine Media Query und gibt true zurück, wenn die Query andernfalls false ergeben würde. In einer durch Kommas getrennten Liste von Queries negiert der Operator nur die jeweilige Query, auf die er angewendet wird.

Hinweis: In Level 3 kann das Schlüsselwort not nur eine vollständige Media Query negieren, nicht einen einzelnen Media-Feature-Ausdruck.
only: Wendet einen Stil nur an, wenn eine vollständige Query zutrifft. Dies ist nützlich, um zu verhindern, dass ältere Browser bestimmte Stile anwenden. Ohne only würden ältere Browser die Query screen and (width <= 500px) als screen interpretieren, den Rest der Query ignorieren und ihre Stile auf allen Bildschirmen anwenden. Wenn Sie den Operator only verwenden, müssen Sie auch einen Media Type angeben.
, (Komma): Kommas kombinieren mehrere Media Queries zu einer einzigen Regel. Jede Query in einer durch Kommas getrennten Liste wird unabhängig von den anderen behandelt. Wenn also eine der Queries in einer Liste true ergibt, ergibt die gesamte Media-Anweisung true. Anders ausgedrückt verhalten sich Listen wie der logische Operator or.
or: Entspricht dem Operator ,. In Media Queries Level 4 hinzugefügt.

User-Agent-Client-Hints

Für einige Media Queries gibt es entsprechende User-Agent-Client-Hints. Dabei handelt es sich um HTTP-Header, mit denen Inhalte angefordert werden, die für die jeweiligen Medienanforderungen 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 Menschen, die die Textgröße einer Website anpassen, bestmöglich zu berücksichtigen, verwenden Sie em als Einheit, wenn Sie einen <length>-Wert für Ihre Media Queries benötigen.

Sowohl em als auch px sind gültige Einheiten. em eignet sich jedoch besser, wenn der Benutzer die Textgröße im Browser ändert.

Ziehen Sie außerdem Media Queries oder HTTP-User-Agent-Client-Hints in Betracht, um die Benutzererfahrung zu verbessern. Beispielsweise können Sie die Media Query prefers-reduced-motion oder den entsprechenden HTTP-Header Sec-CH-Prefers-Reduced-Motion verwenden, um Animationen oder Bewegungen entsprechend den Benutzereinstellungen zu reduzieren.

Sicherheit

Media Queries geben Aufschluss über die Fähigkeiten und damit auch über die Eigenschaften und Bauweise des Geräts, das der Benutzer verwendet. Daher besteht die Möglichkeit, sie zur Erstellung eines „Fingerabdrucks“ zu missbrauchen, der das Gerät identifiziert oder es zumindest so detailliert kategorisiert, wie es für Benutzer unerwünscht sein könnte.

Wegen dieses Risikos kann ein Browser die zurückgegebenen Werte verändern, damit sie nicht zur genauen Identifizierung eines Computers verwendet werden können. Ein Browser kann auch zusätzliche Schutzmaßnahmen anbieten. Wenn beispielsweise in Firefox die Einstellung „Resist Fingerprinting“ aktiviert ist, liefern viele Media Queries Standardwerte statt Werten, die den tatsächlichen Zustand des Geräts wiedergeben.

Beispiele

Prüfung auf die Media Types `print` und `screen`

css

@media print {
  body {
    font-size: 10pt;
  }
}

@media screen {
  body {
    font-size: 13px;
  }
}

@media screen, print {
  body {
    line-height: 1.2;
  }
}

Mit der Bereichssyntax lassen sich Media Queries für Features, die einen Wertebereich zulassen, kürzer formulieren, wie die folgenden Beispiele zeigen:

css

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

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

Weitere Beispiele finden Sie unter Media Queries verwenden.

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