MediaQueryList - 存储了应用于文档的媒体查询的信息

MediaQueryList 对象存储了应用于文档的媒体查询的信息，支持实时和事件驱动来匹配文档的状态。您可以通过在 window 对象上调用 matchMedia() 来创建 MediaQueryList。当媒体查询状态改变时（即，当媒体查询测试开始或停止评估为 true 时），结果对象处理向监听器发送通知。

这对于自适应设计非常有用，因为这样可以观察文档以检测其媒体查询何时发生更改，而不是定期轮询值，并允许您以编程方式根据媒体查询状态对文档进行更改。

属性

新版本的 MediaQueryList 接口继承了其父接口 EventTarget 的属性。

MediaQueryList.matches 只读

一个 Boolean，如果 document 当前与媒体查询列表匹配，则返回 true，否则返回 false。

MediaQueryList.media 只读

一个DOMString，表示序列化的媒体查询。

方法

新版本的 MediaQueryList 接口继承了其父接口 EventTarget 的方法。

MediaQueryList.addListener()

向 MediaQueryListener 添加一个监听器，该监听器将运行自定义回调函数以响应媒体查询状态的变化。这基本上是 EventTarget.addEventListener() 的别名，用于向后兼容。

MediaQueryList.removeListener()

从 MediaQueryListener 中删除一个监听器。这基本上是 EventTarget.removeEventListener() 的别名，用于向后兼容。

事件

以下事件被传递到 MediaQueryList 对象：

change

当针对文档运行媒体查询的结果发生更改时，发送到 MediaQueryList。例如，如果媒体查询是 (min-width: 400px)，则只要文档的 viewport 的宽度变为小于或大于 400 像素，就会触发 change 事件。也可以使用 onchange 事件处理程序属性来处理。

实例

这个简单的例子创建了一个 MediaQueryList ，然后设置一个监听器来检测媒体查询状态何时发生变化，当它改变页面的外观时运行自定义函数。

var para = document.querySelector('p');

var mql = window.matchMedia('(max-width: 600px)');

function screenTest(e) {
  if (e.matches) {
    /* 视口宽度为 600 像素或更小 */
    para.textContent = '这是一个窄屏幕 - 宽度不到 600px。';
    document.body.style.backgroundColor = 'red';
  } else {
    /* 视口宽度超过 600 像素 */
    para.textContent = '这是一个宽屏 - 超过 600px 宽。';
    document.body.style.backgroundColor = 'blue';
  }
}

mql.addListener(screenTest);

注意：你可以在 GitHub 上找到这个例子（参见源代码，也可以看到它的在线实例）。

您可以在单个属性和方法页面上找到其他实例。

规范

规范	状态	备注
CSS Object Model (CSSOM) View Module MediaQueryList 的定义	工作草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 媒体查询
• 使用代码中的媒体查询
• window.matchMedia()
• MediaQueryListListener
• MediaQueryListEvent
• Window.devicePixelRatio 的文章也有一个有用的例子