MediaQueryList: change event

当媒体查询的支持状况改变时，MediaQueryList 接口的 change 事件触发。

语法

在像 addEventListener() 这样的方法中使用该事件的名字，或者设置一个事件处理函数属性。

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

onchange = (event) => {};

事件类型

MediaQueryListEvent 类型。继承自 Event。

Event MediaQueryListEvent

事件属性

MediaQueryListEvent 接口的属性继承自它的父接口，Event.

MediaQueryListEvent.matches 只读

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

MediaQueryListEvent.media 只读

一个字符串，代表着一个序列化后的媒体查询。

示例

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

mql.onchange = (e) => {
  if (e.matches) {
    /* 视口等于或小于 600 像素 */
    console.log("This is a narrow screen — less than 600px wide.");
  } else {
    /* 视口大于 600 像素 */
    console.log("This is a wide screen — more than 600px wide.");
  }
};

规范

Specification
CSSOM View Module
# dom-mediaquerylist-onchange

浏览器兼容性

BCD tables only load in the browser

参见