@media

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 auf oberster Ebene Ihres Codes oder verschachtelt in einer beliebigen anderen bedingten Gruppenregel platziert werden.

Für eine Diskussion der Syntax von Media Queries siehe 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. Mit Ausnahme der Verwendung des logischen Operators only ist der Medientyp optional und der Typ all wird impliziert.

all

Geeignet für alle Geräte.

print

Für paginierte Materialien und Dokumente gedacht, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Bitte siehe paged media für Informationen zu spezifischen Formatierungsproblemen.)

screen

Hauptsächlich für Bildschirme gedacht.

Medienmerkmale

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

any-hover

Erlaubt irgendein verfügbarer Eingabemechanismus dem Benutzer, über Elementen zu hoveren?

any-pointer

Ist irgendein verfügbarer Eingabemechanismus ein Zeigegerät, und wenn ja, wie genau ist es?

aspect-ratio

Breite-zu-Höhe-Seitenverhältnis des Ansichtsfensters.

color

Anzahl der Bits pro Farbkomponente des Ausgabegeräts oder null, wenn das Gerät nicht farbig ist.

color-gamut

Ungefähre Farbpalette, die vom User Agent und dem Ausgabegerät unterstützt wird.

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. Veraltet in Media Queries Level 4.

device-height

Höhe der Darstellungsebene des Ausgabegeräts. Veraltet in Media Queries Level 4.

device-posture

Erkennt die aktuelle Haltung des Geräts, d.h. ob sich das Ansichtsfenster in einem flachen oder gefalteten Zustand befindet. Definiert in der Device Posture API.

device-width

Breite der Darstellungsebene des Ausgabegeräts. Veraltet in Media Queries Level 4.

display-mode

Der Modus, in dem eine Anwendung angezeigt wird: z.B. Vollbild oder Bild-in-Bild Modus. Hinzugefügt in Media Queries Level 5.

dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User Agent und dem 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 ein Raster oder einen Bitmap-Bildschirm?

height

Höhe des Ansichtsfensters.

horizontal-viewport-segments

Erkennt, ob das Gerät eine angegebene Anzahl von Ansichtsfenster-Segmenten horizontal angeordnet hat.

hover

Erlaubt der primäre Eingabemechanismus dem Benutzer, über Elementen zu hoveren?

inverted-colors

Invertiert der User Agent oder das zugrunde liegende Betriebssystem die Farben? Hinzugefügt in Media Queries Level 5.

monochrome

Bits pro Pixel im monochromen Frame-Buffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.

orientation

Orientierung des Ansichtsfensters.

overflow-block

Wie verarbeitet das Ausgabegerät Inhalte, die den Ansichtsfenster entlang der Block-Achse überfließen?

overflow-inline

Können Inhalte, die den Ansichtsfenster entlang der Inline-Achse überfließen, gescrollt werden?

pointer

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

prefers-color-scheme

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

prefers-contrast

Erkennt, ob der Benutzer das System angewiesen hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.

prefers-reduced-data

Erkennt, ob der Benutzer webbasierte Inhalte bevorzugt, die weniger Internetverkehr konsumieren.

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 eine Einstellung aktiviert hat, die die transparenten oder durchscheinenden Schichteffekte des Geräts reduziert.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Darstellungsausgabe progressiv oder interlaced ist.

scripting

Erkennt, ob Skripting (d.h. JavaScript) verfügbar ist. Hinzugefügt in Media Queries Level 5.

shape

Erkennt die Form des Geräts, um zwischen rechteckigen und runden Displays zu unterscheiden.

update

Wie oft das Ausgabegerät das Erscheinungsbild von Inhalten ändern kann.

vertical-viewport-segments

Erkennt, ob das Gerät eine angegebene Anzahl von Ansichtsfenster-Segmenten vertikal angeordnet hat. Hinzugefügt in Media Queries Level 5.

video-dynamic-range

Kombination aus Helligkeit, Kontrastverhältnis und Farbtiefe, die vom Videobereich des User Agents und dem Ausgabegerät unterstützt werden. Hinzugefügt in Media Queries Level 5.

width

Breite des Ansichtsfensters einschließlich der Breite der Scrollleiste.

-moz-device-pixel-ratio

Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie die resolution Funktion mit der dppx Einheit statt.

-webkit-animation

Der Browser unterstützt -webkit-präfixierte CSS animation. Verwenden Sie die @supports (animation) Feature-Abfrage statt.

-webkit-device-pixel-ratio

Die Anzahl der Gerätepixel pro CSS-Pixel. Verwenden Sie die resolution Funktion mit der dppx Einheit statt.

-webkit-transform-2d

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

-webkit-transform-3d

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

-webkit-transition

Der Browser unterstützt -webkit-präfixierte CSS transition. Verwenden Sie die @supports (transition) Feature-Abfrage statt.

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 in einer einzigen Regel durch Kommas trennen und kombinieren.

and

Wird verwendet, um mehrere Medienmerkmale zu einer einzigen Media Query zusammenzufassen, wobei jede verknüpfte Funktion true sein muss, damit die Abfrage true zurückgibt. Es wird auch verwendet, um Medienmerkmale mit Medientypen zu verknüpfen.

not

Wird verwendet, um eine Media Query zu negieren, was true zurückgibt, wenn die Abfrage sonst false zurückgeben würde. Wenn es in einer kommagetrennten Liste von Abfragen vorhanden ist, wird es nur die spezifische Abfrage negieren, auf die es angewendet wird.

Hinweis: In Level 3 kann das not-Schlüsselwort nicht verwendet werden, um einen einzelnen Medienmerkmal-Ausdruck zu negieren, sondern nur eine gesamte Media Query.

only

Wendet einen Stil nur an, wenn die gesamte Abfrage übereinstimmt. Es ist nützlich, um zu verhindern, dass ältere Browser ausgewählte Stile anwenden. Wenn Sie only nicht verwenden, würden ältere Browser die Abfrage screen and (width <= 500px) als screen interpretieren, den Rest der Abfrage ignorieren und seine 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 in einer einzigen Regel zu kombinieren. Jede Abfrage in einer kommagetrennten Liste wird separat von den anderen behandelt. Somit, wenn eine der Abfragen in einer Liste true ist, gibt die gesamte Media-Auswertung 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.

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 umfassen Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

Formale Syntax

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

Barrierefreiheit

Um Menschen, die die Textgröße einer Website anpassen, am besten entgegenzukommen, 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-Client-Hinweise des User Agents, 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 der verwendeten Animationen oder Bewegungen basierend auf den Benutzerpräferenzen zu minimieren.

Sicherheit

Da Media Queries Einblicke in die Fähigkeiten - und damit in die Merkmale und das Design - des Geräts geben, 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 es zumindest mit etwas Detailliertheit kategorisiert, die für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potenzials könnte ein Browser die zurückgegebenen Werte in gewisser Weise verschleiern, um deren genaue Verwendung zur Identifizierung eines Computers zu verhindern. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn die Firefox-Einstellung "Fingerprinting widerstehen" aktiviert ist, melden viele Media Queries Standardwerte anstelle von Werten, die den tatsächlichen Gerätezustand darstellen.

Beispiele

Testen von 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 umständliche Media Queries, wenn nach einem Merkmal gesucht wird, das einen Bereich akzeptiert, wie in den folgenden Beispielen gezeigt:

@media (height > 600px) {
  body {
    line-height: 1.4;
  }
}

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

Für weitere Beispiele siehe Verwendung von Media Queries.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Media-Queries-Modul CSS media queries
• Verwendung von Media Queries Using media queries
• CSSMediaRule Schnittstelle
• Erweiterte Mozilla-Medienmerkmale Extended Mozilla media features
• Erweiterte WebKit-Medienmerkmale Extended WebKit media features