HTML | 窗口 matchMedia() 方法

简介

matchMedia() 方法是指窗口对象的一个方法，用于检测指定的CSS media查询条件是否为真。

其返回一个 MediaQueryList 对象，该对象包含了表示指定条件是否被匹配的布尔值。

语法

window.matchMedia(media_query);

参数 media_query 是一个 CSS media 查询字符串。

返回值

matchMedia() 方法返回一个 MediaQueryList 对象。

该对象有以下属性：

• matches：一个布尔值，表示查询条件是否为真。
• media：表示查询条件的字符串。

示例

检测视口宽度是否小于等于 600 像素：

var mq = window.matchMedia('(max-width: 600px)');

if (mq.matches) {
  // 视口宽度小于等于 600 像素时的操作
} else {
   // 视口宽度大于 600 像素时的操作
}

兼容性

IE10以上版本、Firefox、Chrome、Safari、Opera 均已支持该方法。

总结

matchMedia() 方法是CSS3引入的一个非常实用的方法，可以检测指定的CSS media查询条件是否为真，其返回一个 MediaQueryList 对象，可用于编写响应式设计和现代浏览器适配的常见场景。