MediaQueryList：matches 属性

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

您可以通过监听 MediaQueryList 上触发的 change 事件来获知 matches 值何时发生变化。

值

如果 document 当前匹配媒体查询列表，则为 true；否则为 false。

示例

此示例使用 orientation 媒体特性创建媒体查询，以检测视窗方向变化

js
const mql = window.matchMedia("(orientation:landscape)");
mql.addEventListener("change", (event) => {
  if (event.matches) {
    console.log("Now in landscape orientation");
  } else {
    console.log("Now in portrait orientation");
  }
});

规范

规范
CSSOM 视图模块
# dom-mediaquerylist-matches

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅