Die @mediaCSSAt-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.
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.
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.
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.)
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.
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.
Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User Agent und Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.
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.
Erkennt, ob ein Benutzer auf seinem Gerät eine Einstellung aktiviert hat, um die transparenten oder durchsichtigen Schichteffekte des Geräts zu reduzieren.
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.
Die logischen Operatorennot, 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.
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.
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.
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.
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.
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.
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.
Die Bereichssyntax erlaubt weniger ausführliche Media Queries beim Testen auf beliebige Merkmale, die einen Bereich akzeptieren, wie in den folgenden Beispielen gezeigt:
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.
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.