Die@mediaCSSAt-Regel kann verwendet werden, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer oder mehrererMedia 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.

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

/* 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 bitteUsing media queries.

Beschreibung

Eine Media Query's<media-query-list> enthält<media-type>s,<media-feature>s undlogische Operatoren.

Medientypen

Ein<media-type> beschreibt die allgemeine Kategorie eines Geräts.Außer bei Verwendung desonly logischen Operators ist der Medientyp optional und derall 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 Siepaged media für Informationen zu Formatierungsfragen, die spezifisch für diese Formate sind.)

screen

Hauptsächlich für Bildschirme bestimmt.

Medienmerkmale

Ein<media feature> beschreibt spezifische Merkmale desUser-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-HochSeitenverhä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 derDevice 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 Beispielfullscreen oderpicture-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 dasresolution Merkmal mit derdppx Einheit stattdessen.

-webkit-animation

Der Browser unterstützt-webkit -präfixiertes CSSanimation. Verwenden Sie die@supports (animation) Feature-Abfrage stattdessen.

-webkit-device-pixel-ratio

Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie dasresolution Merkmal mit derdppx Einheit stattdessen.

-webkit-transform-2d

Der Browser unterstützt-webkit präfixierte 2D CSStransform. Verwenden Sie die@supports (transform) Feature-Abfrage stattdessen.

-webkit-transform-3d

Der Browser unterstützt-webkit präfixierte 3D CSStransform. Verwenden Sie die@supports (transform) Feature-Abfrage stattdessen.

-webkit-transition

Der Browser unterstützt-webkit -präfixiertes CSStransition. Verwenden Sie die@supports (transition) Feature-Abfrage stattdessen.

Logische Operatoren

Dielogischen Operatorennot,and,only undor 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 Funktiontrue zurückgeben muss, damit die Abfragetrue ist.Es wird auch verwendet, um Medienmerkmale mit Medientypen zu verknüpfen.

not

Wird verwendet, um eine Media Query zu negieren, wobeitrue zurückgegeben wird, wenn die Abfrage andernfallsfalse 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 dasnot 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 Sieonly nicht verwenden, wird die Abfragescreen and (width <= 500px) von älteren Browsern alsscreen interpretiert, und der Rest der Abfrage wird ignoriert, sodass die Stile auf allen Bildschirmen angewendet werden.Wenn Sie denonly 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 Listetrue ist, gibt die gesamte Medienanweisungtrue zurück.Mit anderen Worten, Listen verhalten sich wie ein logischeror Operator.

or

Entspricht dem, Operator. Hinzugefügt in Media Queries Level 4.

User-Agent Client-Hinweise

Einige Media Queries haben entsprechendeUser-Agent Client-Hinweise.Diese sind HTTP-Header, die Inhalte anfordern, die für die speziellen Medienanforderungen vorab optimiert sind.Sie beinhaltenSec-CH-Prefers-Color-Scheme undSec-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 Sieem, wenn Sie eine<length> für IhreMedia Queries benötigen.

Sowohlem als auchpx sind gültige Einheiten, aberem funktioniert besser, wenn der Benutzer die Textgröße des Browsers ändert.

Ziehen Sie auch Media Queries oderHTTP User-Agent Client-Hinweise in Betracht, um die Benutzererfahrung zu verbessern.Zum Beispiel kann die Media Queryprefers-reduced-motion oder der entsprechende HTTP-HeaderSec-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

@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:

@media (height > 600px) {  body {    line-height: 1.4;  }}@media (400px <= width <= 700px) {  body {    line-height: 1.4;  }}

Für weitere Beispiele siehe bitteUsing media queries.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS Media Queries Modul
• Using media queries
• CSSMediaRule Schnittstelle
• CSS@custom-media At-Regel
• Erweiterte Mozilla-Medienmerkmale
• Erweiterte WebKit-Medienmerkmale