@media

Die @media at-rule kann entweder auf der obersten Ebene Ihres Codes platziert oder innerhalb einer anderen bedingten Gruppierungsregel verschachtelt sein.

/* 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 lesen Sie bitte Using 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. Außer bei Verwendung des logischen Operators only ist der Medientyp optional und der Typ all wird impliziert.

all

Geeignet für alle Geräte.

print

Bestimmt für paginierte Materialien und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Bitte sehen Sie paged media für Informationen zu Formatierungsproblemen, die für diese Formate spezifisch sind.)

screen

Hauptsächlich für Bildschirme bestimmt.

Ein <media feature> beschreibt spezifische Merkmale des User Agents, des Ausgabegeräts oder der Umgebung. Medienmerkmal-Ausdrücke testen deren Vorhandensein, Wert oder Wertbereich und sind völlig optional. Jeder Medienmerkmal-Ausdruck muss in Klammern eingefasst sein.

any-hover

Erlaubt ein verfügbares Eingabemechanismus dem Benutzer, über Elemente zu schweben?

any-pointer

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

aspect-ratio

Seitenverhältnis von Breite zu Höhe des Viewports.

color

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

color-gamut

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

color-index

Anzahl der Einträge in der Farbsuch-Tabelle des Ausgabegeräts oder null, wenn das Gerät keine solche Tabelle verwendet.

device-aspect-ratio

Seitenverhältnis von Breite zu Höhe des Ausgabegeräts. In Media Queries Level 4 veraltet.

device-height

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

device-width

Breite der Anzeigeflä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. In Media Queries Level 5 hinzugefügt.

dynamic-range

Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die vom User Agent und dem Ausgabegerät unterstützt werden. In Media Queries Level 5 hinzugefügt.

forced-colors

Erkennung, ob der User Agent die Farbpalette einschränkt. In Media Queries Level 5 hinzugefügt.

grid

Verwendet das Gerät einen Raster- oder Bitmap-Bildschirm?

height

Höhe des Viewports.

hover

Erlaubt das primäre Eingabemechanismus dem Benutzer, über Elemente zu schweben?

inverted-colors

Wird die Farbgebung vom User Agent oder dem zugrundeliegenden Betriebssystem invertiert? In Media Queries Level 5 hinzugefügt.

monochrome

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

orientation

Orientierung des Viewports.

overflow-block

Wie geht das Ausgabegerät mit Inhalten um, die den Viewport entlang der Blockachse überlaufen?

overflow-inline

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

pointer

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

prefers-color-scheme

Erkennung, ob der Benutzer ein helles oder dunkles Farbschema bevorzugt. In Media Queries Level 5 hinzugefügt.

prefers-contrast

Erkennt, ob der Benutzer gebeten hat, den Kontrast zwischen benachbarten Farben zu erhöhen oder zu verringern. In Media Queries Level 5 hinzugefügt.

prefers-reduced-data

Erkennt, ob der Benutzer um Webinhalte gebeten hat, die weniger Internetverkehr verbrauchen.

prefers-reduced-motion

Der Benutzer bevorzugt weniger Bewegung auf der Seite. In Media Queries Level 5 hinzugefügt.

prefers-reduced-transparency

Erkennt, ob ein Benutzer eine Einstellung auf seinem Gerät aktiviert hat, um die transparenten oder durchsichtigen Schichteffekte zu reduzieren, die auf dem Gerät verwendet werden.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Anzeigeausgabe progressiv oder interlaced ist.

scripting

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

shape

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

update

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

video-dynamic-range

Kombination von Helligkeit, Kontrastverhältnis und Farbtiefe, die von der Videoebene des User Agents und dem Ausgabegerät unterstützt werden. In Media Queries Level 5 hinzugefügt.

width

Breite des Viewports inklusive der Breite des Scrollbalkens.

Die logischen Operatoren not, and, only und or können verwendet werden, um eine komplexe Media Query zu erstellen. Es ist auch möglich, mehrere Media Queries zu einer einzigen Regel zu kombinieren, indem sie durch Kommas getrennt werden.

and

Wird verwendet, um mehrere Medienmerkmale zu einer einzelnen Media Query zu kombinieren, wobei jedes verknüpfte Merkmal 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, indem true zurückgegeben wird, wenn die Abfrage sonst false zurückgeben würde. Wenn es in einer durch Kommas getrennten Liste von Abfragen vorhanden ist, wird es nur die spezifische Abfrage negieren, auf die es angewendet wird.

Hinweis: In Level 3 kann das Schlüsselwort not nicht verwendet werden, um einen einzelnen Medienmerkmal-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. Wenn only nicht verwendet wird, würden ältere Browser die Abfrage screen and (max-width: 500px) als screen interpretieren, den Rest der Abfrage ignorieren und ihre Stile auf alle Bildschirme anwenden. Wenn Sie den only-Operator verwenden, müssen Sie auch einen Medientyp angeben.

, (comma)

Kommas werden verwendet, um mehrere Media Queries zu einer einzigen Regel zu kombinieren. Jede Abfrage in einer durch Kommas getrennten Liste wird unabhängig von den anderen behandelt. Wenn daher 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. In Media Queries Level 4 hinzugefügt.

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. Dazu gehören Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

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

Um Personen, die die Textgröße einer Webseite anpassen, am besten entgegenzukommen, 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 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 Animation oder Bewegung basierend auf Benutzerpräferenzen zu minimieren.

Da Media Queries Einblicke in die Fähigkeiten - und im erweiterten Sinne in die Merkmale und das Design - des Geräts bieten, mit dem der Benutzer arbeitet, besteht die Möglichkeit, dass sie missbraucht werden könnten, um einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest in einem unerwünschten Detaillierungsgrad klassifiziert.

Aufgrund dieses Potenzials kann ein Browser beschließen, die zurückgegebenen Werte auf irgendeine Weise zu verstellen, um zu verhindern, dass sie verwendet werden, um einen Computer präzise zu identifizieren. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; zum Beispiel, wenn die Firefox-Einstellung "Fingerprinting verhindern" aktiviert ist, melden viele Media Queries Standardwerte anstelle von Werten, die den tatsächlichen Gerätezustand darstellen.

@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 von Merkmalen, die einen Bereich akzeptieren, wie in den nachstehenden Beispielen gezeigt:

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

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

Für weitere Beispiele lesen Sie bitte Using media queries.

• CSS media queries Modul
• Using media queries
• CSSMediaRule Schnittstelle
• Erweiterte Mozilla Medienmerkmale
• Erweiterte WebKit Medienmerkmale