Window matchMedia() 方法
实例
查看屏幕/视口的宽度是否小于或大于700像素:
if
(window.matchMedia("(max-width: 700px)").matches) {
/* 视口小于或等于 700 像素宽 */
} else {
/* 视口宽度大于 700 像素 */
}
亲自试一试 »
/* 视口小于或等于 700 像素宽 */
} else {
/* 视口宽度大于 700 像素 */
}
定义和用法
window.matchMedia() 方法返回一个 MediaQueryList 对象，表示指定 CSS 媒体查询字符串的结果。
matchMedia() 方法的值可以是 CSS @media 规则的任何媒体功能，如最小高度、最小宽度、方向等。
MediaQueryList 对象有两个属性和两个方法:
| 属性 | 描述 |
|---|---|
| matches | 用于检查查询结果。返回布尔值：如果文档与媒体查询列表匹配，则为true，否则为false |
| media | 字符串，表示序列化媒体查询列表 |
此页面上的第一个示例仅运行指定的CSS媒体查询，并将其与当前窗口状态进行一次比较。以响应的方式使用 window.matchMedia() ，使代码在窗口状态更改时对CSS媒体查询作出反应，可以使用其方法/事件处理程序（请参阅下面的"更多实例"）:
| 方法 | 描述 |
|---|---|
| addListener(functionref) | 添加一个新的监听器函数，该函数在媒体查询的结果发生变化时执行。 |
| removeListener(functionref) | 从媒体查询列表中删除之前添加的监听器。如果指定的监听器不在列表中，则不执行任何操作。 |
浏览器支持
表中的数字表示支持该方法的第一个浏览器版本。
| 方法 | |||||
|---|---|---|---|---|---|
| matchMedia() | 9.0 | 10.0 | 6.0 | 5.1 | 12.1 |
语法
window.matchMedia(mediaQueryString)
参数值
| 参数 | 描述 |
|---|---|
| mediaQueryString | 必需。一个字符串，表示即将返回一个新 MediaQueryList 对象的媒体查询。 |
技术细节
| 返回值: | MediaQueryList 对象，表示指定CSS媒体查询字符串的结果。 |
|---|
更多实例
实例
如果视口宽度小于或等于 700px，请将背景色更改为黄色。如果大于 700px，则将其更改为粉红色
function myFunction(x) {
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
亲自试一试 »
if (x.matches) { // If media query matches
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes
❮ Window 对象
