JavaScript HTML DOM Window matchMedia() 方法

Window matchMedia() 方法

matchMedia()方法返回一个MediaQueryList对象，表示指定的CSS媒体查询字符串的结果。matchMedia()方法的值可以是CSS @media规则的任何媒体特征，如min-height，min-width，orientation等。所述MediaQueryList对象具有两个属性和两个方法：

属性	描述
matches	用于检查查询的结果。返回一个布尔值：如果文档与媒体查询列表匹配，则返回true，否则返回false
media	一个字符串，表示序列化媒体查询列表

此页面下面的第一个示例仅运行指定的CSS媒体查询，并将其与当前窗口状态进行一次比较。要以响应方式使用window.matchMedia()，只要窗口状态发生变化，您的代码就会对CSS媒体查询做出反应，您可以使用其方法/事件处理程序（请参阅下面的“更多示例”）：

方法	描述
addListener(functionref)	添加新的侦听器函数，只要媒体查询的评估结果发生更改，就会执行该函数
removeListener(functionref)	从媒体查询列表中删除以前添加的侦听器功能。如果指定的侦听器不在列表中，则不执行任何操作

找出屏幕/视口是否小于或大于700像素宽：

if (window.matchMedia("(max-width: 700px)").matches) {
  /* The viewport is less than, or equal to, 700 pixels wide */
} else {
  /* The viewport is greater than 700 pixels wide */
}

尝试一下

浏览器支持

项	IE/Edge	Chrome	FireFox	Safari	Opera
方法
matchMedia()	10.0+	9.0+	6.0+	5.1+	12.1+

语法

window.matchMedia(mediaQueryString)

参数值

值	类型	描述
mediaQueryString	String	需要。一个字符串，表示要为其返回新MediaQueryList对象的媒体查询

技术细节

项目	描述
返回值：	MediaQueryList对象，表示指定的CSS媒体查询字符串的结果。

更多例子

如果视口小于或等于700像素宽，请将背景颜色更改为黄色。如果大于700，请将其更改为粉红色

function myFunction(x) {
  if (x.matches) { // If media query matches
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

var x = window.matchMedia("(min-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

尝试一下