MediaQueryList: matches 属性

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

MediaQueryList 接口的 **matches** 只读属性是一个布尔值,如果 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

浏览器兼容性

另见