MediaQueryList.matches

MediaQueryList 接口的 matches 只读属性是一个布尔值，如果 document 当前匹配媒体查询列表，该属性返回 true，否则返回 false。

通过侦听发生在 MediaQueryList 的 change 事件，当 matches 的值发生变化时，你可以收到通知。

值

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

示例

该示例通过使用 orientation 媒体查询特性来创建一个媒体查询，以检测视口横纵方向的变化：

js
function addMQListener(mq, callback) {
  if (mq.addEventListener) {
    mq.addEventListener("change", callback);
  } else {
    mq.addListener(callback);
  }
}

addMQListener(window.matchMedia("(orientation:landscape)"), (event) => {
  if (event.matches) {
    /* 现在是横向 */
  } else {
    /* 现在是纵向 */
  }
});

规范

Specification
CSSOM View Module
# dom-mediaquerylist-matches

浏览器兼容性

BCD tables only load in the browser

参见