Window matchMedia() Methode

JavaScript Window Object

matchMedia()Die Methode gibt ein neues MediaQueryList-Objekt zurück, das das Parsing-Ergebnis der angegebenen Medienabfragezeichenkette darstellt.

Der Wert der Methode matchMedia() kann seinCSS @media-RegelnJegliche Medienfunktion, z.B. min-Höhe, min-Breite, Ausrichtung usw.

Syntax:

window.matchMedia(mediaQueryString)

if (window.matchMedia("(min-width:　500px)").matches) {
　　　/*　Der Viewport viewport ist mindestens500 Pixel breit　*/
}
　　　/*　Die Breite des Viewports viewport ist kleiner als500 Pixel　*/
}

Browser- Kompatibilität

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Methode matchMedia() vollständig unterstützt:

Parameterwert

Technische Details

More Examples

If the viewport width is less than or equal to600 pixels, the background color will be coral. If greater than600, it will become light green:

var size = window.matchMedia("(max-width:　600px)")
myFunc(size)　//　Call listener function at runtime
size.addListener(myFunc)　//　Attach listener function when the state changes
function myFunc(size) {
　　if (size.matches) {
　document.body.style.backgroundColor = "coral";
　　}
　document.body.style.backgroundColor = "lightgreen";
　　}
}

Related References

CSS Tutorial:CSS Media Queries

JavaScript Window Object