MediaQueryListEvent - 存储有关 MediaQueryList 对象发生的更改的信息
MediaQueryListEvent
对象存储有关 MediaQueryList
对象发生的更改的信息 - 实例可用作 MediaQueryList.onchange
属性或 MediaQueryList.addListener()
调用引用的函数上的事件对象。
构造函数
MediaQueryListEvent()
创建一个新的 MediaQueryListEvent
实例。
属性
MediaQueryListEvent
接口从它的父接口 Event
继承了属性。
MediaQueryListEvent.matches
只读
一个 Boolean
,如果 document
匹配当前的媒体查询,则返回 true
,否则为 false
。如果 document
当前与媒体查询列表匹配,则返回 “true” 的Boolean
,否则返回“false”。
MediaQueryListEvent.media
只读
一个 DOMString
,表示序列化的媒体查询。
方法
MediaQueryListEvent
接口从它的父接口 Event
继承了方法。
实例
var mql = window.matchMedia('(max-width: 600px)');
function screenTest(e) {
if (e.matches) {
/* 视口宽度为 600 像素或更小 */
para.textContent = '这是一个窄屏幕 - 宽度不到 600px。';
document.body.style.backgroundColor = 'red';
} else {
/* 视口宽度超过 600 像素 */
para.textContent = '这是一个宽屏 - 超过 600px 宽。';
document.body.style.backgroundColor = 'blue';
}
}
mql.addListener(screenTest);
规范
规范 | 状态 | 备注 |
---|---|---|
CSS Object Model (CSSOM) View Module MediaQueryListEvent 的定义 |
工作草案 | 初始定义 |
桌面浏览器兼容性
特性 | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
基础支持 | 支持 | 未知 | 55 | 不支持 | 支持 | 未知 |
MediaQueryListEvent() constructor | 支持 | 未知 | 55 | 不支持 | 支持 | 未知 |
matches | 支持 | 未知 | 55 | 不支持 | 支持 | 未知 |
media | 支持 | 未知 | 55 | 不支持 | 支持 | 未知 |
移动浏览器兼容性
特性 | Android | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
基础支持 | 不支持 | 支持 | 未知 | 55 | 未知 | 支持 | 未知 |
MediaQueryListEvent() constructor | 不支持 | 支持 | 未知 | 55 | 未知 | 支持 | 未知 |
matches | 不支持 | 支持 | 未知 | 55 | 未知 | 支持 | 未知 |
media | 不支持 | 支持 | 未知 | 55 | 未知 | 支持 | 未知 |