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 的定义	工作草案	初始定义

桌面浏览器兼容性

移动浏览器兼容性

相关链接

• 媒体查询
• 使用代码中的媒体查询
• window.matchMedia()
• MediaQueryList
• MediaQueryListListener