@media

Die @media-At-Regel kann entweder auf oberster Ebene Ihres Codes oder innerhalb einer anderen bedingten Gruppen-At-Regel verschachtelt werden.

/* 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 der Syntax von Media Queries, siehe bitte Verwendung von Media Queries.

Eine Media Query <media-query-list> umfasst <media-type>s, <media-feature>s und logische Operatoren.

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

Vorgesehen für paginierte Materialien und Dokumente, die auf einem Bildschirm im Druckvorschau-Modus angesehen werden. (Bitte beachten Sie paginierte Medien für Informationen zu Formatierungsproblemen, die spezifisch für diese Formate sind.)

screen

Hauptsächlich für Bildschirme vorgesehen.

Ein <media feature> beschreibt spezifische Eigenschaften des User-Agents, des Ausgabegeräts oder der Umgebung. Medienmerkmalausdrücke prüfen auf deren Vorhandensein, Wert oder Wertbereich und sind vollständig optional. Jeder Medienmerkmalausdruck muss in Klammern eingeschlossen sein.

any-hover

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

any-pointer

Ist irgendein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie präzise 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 keine Farben unterstützt.

color-gamut

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

color-index

Anzahl der Einträge in der Farbnachschlagetabelle 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 Wiedergabefläche des Ausgabegeräts. Veraltet in Media Queries Level 4.

device-width

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

display-mode

Der Modus, in dem eine Anwendung angezeigt wird: beispielsweise Vollbildmodus oder Bild-im-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

Erkennen, 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 der primäre Eingabemechanismus dem Nutzer, ü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 monochromen Framebuffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.

orientation

Ausrichtung des Viewport.

overflow-block

Wie behandelt das Ausgabegerät Inhalte, die den Viewport entlang der Block-Achse überlaufen?

overflow-inline

Kann Inhalt, der den Viewport entlang der Inline-Achse überläuft, gescrollt werden?

pointer

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

prefers-color-scheme

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

prefers-contrast

Erkennt, ob der Nutzer das System gebeten 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 Nutzer um Webinhalte gebeten hat, die weniger Internetverkehr verbrauchen.

prefers-reduced-motion

Der Nutzer bevorzugt weniger Bewegung auf der Seite. Hinzugefügt in Media Queries Level 5.

prefers-reduced-transparency

Erkennt, ob ein Nutzer eine Einstellung auf seinem Gerät aktiviert hat, um transparente oder durchscheinende Schichteffekte auf dem Gerät 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 zur Unterscheidung zwischen rechteckigen und runden Displays.

update

Wie häufig das Ausgabegerät das Erscheinungsbild von Inhalten verändern kann.

video-dynamic-range

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

width

Breite des Viewports einschließlich der Breite der Scrollleiste.

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 eine einzelne Regel kombinieren, indem Sie sie mit Kommas trennen.

and

Wird zum Kombinieren mehrerer Medienmerkmale in eine einzelne Media Query verwendet, bei der 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 und true zurückzugeben, wenn die Abfrage andernfalls false zurückgeben würde. Wenn in einer komma-getrennten Liste von Abfragen enthalten, wird sie nur die spezifische Abfrage negieren, auf die sie angewendet wird.

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

only

Wendet einen Stil nur bei vollständiger Übereinstimmung einer Abfrage an. 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 die 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 komma-getrennten Liste wird separat von den anderen behandelt. Sofern eine der Abfragen in einer Liste true ist, gibt die gesamte Media-Aussage 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.

Einige Media Queries haben entsprechende User-Agent-Client-Hints. Diese sind HTTP-Header, die Inhalte anfordern, die für die spezifischen Medienanforderungen voroptimiert sind. Sie umfassen Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

Um Personen, die die Textgröße einer Website anpassen, optimal gerecht zu werden, verwenden Sie em, wenn Sie einen <length> für Ihre Media Queries benötigen.

Sowohl em als auch px sind gültige Einheiten, aber em funktioniert besser, wenn der Nutzer die Textgröße des Browsers ändert.

Überlegen Sie auch, Media Queries oder HTTP-User-Agent-Client-Hints zu verwenden, 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 Animation oder Bewegung basierend auf den Benutzerpräferenzen zu minimieren.

Da Media Queries Einblicke in die Fähigkeiten—und damit in die Eigenschaften und das Design—des Geräts bieten, mit dem der Nutzer arbeitet, besteht die Möglichkeit, dass diese missbraucht werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest zu einem gewissen Grad kategorisiert, was für die Nutzer unerwünscht sein könnte.

Aufgrund dieser Möglichkeit könnte ein Browser die zurückgegebenen Werte in irgendeiner Weise verfälschen, 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 bieten; zum Beispiel, wenn in Firefox die Einstellung "Resist Fingerprinting" aktiviert ist, geben viele Media Queries Standardwerte zurück anstelle von Werten, die den tatsächlichen Gerätezustand repräsentieren.

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

@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 ermöglicht weniger ausführliche Media Queries beim Testen auf jede Eigenschaft, die 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 bitte Verwendung von Media Queries.

• CSS Media Queries-Modul
• Verwendung von Media Queries
• CSSMediaRule-Schnittstelle
• Erweiterte Medienmerkmale von Mozilla
• Erweiterte Medienmerkmale von WebKit