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 对象