语法
在诸如 addEventListener() 之类的方法中使用事件名称，或设置事件处理程序属性。
js
addEventListener("change", (event) => { })
onchange = (event) => { }
事件类型
一个 MediaQueryListEvent 对象。继承自 Event。
事件属性
MediaQueryListEvent 接口继承自其父接口 Event 的属性。
MediaQueryListEvent.matches只读-
一个布尔值，如果
document当前匹配媒体查询列表，则为true，否则为false。 MediaQueryListEvent.media只读-
一个表示序列化媒体查询的字符串。
示例
js
const mql = window.matchMedia("(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 |
浏览器兼容性
加载中…