Baseline Widely available
Ein MediaQueryList-Objekt speichert Informationen zu einer Media Query, die auf ein Dokument angewendet wird, mit Unterstützung sowohl für sofortige als auch ereignisgesteuerte Ãbereinstimmung mit dem Status des Dokuments.
Sie können eine MediaQueryList erstellen, indem Sie matchMedia() auf dem window-Objekt aufrufen. Das resultierende Objekt verwaltet das Senden von Benachrichtigungen an Listener, wenn sich der Status der Media Query ändert (d.h. wenn der Test der Media Query beginnt oder aufhört, true zu evaluieren).
Dies ist sehr nützlich für adaptives Design, da es ermöglicht, ein Dokument zu beobachten, um zu erkennen, wann sich seine Media Queries ändern, anstatt die Werte periodisch abzufragen, und ermöglicht es Ihnen, programmatisch Ãnderungen an einem Dokument basierend auf dem Media Query-Status vorzunehmen.
EventTarget MediaQueryList Instanz-EigenschaftenDie MediaQueryList-Schnittstelle erbt Eigenschaften von ihrer Eltern-Schnittstelle, EventTarget.
matches Schreibgeschützt
Ein boolescher Wert, der true zurückgibt, wenn das document derzeit den Media Query-Listen entspricht, oder false, wenn nicht.
media Schreibgeschützt
Ein String, der eine serialisierte Media Query darstellt.
Die MediaQueryList-Schnittstelle erbt Methoden von ihrer Eltern-Schnittstelle, EventTarget.
addListener() Veraltet
Fügt der MediaQueryList eine Callback-Funktion hinzu, die aufgerufen wird, wann immer sich der Status der Media Query ändert â ob das Dokument den Media Queries in der Liste entspricht oder nicht. Diese Methode existiert hauptsächlich aus Kompatibilitätsgründen; nach Möglichkeit sollten Sie stattdessen addEventListener() verwenden, um das change Ereignis zu überwachen.
removeListener() Veraltet
Entfernt den angegebenen Listener-Callback aus den Rückrufen, die aufgerufen werden, wenn sich der Media Query-Status der MediaQueryList ändert, was passiert, wenn das Dokument zwischen der Ãbereinstimmung und der Nicht-Ãbereinstimmung mit den in der MediaQueryList aufgeführten Media Queries wechselt. Diese Methode wurde aus Gründen der Rückwärtskompatibilität beibehalten; nach Möglichkeit sollten Sie im Allgemeinen removeEventListener() verwenden, um Ãnderungsbenachrichtigungs-Callbacks zu entfernen (die zuvor mit addEventListener() hinzugefügt worden sein sollten).
Die folgenden Ereignisse werden an MediaQueryList-Objekte übermittelt:
change
Wird an die MediaQueryList gesendet, wenn sich das Ergebnis der Ausführung der Media Query gegen das Dokument ändert. Wenn zum Beispiel die Media Query (width >= 400px) lautet, wird das change-Ereignis jedes Mal ausgelöst, wenn sich die Breite des Ansichtsfensters des Dokuments ändert, sodass seine Breite über die 400px-Grenze in beide Richtungen überschreitet.
Dieses Beispiel erstellt eine MediaQueryList und richtet dann einen Listener ein, um zu erkennen, wann sich der Status der Media Query ändert, und führt bei Ãnderung eine benutzerdefinierte Funktion aus, um das Erscheinungsbild der Seite zu ändern.
const para = document.querySelector("p");
const mql = window.matchMedia("(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 sehen Sie es auch live laufen).
Sie können weitere Beispiele auf den einzelnen Seiten zu Eigenschaften und Methoden finden.
Spezifikationen Browser-Kompatibilität Siehe auchRetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4