Media Query

Media Queries sind CSS-Techniken, die es ermöglichen, Stildefinitionen an bestimmte Eigenschaften des Ausgabegeräts oder Browserfensters zu knüpfen. Sie sind ein Kernkonzept des responsiven Designs und essentiell für barrierefreie Websites.

Beispiel:

@media screen and (max-width: 768px) { / Anpassungen für mobile Geräte / }

Media Queries können verschiedene Parameter abfragen:

• Bildschirmbreite und -höhe

• Pixeldichte des Displays

• orientation für Geräteausrichtung (Portrait/Landscape)

• screen für Bildschirme, print für Druckansichten

Moderne Media Queries ermöglichen auch die Abfrage von Systemeinstellungen:

• prefers-reduced-motion für reduzierte Animation

• prefers-color-scheme für Hell/Dunkel-Modus

• prefers-contrast für Kontrasteinstellungen

• prefers-reduced-transparency für reduzierte Transparenz

• forced-colors für erzwungene Farbschemata