定义和用法

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 像素
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Window 对象</h1>
<h2>matchMedia() 方法</h2>
<p id="demo"></p>
<script>
let text;
if (window.matchMedia("(max-width: 700px)").matches) {
  text = "屏幕宽度小于或等于 700 像素。";
} else {
  text = "屏幕至少有 700 像素宽。";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

例子解释

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

如需在窗口状态更改时运行响应式媒体查询，请将事件侦听器添加到 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);

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>Window 对象</h1>
<h2>matchMedia() 方法</h2>
<p id="demo"></p>
<script>
let text;
if (matchMedia("(max-width: 700px)").matches) {
  text = "屏幕宽度小于或等于 700 像素。";
} else {
  text = "屏幕至少有 700 像素宽。";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

语法

window.matchMedia(mediaQuery)

参数

返回值

浏览器支持

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