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 像素，则将背景颜色设置为黄色，否则设置为粉红色
// 创建 match 函数
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)")
// 运行时调用 match 函数
myFunction(mmObj);
// 将 match 函数添加为状态更改的侦听器
mmObj.addEventListener("change", function() {
myFunction(mmObj);
});
自己试试 »
浏览器支持
matchMedia() 在所有现代浏览器中都受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 11 |
