MediaQueryList

实例属性

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

matches 只读

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

media 只读

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

实例方法

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

addListener() 已弃用

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

removeListener() 已弃用

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

事件

以下事件会传递给 MediaQueryList 对象：

change

当媒体查询针对文档的运行结果发生变化时，会发送给 MediaQueryList。例如，如果媒体查询是 (width >= 400px)，那么当文档 视口的宽度变化，并跨过 400px 边界（无论向哪个方向）时，都会触发 change 事件。

示例

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

const para = document.querySelector("p");
const mql = window.matchMedia("(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);

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

规范

浏览器兼容性

另见

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