Media queries

Referenz

Mit Media Queries können Sie Ihre Website oder App abhängig vom Vorhandensein oder Wert verschiedener Geräteeigenschaften und Parameter anpassen.

Sie sind eine Schlüsselkomponente des responsiven Designs. Eine Media Query kann zum Beispiel die Schriftgröße auf kleinen Geräten verkleinern, den Abstand zwischen Absätzen vergrößern, wenn eine Seite im Hochformat angezeigt wird, oder die Größe von Schaltflächen auf Touchscreens erhöhen.

Verwenden Sie in CSS die @-Regeln @media, um einen Teil eines Stylesheets basierend auf dem Ergebnis einer Media Query bedingt anzuwenden. Verwenden Sie @import, um ein ganzes Stylesheet bedingt anzuwenden.

Media Queries in HTML

In HTML können Media-Queries auf verschiedene Elemente angewendet werden:

Im <link>-Attribut des media-Elements definieren sie das Medium, auf das eine verlinkte Ressource (typischerweise CSS) angewendet werden soll.
Im <source> (en-US)-Attribut des media (en-US)-Elements definieren sie die Medien, auf die diese Quelle angewendet werden soll. (Dies ist nur innerhalb von <bild>-Elementen gültig.)
Im <style> (en-US)-Attribut des Elements media (en-US) definieren sie die Medien, auf die der Stil angewendet werden soll.

Media Queries in JavaScript

In JavaScript können Sie die Methode Window.matchMedia() (en-US) verwenden, um das Fenster gegen eine Medienabfrage zu testen. Sie können auch MediaQueryList.addListener() (en-US) verwenden, um benachrichtigt zu werden, wenn sich der Zustand einer Abfrage ändert. Mit dieser Funktionalität kann Ihre Website oder App auf Änderungen der Gerätekonfiguration, der Ausrichtung oder des Zustands reagieren.

Mehr über die programmatische Verwendung von Media Queries erfahren Sie in Media Queries testen (en-US).

@-Regeln

Anleitung

Media Queries verwenden (en-US): Stellt Media Queries, ihre Syntax und die Operatoren und Media Features vor, die zur Konstruktion von Media Query-Ausdrücken verwendet werden.
Media Queries programmatisch testen (en-US): Beschreibt, wie Sie Media Queries in Ihrem JavaScript-Code verwenden, um den Zustand eines Geräts zu ermitteln und Listener einzurichten, die Ihren Code benachrichtigen, wenn sich die Ergebnisse von Media Queries ändern (z. B. wenn der Benutzer den Bildschirm dreht oder die Größe des Browsers ändert).
Verwendung von Media Queries für Barrierefreiheit (en-US): Erfahren Sie, wie Media Queries dem Benutzer helfen können, Ihre Website besser zu verstehen.

Spezifikationen

Spezifikation	Status	Kommentar
Media Queries Level 5	Bearbeiterentwurf
CSS Conditional Rules Module Level 3	Anwärter Empfehlung
Media Queries Level 4	Anwärter Empfehlung
Media Queries	Empfehlung
CSS Level 2 (Revision 1)	Empfehlung	Ursprüngliche Definition

Siehe auch

Verwenden Sie @supports (en-US), um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.