Window matchMedia() 方法

定义和用法

matchMedia() 方法返回带有查询结果的 MediaQueryList。

另请参阅：

MediaQueryList 对象

媒体查询

matchMedia() 方法的媒体查询可以是 CSS @media 规则的任何媒体特性，例如 min-height、min-width、orientation 等。

实例

matchMedia("(max-height: 480px)").matches);

matchMedia("(max-width: 640px)").matches);

实例

例子 1

屏幕/视口是否大于 700 像素宽：

if (window.matchMedia("(max-width: 700px)").matches) {
  // 视口宽度小于或等于 700 像素
} else {
  // 视口宽度大于 700 像素
}

亲自试一试

例子解释

本例运行媒体查询并将其与当前窗口状态进行比较。

如需在窗口状态更改时运行响应式媒体查询，请将事件侦听器添加到 MediaQueryList 对象（请参阅下方“更多实例”）：

例子 2

如果视口小于或等于 500 像素宽，则将背景颜色设置为黄色，否则设置为粉红色：

// 创建匹配函数
function myFunction(x) {
  if (x.matches) {
    document.body.style.backgroundColor = "yellow";
  } else {
    document.body.style.backgroundColor = "pink";
  }
}

// // 创建 MediaQueryList 对象
const mmObj = window.matchMedia("(max-width: 700px)")

// 在运行时调用 match 函数：
myFunction(mmObj);

// 添加 match 函数作为状态变化的监听器：
mmObj.addListener(myFunction);

亲自试一试

语法

window.matchMedia(mediaQuery)

参数

参数 描述
mediaQuery 必需。表示媒体查询的字符串。

返回值

类型 描述
对象 带有媒体查询结果的 MediaQueryList 对象。

浏览器支持

所有浏览器都支持 matchMedia()：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 11 支持 支持 支持 支持