@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 können Sie eine Media Query und einen Block von CSS angeben, der nur dann auf das Dokument angewendet wird, 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 entweder auf der obersten Ebene Ihres Codes platziert oder innerhalb einer anderen bedingten Gruppenregel verschachtelt werden.

Für eine Diskussion über die Syntax von Media Queries sehen Sie bitte Using media queries.

Beschreibung

Eine Media Query's <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. Außer bei Verwendung des only logischen Operators ist der Medientyp optional und der all Typ wird impliziert.

all: Geeignet für alle Geräte.
print: Bestimmt für paginierte Materialien und Dokumente, die in der Druckvorschau auf einem Bildschirm angesehen werden. (Bitte sehen Sie paged media für Informationen zu Formatierungsfragen, 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 als veraltet gekennzeichnet und sollten nicht verwendet werden.

Medienmerkmale

Ein <media feature> beschreibt spezifische Merkmale des User-Agenten, des Ausgabegeräts oder der Umgebung. Ausdrücke für Medienmerkmale testen auf ihre Anwesenheit, ihren Wert oder einen Wertebereich und sind völlig optional. Jeder Ausdruck für ein Medienmerkmal muss von Klammern umgeben sein.

any-hover: Erlaubt es irgendein verfügbares Eingabegerät, dass der Benutzer über Elemente schwebt?
any-pointer: Ist irgendein verfügbares Eingabegerät eine Zeigervorrichtung, und wenn ja, wie genau ist sie?
aspect-ratio: Breit-zu-Hoch Seitenverhältnis des Ansichtsfensters.
color: Anzahl der Bits pro Farbkomponente des Ausgabegeräts, oder null, wenn das Gerät keine Farbe hat.
color-gamut: Ungefähre Farbskala, die vom User-Agenten und Ausgabegerät unterstützt wird.
color-index: Anzahl der Einträge in der Look-Up-Tabelle des Ausgabegeräts, oder null, wenn das Gerät keine solche Tabelle verwendet.
device-aspect-ratio: Breit-zu-Hoch 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, das heißt, ob das Ansichtsfenster 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 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-Agenten und dem Ausgabegerät unterstützt wird. 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 Bitmap-Bildschirm?
height: Höhe des Ansichtsfensters.
horizontal-viewport-segments: Erkennen, ob das Gerät eine bestimmte Anzahl von Ansichtsfenstersegmenten hat, die horizontal angeordnet sind.
hover: Erlaubt es das primäre Eingabegerät, dass der Benutzer über Elemente schwebt?
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 Datenpuffer des Ausgabegeräts, oder null, wenn das Gerät nicht monochrom ist.
orientation: Ausrichtung des Ansichtsfensters.
overflow-block: Wie handhabt das Ausgabegerät den Inhalt, der das Ansichtsfenster entlang der Block-Achse überläuft?
overflow-inline: Kann Inhalt, der das Ansichtsfenster entlang der Inline-Achse überläuft, gescrollt werden?
pointer: Ist das primäre Eingabegerät eine Zeigervorrichtung und, wenn ja, wie genau ist sie?
prefers-color-scheme: Erkennen, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. Hinzugefügt in Media Queries Level 5.
prefers-contrast: Erkennen, 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: Erkennen, ob der Benutzer web-Inhalte bevorzugt, 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: Erkennen, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um die transparenten oder transluzenten Schichteneffekte auf dem Gerät zu reduzieren.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ist die Anzeigeausgabe progressiv oder interlaced?
scripting: Erkennen, ob Scripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.
shape: Erkennen, ob das Gerät rechteckige oder runde Displays hat.
update: Wie häufig kann das Ausgabegerät das Erscheinungsbild von Inhalten ändern.
vertical-viewport-segments: Erkennen, ob das Gerät eine bestimmte Anzahl von Ansichtsfenstersegmenten hat, die vertikal angeordnet sind. Hinzugefügt in Media Queries Level 5.
video-dynamic-range: Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videoebene des User-Agenten und dem Ausgabegerät unterstützt wird. Hinzugefügt in Media Queries Level 5.
width: Breite des Ansichtsfensters einschließlich der Breite der Bildlaufleiste.
-moz-device-pixel-ratio: Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie das resolution Merkmal mit der dppx Einheit stattdessen.
-webkit-animation: Der Browser unterstützt -webkit -präfixiertes CSS animation. Verwenden Sie die @supports (animation) Feature-Abfrage stattdessen.
-webkit-device-pixel-ratio: Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie das resolution Merkmal mit der dppx Einheit stattdessen.
-webkit-transform-2d: Der Browser unterstützt -webkit präfixierte 2D CSS transform. Verwenden Sie die @supports (transform) Feature-Abfrage stattdessen.
-webkit-transform-3d: Der Browser unterstützt -webkit präfixierte 3D CSS transform. Verwenden Sie die @supports (transform) Feature-Abfrage stattdessen.
-webkit-transition: Der Browser unterstützt -webkit -präfixiertes CSS transition. Verwenden Sie die @supports (transition) Feature-Abfrage 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 kombinieren, indem Sie sie mit Kommata 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 verknüpfen.
not: Wird verwendet, um eine Media Query zu negieren, wobei true zurückgegeben wird, wenn die Abfrage andernfalls false zurückgeben würde. In einer durch Kommas getrennten Liste von Abfragen negiert es nur die spezifische Abfrage, für die es angewendet wird.

Hinweis: In Level 3 kann das not Schlüsselwort nicht verwendet werden, um einen einzelnen Ausdruck für ein Medienmerkmal 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, wird die Abfrage screen and (width <= 500px) von älteren Browsern als screen interpretiert, und der Rest der Abfrage wird ignoriert, sodass die Stile auf allen Bildschirmen angewendet werden. Wenn Sie den only Operator 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 separat 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. Diese sind HTTP-Header, die Inhalte anfordern, die für die speziellen Medienanforderungen 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 bestmöglich auf Menschen einzugehen, die die Textgröße einer Website anpassen, 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.

Ziehen Sie auch Media Queries oder HTTP User-Agent Client-Hinweise in Betracht, 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 die Menge an Animationen oder Bewegungen basierend auf den Benutzerpräferenzen zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten und damit auch in die Merkmale und das Design des Geräts bieten, mit dem der Benutzer arbeitet, besteht das Potenzial, dass sie missbraucht werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder zumindest in einem Detailgrad kategorisiert, der für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potenzials könnte ein Browser beschließen, die zurückgegebenen Werte in gewisser Weise zu manipulieren, 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 die Firefox-Einstellung "Resist Fingerprinting" aktiviert ist, melden viele Media Queries Standardwerte anstelle von Werten, die den tatsächlichen Zustand des Geräts darstellen.

Beispiele

Testen für Print- und Screen-Medientypen

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 eines beliebigen Features, das einen Bereich akzeptiert, wie in den untenstehenden 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

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