MediaQueryList

一个 MediaQueryList 对象存储应用于文档的 媒体查询 的信息，支持对文档状态的即时和事件驱动的匹配。

您可以通过在 window 对象上调用 matchMedia() 来创建一个 MediaQueryList。生成的 对象负责在媒体查询状态发生变化时（例如，当媒体查询测试开始或停止评估为 true 时）向监听器发送通知。

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

EventTarget MediaQueryList

实例属性

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

matches 只读

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

media 只读

一个表示序列化媒体查询的字符串。

实例方法

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

addListener()

在 MediaQueryList 中添加一个回调，该回调在媒体查询状态（文档是否匹配列表中的媒体查询）发生变化时调用。此方法主要用于向后兼容；如果可能，您应该改用 addEventListener() 来监视 change 事件。

removeListener()

从在 MediaQueryList 发生媒体查询状态变化时调用的回调中删除指定的监听器回调，这发生在文档在匹配和不匹配 MediaQueryList 中列出的媒体查询之间切换时。此方法已保留用于向后兼容；如果可能，您通常应该使用 removeEventListener() 来删除更改通知回调（这些回调应该之前使用 addEventListener() 添加）。

事件

以下事件将传递给 MediaQueryList 对象

change

当媒体查询针对文档运行的结果发生变化时，会发送到 MediaQueryList。例如，如果媒体查询是 (min-width: 400px)，则每次文档的 视口 宽度发生变化，使其宽度跨越 400 像素边界（无论哪个方向）时，都会触发 change 事件。

示例

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

js
const para = document.querySelector("p");
const mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    para.textContent = "This is a narrow screen — less than 600px wide.";
    document.body.style.backgroundColor = "red";
  } else {
    /* the viewport is more than 600 pixels wide */
    para.textContent = "This is a wide screen — more than 600px wide.";
    document.body.style.backgroundColor = "blue";
  }
}

mql.addEventListener("change", screenTest);

注意： 您可以在 GitHub 上找到此示例（查看 源代码，还可以查看 实时运行）。

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

规范

规范
CSSOM 视图模块
# the-mediaquerylist-interface

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅