MediaQueryList: change event
当媒体查询的支持状况改变时，MediaQueryList 接口的 change 事件触发。
语法
在像 addEventListener() 这样的方法中使用该事件的名字，或者设置一个事件处理函数属性。
js
addEventListener("change", (event) => {});
onchange = (event) => {};
事件类型
MediaQueryListEvent 类型。继承自 Event。
事件属性
MediaQueryListEvent 接口的属性继承自它的父接口，Event.
MediaQueryListEvent.matches(en-US) 只读-
一个布尔值，如果
document当前匹配媒体查询列表，该值为true，反之为false。 MediaQueryListEvent.media(en-US) 只读-
一个字符串，代表着一个序列化后的媒体查询。
示例
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