MediaQueryList: matches 属性
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 |
浏览器兼容性
加载中…