Window matchMedia()
示例 1
屏幕/视口宽度是否大于700像素
if (window.matchMedia("(max-width: 700px)").matches) {
// 视口宽度小于或等于700像素
} else {
// 视口宽度大于700像素
}
自己动手试一试 »
描述
matchMedia() 方法返回一个包含查询结果的 MediaQueryList。
另请参阅
媒体查询
matchMedia() 方法的媒体查询可以是 CSS @media 规则的任何媒体特性，例如 min-height, min-width, orientation 等。
示例
matchMedia("(max-height: 480px)").matches);
matchMedia("(max-width: 640px)").matches);
语法
window.matchMedia(mediaQuery)
参数
| 参数 | 描述 |
| mediaQuery | 必需。 表示媒体查询的字符串。 |
返回值
| 类型 | 描述 |
| 一个对象 | 一个包含媒体查询结果的 MediaQueryList 对象。 |
示例解释
本页上的第一个示例运行媒体查询并将其与当前窗口状态进行比较。
要在窗口状态每次更改时运行响应式媒体查询，请向 MediaQueryList 对象添加事件监听器（参见下面的“更多示例”）
更多示例
如果视口宽度小于或等于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: 500px)")
// 在运行时调用匹配函数
myFunction(mmObj);
// 添加匹配函数作为状态变化的监听器
mmObj.addEventListener("change", function() {
myFunction(mmObj);
});
自己动手试一试 »
浏览器支持
matchMedia() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
