编辑这个页面须要登录或更高权限！

Window matchMedia() 方法

JavaScript Window 对象

matchMedia()方法返回一个新的MediaQueryList对象，该对象表示指定媒体查询字符串的解析结果。

matchMedia()方法的值可以是CSS @media规则的任何媒体功能，例如min-height，min-width，orientation等。

语法：

window.matchMedia(mediaQueryString)
if (window.matchMedia("(min-width: 500px)").matches) {
   /* 视口viewport最小为500像素宽 */
} else {
   /* 视口viewport宽度小于500像素 */
}
测试看看‹/›

浏览器兼容性

表格中的数字指定了完全支持matchMedia()方法的第一个浏览器版本：

方法
matchMedia()9612.15.110

参数值

参数描述
mediaQueryString一个字符串，表示要为其返回新的MediaQueryList对象的媒体查询

技术细节

返回值：一个MediaQueryList对象，表示指定CSS媒体查询字符串的结果

更多实例

如果视口宽度小于或等于600像素，则背景色为珊瑚色。如果大于600，它将变为浅绿色：

var size = window.matchMedia("(max-width: 600px)")
myFunc(size) // 在运行时调用监听器函数
size.addListener(myFunc) // 在状态更改时附加监听器函数

function myFunc(size) {
  if (size.matches) {
 document.body.style.backgroundColor = "coral";
  } else {
 document.body.style.backgroundColor = "lightgreen";
  }
}
测试看看‹/›

相关参考

CSS教程：CSS媒体查询

JavaScript Window 对象

JS Storage 对象JavaScript Window 对象