MediaQueryList
Ein MediaQueryList
-Objekt speichert Informationen über eine Media Query, die auf ein Dokument angewendet wird, mit Unterstützung für sowohl unmittelbare als auch ereignisgesteuerte Übereinstimmung mit dem Zustand des Dokuments.
Sie können ein MediaQueryList
-Objekt erstellen, indem Sie matchMedia()
am window
-Objekt aufrufen. Das resultierende Objekt kümmert sich um das Senden von Benachrichtigungen an Listener, wenn sich der Status der Media Query ändert (d.h. wenn der Test der Media Query zu true
beginnt oder aufhört zu evaluieren).
Dies ist sehr nützlich für adaptives Design, da es möglich macht, ein Dokument zu beobachten, um zu erkennen, wann sich seine Media Queries ändern, anstatt die Werte periodisch abzufragen, und da es Ihnen ermöglicht, programmgesteuert Änderungen an einem Dokument basierend auf dem Status der Media Query vorzunehmen.
Instanz-Eigenschaften
Die MediaQueryList
-Schnittstelle erbt Eigenschaften von ihrer übergeordneten Schnittstelle, EventTarget
.
Instanz-Methoden
Die MediaQueryList
-Schnittstelle erbt Methoden von ihrer übergeordneten Schnittstelle, EventTarget
.
addListener()
Veraltet-
Fügt der
MediaQueryList
einen Rückruf hinzu, der aufgerufen wird, wann immer sich der Media Query Status—ob das Dokument den Media Queries in der Liste entspricht oder nicht—ändert. Diese Methode existiert hauptsächlich für die Abwärtskompatibilität; wenn möglich, sollten Sie stattdessenaddEventListener()
verwenden, um auf daschange
-Ereignis zu reagieren. removeListener()
Veraltet-
Entfernt den angegebenen Listener-Rückruf aus den Rückrufen, die aufgerufen werden, wenn die
MediaQueryList
den Media Query Status ändert, was passiert, sobald das Dokument zwischen dem Entsprechen und Nicht-Entsprechen der in derMediaQueryList
aufgeführten Media Queries wechselt. Diese Methode wurde für die Abwärtskompatibilität beibehalten; wo möglich, sollten Sie im AllgemeinenremoveEventListener()
verwenden, um Änderungs-Benachrichtigungsrückrufe zu entfernen (die zuvor mitaddEventListener()
hinzugefügt wurden).
Ereignisse
Die folgenden Ereignisse werden an MediaQueryList
-Objekte gesendet:
change
-
Wird an die
MediaQueryList
gesendet, wenn sich das Ergebnis der Überprüfung der Media Query gegen das Dokument ändert. Wenn beispielsweise die Media Query(min-width: 400px)
ist, wird daschange
-Ereignis jede Mal ausgelöst, wenn sich die Breite des Viewports des Dokuments so ändert, dass sich seine Breite über die 400px-Grenze in beide Richtungen bewegt.
Beispiele
Dieses einfache Beispiel erstellt eine MediaQueryList
und richtet dann einen Listener ein, um zu erkennen, wenn sich der Media Query Status ändert, und führt eine benutzerdefinierte Funktion aus, um das Erscheinungsbild der Seite zu ändern.
const para = document.querySelector("p");
const mql = window.matchMedia("(max-width: 600px)");
function screenTest(e) {
if (e.matches) {
/* the viewport is 600 pixels wide or less */
para.textContent = "This is a narrow screen — less than 600px wide.";
document.body.style.backgroundColor = "red";
} else {
/* the viewport is more than 600 pixels wide */
para.textContent = "This is a wide screen — more than 600px wide.";
document.body.style.backgroundColor = "blue";
}
}
mql.addEventListener("change", screenTest);
Hinweis: Sie können dieses Beispiel auf GitHub finden (siehe den Quellcode, und auch live ausführen).
Weitere Beispiele finden Sie auf den einzelnen Seiten der Eigenschaften und Methoden.
Spezifikationen
Specification |
---|
CSSOM View Module # the-mediaquerylist-interface |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Media Queries
- Verwendung von Media Queries aus Code
window.matchMedia()
MediaQueryListEvent
- Der Artikel
Window.devicePixelRatio
enthält ebenfalls ein nützliches Beispiel.