@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 Teile eines Stylesheets basierend auf dem Ergebnis einer oder mehrerer Media Queries anzuwenden. Mit ihr spezifizieren Sie eine Media Query und einen Block von CSS, der auf das Dokument angewendet werden soll, aber nur dann, wenn die Media Query mit dem Gerät übereinstimmt, auf dem der Inhalt angezeigt 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 auf der obersten Ebene Ihres Codes oder innerhalb jeder anderen bedingten Gruppenregel verschachtelt platziert werden.

Für eine Diskussion der Media Query-Syntax sehen Sie bitte Verwendung von Media Queries.

Beschreibung

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

Medientypen

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Außer wenn der logische Operator only verwendet wird, ist der Medientyp optional und der Typ all wird impliziert.

all: Geeignet für alle Geräte.
print: Bestimmt für paginiertes Material und Dokumente, die in der Druckvorschau auf einem Bildschirm angezeigt werden. (Bitte sehen Sie paginierte Medien für Informationen zu Formatierungsproblemen, die spezifisch für diese Formate sind.)
screen: Hauptsächlich für Bildschirme bestimmt.

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 Eigenschaften des User-Agent, des Ausgabegeräts oder der Umgebung. Medienmerkmal-Ausdrücke testen auf ihre Präsenz, ihren Wert oder ihren Wertebereich und sind vollkommen optional. Jeder Medienmerkmal-Ausdruck muss von Klammern umgeben sein.

any-hover: Ermöglicht ein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?
any-pointer: Ist ein verfügbares Eingabegerät ein Zeigegerät und wenn 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 keine Farbe verwendet.
color-gamut: Ungefähres Farbspektrum, das vom User-Agent und Ausgabegerät unterstützt wird.
color-index: Anzahl der Einträge in der Farbsuch-Tabelle 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 Zeichenoberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.
device-posture: Erkennt die aktuelle Haltung des Geräts, das heißt, ob sich der Viewport in einem flachen oder gefalteten Zustand befindet. Definiert in der Device Posture API.
device-width: Breite der Zeichenoberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird: zum Beispiel Vollbildmodus 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 Raster oder einen Bitmap-Bildschirm?
height: Höhe des Viewports.
horizontal-viewport-segments: Erkennt, ob das Gerät über eine bestimmte Anzahl von horizontal angeordneten Viewport-Segmenten verfügt.
hover: Ermöglicht das primäre Eingabegerät dem Benutzer, über Elemente zu schweben?
inverted-colors: Invertieren der User-Agent oder das zugrundeliegende Betriebssystem Farben? Hinzugefügt in Media Queries Level 5.
monochrome: Bits pro Pixel im Monochrom-Framebuffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.
orientation: Ausrichtung des Viewports.
overflow-block: Wie behandelt das Ausgabegerät Inhalte, die den Viewport entlang der Blockachse überschreiten?
overflow-inline: Kann Inhalt, der den Viewport entlang der Inline-Achse überschreitet, 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. Hinzugefügt in Media Queries Level 5.
prefers-contrast: Erkennt, 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: Erkennt, ob der Benutzer Inhalte bevorzugt, die weniger Internetverkehr erfordern.
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 auf dem Gerät verwendeten transparenten oder transluzenten Schichteffekte zu reduzieren.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Anzeigeausgabe progressiv oder interlaced ist.
scripting: Erkennt, 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 von Inhalten ändern kann.
vertical-viewport-segments: Erkennt, ob das Gerät über eine bestimmte Anzahl von vertikal angeordneten Viewport-Segmenten verfügt. Hinzugefügt in Media Queries Level 5.
video-dynamic-range: Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, unterstützt durch die Videoebene des User-Agent und des Ausgabegeräts. Hinzugefügt in Media Queries Level 5.
width: Breite des Viewports einschließlich der Breite der Scrollleiste.
-moz-device-pixel-ratio: Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie stattdessen das resolution-Merkmal mit der dppx-Einheit.
-webkit-animation: Der Browser unterstützt -webkit-präfixierte CSS animation. Verwenden Sie stattdessen die @supports (animation)-Merkmal-Abfrage.
-webkit-device-pixel-ratio: Die Anzahl der Geräte-Pixel pro CSS-Pixel. Verwenden Sie stattdessen das resolution-Merkmal mit der dppx-Einheit.
-webkit-transform-2d: Der Browser unterstützt -webkit-präfixierte 2D CSS transform. Verwenden Sie stattdessen die @supports (transform)-Merkmal-Abfrage.
-webkit-transform-3d: Der Browser unterstützt -webkit-präfixierte 3D CSS transform. Verwenden Sie stattdessen die @supports (transform)-Merkmal-Abfrage.
-webkit-transition: Der Browser unterstützt -webkit-präfixierte CSS transition. Verwenden Sie stattdessen die @supports (transition)-Merkmal-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 in einer einzigen Regel kombinieren, indem Sie sie mit Kommata trennen.

and: Wird verwendet, um mehrere Medienmerkmale in einer einzigen Media Query zu kombinieren, wobei jedes verknüpfte Merkmal true zurückgeben muss, damit die Abfrage true ist. Es wird auch zum Verbinden von Medienmerkmalen mit Medientypen verwendet.
not: Wird verwendet, um eine Media Query zu negieren, wobei true zurückgegeben wird, wenn die Abfrage ansonsten false wäre. Wenn es in einer kommagetrennten Liste von Abfragen vorhanden ist, wird es nur die spezifische 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 only nicht verwendet wird, 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 only-Operator verwenden, müssen Sie auch einen Medientyp angeben.
, (Komma): Kommas werden verwendet, um mehrere Media Queries in einer einzigen Regel zu kombinieren. Jede Abfrage in einer kommagetrennten Liste wird getrennt von den anderen behandelt. Daher gilt: Wenn 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 Hints

Einige Media Queries haben entsprechende User Agent Client Hints. Dies sind HTTP-Header, die Inhalte anfordern, die vorab für die jeweilige Medienanforderung 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, am besten 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 verändert.

Betrachten Sie auch Media Queries oder HTTP User Agent Client Hints, um das Nutzererlebnis 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 beim Nutzerpräferenzen verwendete Animations- oder Bewegungsmenge zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten – und indirekt in die Funktionen und das Design – des Geräts geben, das der Benutzer verwendet, besteht das Potenzial, dass sie missbraucht werden könnten, um einen "Fingerabdruck" zu erstellen, der das Gerät identifiziert oder es zumindest in einem unerwünschten Maße für Benutzer kategorisiert.

Aufgrund dieses Potenzials könnte ein Browser entscheiden, die zurückgegebenen Werte in irgendeiner Weise zu verfälschen, um zu verhindern, dass sie zur präzisen Identifizierung eines Rechners verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich bieten; zum Beispiel, wenn die Firefox-Einstellung "Fingerprinting entgegenwirken" aktiviert ist, geben viele Media Queries Standardwerte zurück, anstatt Werte, die den tatsächlichen Gerätestatus darstellen.

Beispiele

Testen für 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 ausführliche Media Queries beim Testen für jede 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 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