Window matchMedia() Methode
- Vorherige Seite location
- Nächste Seite moveBy()
- Zurück zur vorherigen Ebene Window-Objekt
Definition und Verwendung
matchMedia()
Die Methode gibt einen MediaQueryList mit den Abfrageergebnissen zurück.
Siehe auch:
Medienabfrage
Die Medienabfrage der matchMedia()-Methode kann jede Medienmerkmal der CSS @media-Regel sein, z.B. min-height, min-width, orientation usw.
Beispiel
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
Beispiel
Beispiel 1
Ist der Bildschirm-/Viewportbreite größer als 700 Pixel?
if (window.matchMedia("(max-width: 700px)").matches) { //Viewportbreite 700 Pixel oder weniger } else { //Viewportbreite größer als 700 Pixel }
Beispiel Erklärung
Dieses Beispiel führt die mediaQuery aus und vergleicht sie mit dem aktuellen Fensterszustand.
Fügen Sie einen Ereignisbeobachter zum MediaQueryList-Objekt hinzu, um auf Änderungen des Fensterszustands zu reagieren (siehe unten "Mehr Beispiele"):
Beispiel 2
Wenn derViewportbreite 500 Pixel oder weniger beträgt, setzen Sie die Hintergrundfarbe auf gelb, andernfalls auf rosa:
// Erstellen Sie eine match-Funktion function myFunction(x) { if (x.matches) { document.body.style.backgroundColor = "yellow"; } else { document.body.style.backgroundColor = "pink"; } } // // Erstellen Sie ein MediaQueryList-Objekt const mmObj = window.matchMedia("(max-width: 700px)"); // Rufen Sie die match-Funktion bei der Laufzeit auf: myFunction(mmObj); // Fügen Sie eine match-Funktion als Zustandsänderungs-Beobachter hinzu: mmObj.addListener(myFunction);
Syntax
window.matchMedia("mediaQuery)
Parameter
Parameter | Beschreibung |
---|---|
mediaQuery | Erforderlich. Eine Zeichenkette, die die Medienabfrage darstellt. |
Rückgabewert
Typ | Beschreibung |
---|---|
Objekt | Mit dem MediaQueryList-Objekt mit den Ergebnissen der Medienabfrage. |
Browserunterstützung
Alle Browser unterstützen dies matchMedia()
:
Chrome | IE | Edge | Firefox | Safari | Opera |
---|---|---|---|---|---|
Chrome | IE | Edge | Firefox | Safari | Opera |
Unterstützung | 11 | Unterstützung | Unterstützung | Unterstützung | Unterstützung |
- Vorherige Seite location
- Nächste Seite moveBy()
- Zurück zur vorherigen Ebene Window-Objekt