`@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 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 auf das Gerät zutrifft, 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-Regel kann auf oberster Ebene Ihres Codes oder verschachtelt in einer anderen bedingten Gruppenregel platziert werden.

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

Beschreibung

Die <media-query-list> einer Media Query umfasst <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 logischen Operators only ist der Medientyp optional und der Typ all wird impliziert.

all: Geeignet für alle Geräte.
print: Vorgesehen für paginierte Materialien und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Bitte prüfen Sie Seitenmedien für Informationen zu Formatierungsproblemen, die spezifisch für diese Formate sind.)
screen: Vorrangig für Bildschirme vorgesehen.

Hinweis: CSS2.1 und Media Queries 3 definierten mehrere zusätzliche Medientypen (tty, tv, projection, handheld, braille, embossed, und aural), die aber in Media Queries 4 veraltet sind und nicht mehr verwendet werden sollten.

Medienfunktionen

Eine <media feature> beschreibt spezifische Eigenschaften des User Agents, des Ausgabegeräts oder der Umgebung. Media Feature-Ausdrücke prüfen auf ihre Anwesenheit, ihren Wert oder Wertebereiche und sind völlig optional. Jeder Media Feature-Ausdruck muss von Klammern umgeben sein.

any-hover: Ermöglicht jedes verfügbare 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: Breiten-Höhen-Seitenverhältnis des Ansichtsbereichs.
color: Anzahl der Bits pro Farbkomponente des Ausgabegeräts, oder null, wenn das Gerät nicht in Farbe ist.
color-gamut: Ungefährer Farbraum, der vom User Agent und dem Ausgabegerät unterstützt wird.
color-index: Anzahl der Einträge in der Farbauswahltabelle des Ausgabegeräts, oder null, wenn das Gerät keine solche Tabelle nutzt.
device-aspect-ratio: Breiten-Höhen-Seitenverhältnis des Ausgabegeräts. Veraltet in Media Queries Stufe 4.
device-height: Höhe der Wiedergabeoberfläche des Ausgabegeräts. Veraltet in Media Queries Stufe 4.
device-posture: Erkennt die aktuelle Haltung des Geräts, d.h. ob der Ansichtsbereich in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.
device-width: Breite der Wiedergabeoberfläche des Ausgabegeräts. Veraltet in Media Queries Stufe 4.
display-mode: Der Modus, in dem eine Anwendung angezeigt wird: beispielsweise Vollbild oder Bild-im-Bild Modus. Hinzugefügt in Media Queries Stufe 5.
dynamic-range: Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User Agent und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Stufe 5.
forced-colors: Erkennen, ob der User Agent die Farbpalette einschränkt. Hinzugefügt in Media Queries Stufe 5.
grid: Verwendet das Gerät einen Raster- oder Bitmap-Bildschirm?
height: Höhe des Ansichtsbereichs.
horizontal-viewport-segments: Erkennt, ob das Gerät eine bestimmte Anzahl horizontal angeordneter Ansichtsbereichsegmente hat.
hover: Ermöglicht der 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 Stufe 5.
monochrome: Bits pro Pixel in der monochromen Frame-Buffer des Ausgabegeräts, oder null, wenn das Gerät nicht monochrom ist.
orientation: Ausrichtung des Ansichtsbereichs.
overflow-block: Wie behandelt das Ausgabegerät Inhalte, die im Block-Achsenverlauf den Ansichtsbereich überfluten?
overflow-inline: Kann der Inhalt, der im Inline-Achsenverlauf den Ansichtsbereich überflutet, gescrollt werden?
pointer: Ist der primäre Eingabemechanismus 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 Stufe 5.
prefers-contrast: Erkennt, ob der Benutzer das System gebeten hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Stufe 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 Stufe 5.
prefers-reduced-transparency: Erkennt, ob ein Benutzer auf seinem Gerät eine Einstellung aktiviert hat, um die transparenten oder transluzenten Schichteffekte zu reduzieren, die auf dem Gerät verwendet werden.
resolution: Pixeldichte des Ausgabegeräts.
scan: Ob die Ausgabe progressiv oder interlaced ist.
scripting: Erkennt, ob Scripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Stufe 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 eine bestimmte Anzahl vertikal angelegter Ansichtsbereichsegmente hat. Hinzugefügt in Media Queries Stufe 5.
video-dynamic-range: Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Video-Ebene des User Agents und des Ausgabegeräts unterstützt werden. Hinzugefügt in Media Queries Stufe 5.
width: Breite des Ansichtsbereichs einschließlich der Breite des Scrollbalkens.
-moz-device-pixel-ratio: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen die resolution Funktion mit der dppx-Einheit.
-webkit-animation: Der Browser unterstützt -webkit-präfixierte CSS animation. Verwenden Sie stattdessen die @supports (animation) Feature-Anfrage.
-webkit-device-pixel-ratio: Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie stattdessen die resolution Funktion mit der dppx-Einheit.
-webkit-transform-2d: Der Browser unterstützt -webkit-präfixierte 2D-CSS transform. Verwenden Sie stattdessen die @supports (transform) Feature-Anfrage.
-webkit-transform-3d: Der Browser unterstützt -webkit-präfixierte 3D-CSS transform. Verwenden Sie stattdessen die @supports (transform) Feature-Anfrage.
-webkit-transition: Der Browser unterstützt -webkit-präfixierte CSS transition. Verwenden Sie stattdessen die @supports (transition) Feature-Anfrage.

Logische Operatoren

Die logischen Operatoren not, and, only und or können verwendet werden, um eine komplexe Media Query zu komponieren. Sie können auch mehrere Media-Queries zu einer einzelnen Regel kombinieren, indem Sie sie durch Kommas trennen.

and: Wird verwendet, um mehrere Medienfunktionen in 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 Medienfunktionen mit Medientypen zu verknüpfen.
not: Wird verwendet, um eine Media Query zu negieren, und gibt true zurück, wenn die Abfrage sonst false wäre. Wird in einer durch Kommas getrennten Liste von Abfragen verwendet, negiert es nur die spezifische Abfrage, auf die es angewendet wird.

Hinweis: In Stufe 3 kann das not-Schlüsselwort nicht verwendet werden, um einen einzelnen Medienfunktionsausdruck zu negieren, sondern nur eine ganze Media Query.
only: Wendet einen Stil nur an, wenn eine ganze Abfrage übereinstimmt. Es ist nützlich, um zu verhindern, dass ältere Browser ausgewählte Styles anwenden. Wenn only nicht verwendet wird, würde ein älterer Browser die Abfrage screen and (width <= 500px) als screen interpretieren und den Rest der Abfrage ignorieren, und seine Styles 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 durch Kommas getrennten Liste wird separat von den anderen behandelt. Wenn also irgendeine der Abfragen in einer Liste true ist, gibt die gesamte Media-Aussage true zurück. Anders gesagt, Listen verhalten sich wie ein logischer or-Operator.
or: Entspricht dem ,-Operator. Hinzugefügt in Media Queries Stufe 4.

Client-Hinweise des User Agents

Einige Media Queries haben entsprechende Client-Hinweise des User Agents. Dies sind HTTP-Header, die Inhalte anfordern, die für die jeweilige Medienanforderung voroptimiert sind. Sie beinhalten Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

Formale Syntax

@media = 
  @media <media-query-list> { <rule-list> }

Zugänglichkeit

Um Menschen, die die Textgröße einer Website anpassen, bestmöglich entgegenzukommen, 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-Client-Hinweise des User Agents, um die Benutzererfahrung zu verbessern. Beispielsweise 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 Vorlieben des Benutzers zu minimieren.

Sicherheit

Da Media Queries Einblick in die Fähigkeiten und damit auch in die Eigenschaften und das Design des Geräts, mit dem der Benutzer arbeitet, geben, besteht die Möglichkeit, dass sie missbraucht werden könnten, um einen sogenannten "Fingerprint" zu konstruieren, der das Gerät identifiziert oder es zumindest bis zu einem gewissen Detailgrad kategorisiert, was für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potenzials könnte ein Browser optieren, die zurückgegebenen Werte auf irgendeine Weise zu verzerren, um zu verhindern, dass sie zur präzisen Identifizierung eines Computers verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn die Einstellung "Resist Fingerprinting" von Firefox aktiviert ist, melden viele Media Queries Standardwerte anstelle von Werten, die den aktuellen Gerätezustand repräsentieren.

Beispiele

Testen auf Druck- und Bildschirm-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, wenn Sie auf ein Merkmal testen, das einen Wertebereich akzeptiert, wie in den nachstehenden 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

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