JavaScript 对象
- JavaScript Array 对象
- JavaScript Boolean 对象
- JavaScript CSS 样式声明对象
- JavaScript Math 对象
- JavaScript Number 对象
- JavaScript String 对象
- JavaScript 正则表达式(RegExp) 对象
- JavaScript Console 对象
JavaScript 参考手册
JS DOM参考手册
Window matchMedia() 方法
matchMedia()方法返回一个新的MediaQueryList对象，该对象表示指定媒体查询字符串的解析结果。
matchMedia()方法的值可以是CSS @media规则的任何媒体功能，例如min-height，min-width，orientation等。
语法：
window.matchMedia(mediaQueryString)
if (window.matchMedia("(min-width: 500px)").matches) {
/* 视口viewport最小为500像素宽 */
} else {
/* 视口viewport宽度小于500像素 */
}测试看看‹/›浏览器兼容性
表格中的数字指定了完全支持matchMedia()方法的第一个浏览器版本：
| 方法 |  |  |  |  |  |
| matchMedia() | 9 | 6 | 12.1 | 5.1 | 10 |
参数值
| 参数 | 描述 |
|---|---|
| mediaQueryString | 一个字符串，表示要为其返回新的MediaQueryList对象的媒体查询 |
技术细节
| 返回值： | 一个MediaQueryList对象，表示指定CSS媒体查询字符串的结果 |
|---|
更多实例
如果视口宽度小于或等于600像素，则背景色为珊瑚色。如果大于600，它将变为浅绿色：
var size = window.matchMedia("(max-width: 600px)")
myFunc(size) // 在运行时调用监听器函数
size.addListener(myFunc) // 在状态更改时附加监听器函数
function myFunc(size) {
if (size.matches) {
document.body.style.backgroundColor = "coral";
} else {
document.body.style.backgroundColor = "lightgreen";
}
}测试看看‹/›相关参考
CSS教程：CSS媒体查询