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 desmedia-Elements definieren sie das Medium, auf das eine verlinkte Ressource (typischerweise CSS) angewendet werden soll. - Im
<source>-Attribut desmedia-Elements definieren sie die Medien, auf die diese Quelle angewendet werden soll. (Dies ist nur innerhalb von<bild>-Elementen gültig.) - Im
<style>-Attribut des Elementsmediadefinieren sie die Medien, auf die der Stil angewendet werden soll.
Media Queries in JavaScript
In JavaScript können Sie die Methode Window.matchMedia() verwenden, um das Fenster gegen eine Medienabfrage zu testen. Sie können auch MediaQueryList.addListener() 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.
@-Regeln
Anleitung
- Media Queries verwenden
- 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
- 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
- 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, um Stile anzuwenden, die von der Browserunterstützung für verschiedene CSS-Technologien abhängen.