Window matchMedia() 方法
JavaScript基础 2023-07-30 17:09:59小码哥的IT人生shichen
Window matchMedia() 方法
媒体查询
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)
参数
| 参数 | 描述 |
|---|---|
| mediaQuery | 必需。表示媒体查询的字符串。 |
返回值
| 类型 | 描述 |
|---|---|
| 对象 | 带有媒体查询结果的 MediaQueryList 对象。 |
浏览器支持
所有浏览器都支持 matchMedia()：
| Chrome | IE | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| Chrome | IE | Edge | Firefox | Safari | Opera |
| 支持 | 11 | 支持 | 支持 | 支持 | 支持 |
