@media

Die @media At-Regel kann auf der höchsten Ebene Ihres Codes oder innerhalb einer anderen bedingten Gruppen-At-Regel geschachtelt 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 über die Syntax von Media Queries siehe Using media queries.

Eine <media-query-list> einer Media Query enthält <media-type>s, <media-feature>s und logische Operatoren.

Ein <media-type> beschreibt die allgemeine Kategorie eines Geräts. Außer wenn der only logische Operator verwendet wird, ist der Medientyp optional und der Typ all wird impliziert.

all

Geeignet für alle Geräte.

print

Vorgesehen für paginiertes Material und Dokumente, die auf einem Bildschirm im Druckvorschau-Modus angezeigt werden. (Bitte schauen Sie bei paged media nach, um Informationen zu formatbezogenen Fragen zu erhalten, die spezifisch für diese Formate sind.)

screen

Hauptsächlich für Bildschirme vorgesehen.

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

any-hover

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

any-pointer

Ist irgendein verfügbares Eingabegerät ein Zeigegerät, und wenn ja, wie genau 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 nicht farbig ist.

color-gamut

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

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. In Media Queries Level 4 veraltet.

device-height

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

device-posture

Erkennt die aktuelle Haltung des Geräts, das heißt, ob der Viewport flach oder gefaltet ist. Definiert in der Device Posture API.

device-width

Breite der Rendering-Oberflä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. Hinzugefügt in Media Queries Level 5.

dynamic-range

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

height

Höhe des Viewports.

hover

Erlaubt das primäre Eingabegerät dem Benutzer, ü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 Monochrom-Framebuffer des Ausgabegeräts oder null, wenn das Gerät nicht monochrom ist.

orientation

Ausrichtung des Viewports.

overflow-block

Wie handhabt das Ausgabegerät Inhalte, die den Viewport entlang der Blockachse überlaufen?

overflow-inline

Können Inhalte, die den Viewport entlang der Inline-Achse überlaufen, gescrollt werden?

pointer

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

prefers-color-scheme

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

prefers-contrast

Erkennt, ob der Benutzer das System dazu aufgefordert hat, die Menge des Kontrasts zwischen benachbarten Farben zu erhöhen oder zu verringern. Hinzugefügt in Media Queries Level 5.

prefers-reduced-data

Erkennt, ob der Benutzer Inhalte gewünscht hat, die weniger Internet-Traffic verbrauchen.

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 auf seinem Gerät eine Einstellung aktiviert hat, um die transparenten oder durchsichtigen Schichteffekte des Geräts 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, um rechteckige und runde Displays zu unterscheiden.

update

Wie häufig kann das Ausgabegerät das Erscheinungsbild des Inhalts ändern.

video-dynamic-range

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

width

Breite des Viewports einschließlich der Breite des Scrollbalkens.

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 Kommas trennen.

and

Wird verwendet, um mehrere Medienmerkmale zu einer einzigen Media Query zu kombinieren, wobei 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, wobei true zurückgegeben wird, wenn die Abfrage andernfalls false zurückgeben würde. Wenn es in einer kommagetrennten Liste von Abfragen vorhanden ist, negiert es nur die spezifische Abfrage, auf die es angewendet wird.

Hinweis: In Level 3 kann das not-Schlüsselwort nicht verwendet werden, um einen einzelnen Media-Feature-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. Ohne only 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 angeben.

, (Komma)

Kommas werden verwendet, um mehrere Media Queries zu einer einzigen Regel zu kombinieren. Jede Abfrage in einer kommagetrennten Liste wird separat von den anderen behandelt. Wenn also 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 für die spezielle Medienenanforderung vorab 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 bestmöglich entgegenzukommen, die die Textgröße einer Website anpassen, 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-User-Agent-Client-Hinweise, 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 an Animation oder Bewegung basierend auf den Benutzer-Präferenzen zu minimieren.

Da Media Queries Einblicke in die Fähigkeiten - und in der Folge die Merkmale und das Design - des Geräts bieten, mit dem der Benutzer arbeitet, besteht die Möglichkeit, dass sie dazu verwendet werden können, einen "Fingerprint" zu erstellen, der das Gerät identifiziert oder es zumindest in einem Detailgrad kategorisiert, der für Benutzer unerwünscht sein könnte.

Aufgrund dieses Potentials kann ein Browser sich dafür entscheiden, die zurückgegebenen Werte in irgendeiner Weise zu verfälschen, um zu verhindern, dass sie zur genauen Identifikation eines Computers verwendet werden. Ein Browser könnte auch zusätzliche Maßnahmen in diesem Bereich anbieten; beispielsweise, wenn die "Resist Fingerprinting"-Einstellung von Firefox aktiviert ist, geben viele Media Queries Standardwerte anstelle von Werten zurück, 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 Bereichssyntax erlaubt weniger ausführliche Media Queries beim Testen auf beliebige Merkmale, die einen Bereich akzeptieren, 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 Using media queries.

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