MediaQueryListEvent
MediaQueryListEvent
对象存储着发生在 MediaQueryList
对象上的变化的信息——作为一个在函数中被 change
事件引用的事件对象。
构造函数
MediaQueryListEvent()
-
创建一个新的
MediaQueryListEvent
实例。
属性
MediaQueryListEvent
接口的属性继承自它的父接口,Event
。
MediaQueryListEvent.matches
只读-
一个布尔值,如果
document
目前匹配媒体查询列表,该值为true
,反之为false
。 MediaQueryListEvent.media
只读-
一个字符串,代表着一个序列化后的媒体查询。
方法
MediaQueryListEvent
接口的方法继承自它的父接口,Event
。
示例
js
var mql = window.matchMedia("(max-width: 600px)");
function screenTest(e) {
if (e.matches) {
/* 视口等于或小于 600 像素 */
para.textContent = "This is a narrow screen — less than 600px wide.";
document.body.style.backgroundColor = "red";
} else {
/* 视口大于 600 像素 */
para.textContent = "This is a wide screen — more than 600px wide.";
document.body.style.backgroundColor = "blue";
}
}
mql.addListener(screenTest);
规范
Specification |
---|
CSSOM View Module # the-mediaquerylist-interface |
浏览器兼容性
BCD tables only load in the browser