@media

Die @media At-Regel kann auf der obersten Ebene Ihres Codes oder verschachtelt innerhalb jeder anderen bedingten Gruppen-At-Regel platziert 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 zur Syntax von Media Queries, siehe bitte Verwendung von Media Queries.

Eine Media Query's <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 all-Typ wird impliziert.

all

Geeignet für alle Geräte.

print

Bestimmt für gedrucktes Material und Dokumente, die im Druckvorschau-Modus auf einem Bildschirm angezeigt werden. (Bitte informieren Sie sich über Seitenmedien für Informationen zu Formatierungsproblemen, die spezifisch für diese Formate sind.)

screen

Hauptsächlich für Bildschirme gedacht.

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

any-hover

Ermöglicht ein verfügbares Eingabegerät dem Benutzer, über Elemente zu schweben?

any-pointer

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

aspect-ratio

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

color

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

color-gamut

Ungefähre Reichweite der Farben, die vom User Agent und dem 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

Breite-zu-Höhe-Seitenverhältnis des Ausgabegeräts. Veraltet in Media Queries Level 4.

device-height

Höhe der Rendering-Oberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.

device-posture

Ermittelt die aktuelle Haltung des Geräts, das heißt, ob das Sichtfenster in einem flachen oder gefalteten Zustand ist. Definiert in der Device Posture API.

device-width

Breite der Rendering-Oberfläche des Ausgabegeräts. Veraltet in Media Queries Level 4.

display-mode

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

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 Sichtfensters.

hover

Ermöglicht der primäre Eingabemechanismus dem Benutzer, über Elemente zu schweben?

inverted-colors

Wird die Farbe vom User Agent oder dem zugrundeliegenden Betriebssystem umgekehrt? Hinzugefügt in Media Queries Level 5.

monochrome

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

orientation

Orientierung des Sichtfensters.

overflow-block

Wie behandelt das Ausgabegerät Inhalte, die das Sichtfenster entlang der Blockachse überlaufen?

overflow-inline

Kann über das Sichtfenster überlaufender Inhalt entlang der Inline-Achse gescrollt werden?

pointer

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

prefers-color-scheme

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

prefers-contrast

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

prefers-reduced-data

Ermittelt, ob der Benutzer Webinhalte angefordert hat, die weniger Internetverkehr verbrauchen.

prefers-reduced-motion

Der Benutzer bevorzugt weniger Bewegungen auf der Seite. Hinzugefügt in Media Queries Level 5.

prefers-reduced-transparency

Ermittelt, ob ein Benutzer auf ihrem Gerät eine Einstellung aktiviert hat, um die auf dem Gerät verwendeten transparenten oder durchscheinenden Schichteffekte zu reduzieren.

resolution

Pixeldichte des Ausgabegeräts.

scan

Ob die Anzeigeausgabe progressiv oder interlaced ist.

scripting

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

shape

Erkennt die Form des Geräts, um rechteckige und runde Anzeigen zu unterscheiden.

update

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

video-dynamic-range

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

width

Breite des Sichtfensters einschließlich Breite der Bildlaufleiste.

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 zu einer einzigen Regel kombinieren, indem Sie sie mit Kommata trennen.

and

Wird verwendet, um mehrere Merkmale zu einer einzigen Media Query zu kombinieren und erfordert, dass jedes verkettete Merkmal true zurückgibt, damit die Abfrage true ist. Es wird auch verwendet, um Merkmale mit Medientypen zu verbinden.

not

Wird verwendet, um eine Media Query zu negieren, die true zurückgibt, wenn die Abfrage andernfalls 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 angewandt 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 dann an, wenn eine gesamte Abfrage übereinstimmt. Dies 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 allen Bildschirmen anwenden. Wenn Sie den only-Operator verwenden, müssen Sie auch einen Medientyp spezifizieren.

, (Komma)

Kommata werden verwendet, um mehrere Media Queries in einer einzigen Regel zu kombinieren. Jede Abfrage in einer durch Kommas getrennten Liste wird separat von den anderen behandelt. Folglich, wenn 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. Hinzugefügt in Media Queries Level 4.

Einige Media Queries haben entsprechende User Agent Client-Hinweise. Dies sind HTTP-Header, die Inhalte anfordern, die vorab für die jeweilige Medienanforderung optimiert sind. Dazu gehören Sec-CH-Prefers-Color-Scheme und Sec-CH-Prefers-Reduced-Motion.

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

Um Menschen, die die Textgröße einer Website anpassen, am besten entgegenzukommen, verwenden Sie em, 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 zur Verbesserung der Benutzererfahrung. Zum Beispiel kann die Media Query prefers-reduced-motion oder der äquivalente HTTP-Header Sec-CH-Prefers-Reduced-Motion verwendet werden, um die Menge an Animation oder Bewegung basierend auf den Benutzerpräferenzen zu minimieren.

Da Media Queries Einblicke in die Fähigkeiten – und somit die Merkmale und das Design – des Geräts geben, mit dem der Benutzer arbeitet, besteht die Möglichkeit, dass sie missbraucht werden könnten, um einen "Fingerabdruck" zu erstellen, der das Gerät identifiziert oder es zumindest bis zu einem gewissen Detaillierungsgrad kategorisiert, der für die Benutzer möglicherweise unerwünscht ist.

Aufgrund dieses Potenzials kann ein Browser beschließen, die zurückgegebenen Werte in irgendeiner Weise zu verändern, um zu verhindern, dass sie zur präzisen Identifizierung eines Computers verwendet werden. Ein Browser könnte auch weitere Maßnahmen in diesem Bereich ergreifen; zum Beispiel, wenn in Firefox die Einstellung "Fingerabdruckschutz aktivieren" aktiviert ist, geben viele Media Queries Standardwerte zurück, anstatt Werte, die den tatsächlichen Gerätezustand repräsentieren.

@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 Reichweitensyntax ermöglicht weniger ausführliche Media Queries, wenn für jedes Merkmal, das einen Bereich akzeptiert, getestet wird, 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 Verwendung von Media Queries.

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