MediaQueryListEvent

MediaQueryListEvent 对象存储有关 MediaQueryList 对象发生的变化的信息 - 实例作为事件对象在 change 事件引用的函数上可用。

Event MediaQueryListEvent

构造函数

MediaQueryListEvent()

创建一个新的 MediaQueryListEvent 实例。

实例属性

MediaQueryListEvent 接口继承自其父接口 Event 的属性。

MediaQueryListEvent.matches 只读

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

MediaQueryListEvent.media 只读

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

实例方法

MediaQueryListEvent 接口继承自其父接口 Event 的方法。

示例

js
const para = document.querySelector("p"); // This is the UI element where to display the text
const mql = window.matchMedia("(max-width: 600px)");

mql.addEventListener("change", (event) => {
  if (event.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";
  }
});

规范

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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅