@media

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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 aus CSS angeben, 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

Syntax

Die @media At-Regel kann auf der höchsten Ebene Ihres Codes oder innerhalb einer anderen bedingten Gruppen-At-Regel geschachtelt platziert werden.

css
/* At the top level of your code */
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/* Nested within another conditional at-rule */
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}

Für eine Diskussion über die Syntax von Media Queries siehe Using media queries.

Beschreibung

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

Medientypen

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

all

Geeignet für alle Geräte.

print

Vorgesehen für paginiertes Material und Dokumente, die auf einem Bildschirm im Druckvorschau-Modus angezeigt werden. (Bitte schauen Sie bei paged media nach, um Informationen zu formatbezogenen Fragen zu erhalten, die spezifisch für diese Formate sind.)

screen

Hauptsächlich 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 diese wurden in Media Queries 4 als veraltet markiert und sollten nicht verwendet werden.

Medienmerkmale

Ein <media feature> beschreibt spezifische Eigenschaften des User-Agents, Ausgabegeräts oder der Umgebung. Medienmerkmal-Ausdrücke testen auf deren Vorhandensein, Wert oder Wertebereich und sind vollständig optional. Jedes Medienmerkmal muss von Klammern umgeben sein.

any-hover

Erlaubt irgendein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?

any-pointer

Ist irgendein 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 nicht farbig ist.

color-gamut

Ungefähre Reichweite der Farben, die vom User Agent und Ausgabegerät unterstützt werden.

color-index

Anzahl der Einträge in der Farbtabelle 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. In Media Queries Level 4 veraltet.

device-height

Höhe der Rendering-Oberfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.

device-posture

Erkennt die aktuelle Haltung des Geräts, das heißt, ob der Viewport flach oder gefaltet ist. Definiert in der Device Posture API.

device-width

Breite der Rendering-Oberfläche des Ausgabegeräts. In Media Queries Level 4 veraltet.

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 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 Gitter- oder Bitmap-Bildschirm?

height

Höhe des Viewports.

hover

Erlaubt das primäre Eingabegerät 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 Monochrom-Framebuffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.

orientation

Ausrichtung des Viewports.

overflow-block

Wie handhabt das Ausgabegerät Inhalte, die den Viewport entlang der Blockachse überlaufen?

overflow-inline

Können Inhalte, die den Viewport entlang der Inline-Achse überlaufen, gescrollt werden?

pointer

Ist das primäre Eingabegerät ein Zeigegerät, und wenn ja, wie genau ist es?

prefers-color-scheme

Erkannt, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. Hinzugefügt in Media Queries Level 5.

prefers-contrast

Erkennt, ob der Benutzer das System dazu aufgefordert hat, die Menge des Kontrasts zwischen benachbarten Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.

prefers-reduced-data

Erkennt, ob der Benutzer Inhalte gewünscht hat, die weniger Internet-Traffic verbrauchen.

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 auf seinem Gerät eine Einstellung aktiviert hat, um die transparenten oder durchsichtigen Schichteffekte des Geräts zu reduzieren.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Anzeigeausgabe 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 kann das Ausgabegerät das Erscheinungsbild des Inhalts ändern.

video-dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videoebene des User Agents und des Ausgabegeräts unterstützt werden. Hinzugefügt in Media Queries Level 5.

width

Breite des Viewports einschließlich der Breite des Scrollbalkens.

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 zu einer einzigen 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 Eigenschaft 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, wobei true zurückgegeben wird, wenn die Abfrage andernfalls false zurückgeben würde. Wenn es in einer kommagetrennten Liste von Abfragen vorhanden ist, negiert es nur die spezifische Abfrage, auf die es angewendet wird.

Hinweis: In Level 3 kann das not-Schlüsselwort nicht verwendet werden, um einen einzelnen Media-Feature-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. Ohne only würden ältere Browser die Abfrage screen and (max-width: 500px) als screen interpretieren, den Rest der Abfrage ignorieren und ihre Stile auf allen Bildschirmen anwenden. 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 kommagetrennten Liste wird separat von den anderen behandelt. Wenn also eine der Abfragen in einer Liste true ist, gibt die gesamte Media-Anweisung 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. Dies sind HTTP-Header, die Inhalte anfordern, die für die spezielle Medienenanforderung vorab optimiert 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 bestmöglich entgegenzukommen, die die Textgröße einer Website anpassen, verwenden Sie ems, 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-Hinweise, 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 Animation oder Bewegung basierend auf den Benutzer-Präferenzen zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten - und in der Folge die Merkmale und das Design - des Geräts bieten, mit dem der Benutzer arbeitet, besteht die Möglichkeit, dass sie dazu verwendet werden können, einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest in einem Detailgrad kategorisiert, der für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potentials kann ein Browser sich dafür entscheiden, die zurückgegebenen Werte in irgendeiner Weise zu verfälschen, um zu verhindern, dass sie zur genauen Identifikation eines Computers verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; beispielsweise, wenn die "Resist Fingerprinting"-Einstellung von Firefox aktiviert ist, geben viele Media Queries Standardwerte anstelle von Werten zurück, die den tatsächlichen Gerätezustand repräsentieren.

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;
  }
}

@media only screen and (min-width: 320px) and (max-width: 480px) and (resolution: 150dpi) {
  body {
    line-height: 1.4;
  }
}

Die Bereichssyntax erlaubt weniger ausführliche Media Queries beim Testen auf beliebige Merkmale, die einen Bereich akzeptieren, wie in den folgenden 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 Using media queries.

Spezifikationen

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

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
@media
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
-webkit-animation media feature
DeprecatedNon-standard
-webkit-device-pixel-ratio media feature
-webkit-max-device-pixel-ratio media feature
-webkit-min-device-pixel-ratio media feature
-webkit-transform-2d media feature
Non-standard
-webkit-transform-3d media feature
-webkit-transition media feature
DeprecatedNon-standard
any-hover media feature
any-pointer media feature
aspect-ratio media feature
calc() expressions
color media feature
color-gamut media feature
color-index media feature
device-aspect-ratio media feature
Deprecated
device-height media feature
Deprecated
device-posture media feature
Experimental
device-width media feature
Deprecated
display-mode media feature
picture-in-picture value
Experimental
dynamic-range media feature
forced-colors media feature
grid media feature
height media feature
hover media feature
inverted-colors media feature
Media feature expressions
Media query value support
monochrome media feature
Nested media queries
or syntax from Media Queries Level 4
orientation media feature
overflow-block media feature
overflow-inline media feature
pointer media feature
prefers-color-scheme media feature
no-preference value
DeprecatedNon-standard
Respects color-scheme inherited from parent
Non-standard
prefers-contrast media feature
prefers-reduced-data media feature
Experimental
prefers-reduced-motion media feature
prefers-reduced-transparency media feature
Experimental
Range syntax from Media Queries Level 4
resolution media feature
scripting media feature
update media feature
video-dynamic-range media feature
width media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
In development. Supported in a pre-release version.
In development. Supported in a pre-release version.
No support
No support
Experimental. Expect behavior to change in the future.
Non-standard. Check cross-browser support before using.
Deprecated. Not for use in new websites.
See implementation notes.
User must explicitly enable this feature.
Has more compatibility info.

Siehe auch