MediaQueryListEvent

MediaQueryListEvent 对象存储着发生在 MediaQueryList 对象上的变化的信息——作为一个在函数中被 change 事件引用的事件对象。

Event MediaQueryListEvent

构造函数

MediaQueryListEvent()

创建一个新的 MediaQueryListEvent 实例。

属性

MediaQueryListEvent 接口的属性继承自它的父接口，Event。

MediaQueryListEvent.matches (en-US) 只读

一个布尔值，如果 document 目前匹配媒体查询列表，该值为 true ，反之为 false。

MediaQueryListEvent.media (en-US) 只读

一个字符串，代表着一个序列化后的媒体查询。

方法

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

参见