MediaQueryList：change 事件

当媒体查询支持状态发生变化时，MediaQueryList 接口的change 事件会被触发。

语法

在诸如 addEventListener() 的方法中使用事件名称，或设置事件处理程序属性。

js
addEventListener("change", (event) => {});

onchange = (event) => {};

事件类型

一个 MediaQueryListEvent。继承自 Event。

Event MediaQueryListEvent

事件属性

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

MediaQueryListEvent.matches 只读

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

MediaQueryListEvent.media 只读

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

示例

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

mql.onchange = (e) => {
  if (e.matches) {
    /* the viewport is 600 pixels wide or less */
    console.log("This is a narrow screen — less than 600px wide.");
  } else {
    /* the viewport is more than 600 pixels wide */
    console.log("This is a wide screen — more than 600px wide.");
  }
};

规范

规范
CSSOM 视图模块
# dom-mediaquerylist-onchange

浏览器兼容性

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

另请参阅