如何 - 使用 JavaScript 的媒体查询
示例
如果视窗宽度小于或等于 700 像素，则将背景颜色更改为黄色。如果大于 700，则将其更改为粉红色
function myFunction(x) {
if (x.matches) { // 如果媒体查询匹配
document.body.style.backgroundColor = "yellow";
} else {
document.body.style.backgroundColor = "pink";
}
}
// 创建 MediaQueryList 对象
var x = window.matchMedia("(max-width: 700px)")
// 在运行时调用监听器函数
myFunction(x);
// 在状态更改时附加监听器函数
x.addEventListener("change", function() {
myFunction(x);
});
自己尝试 »
使用 JavaScript 的媒体查询
媒体查询是在 CSS3 中引入的，是响应式网页设计的关键要素之一。媒体查询用于确定视窗的宽度和高度，以便让网页在所有设备（台式机、笔记本电脑、平板电脑、手机等）上看起来都很不错。
The window.matchMedia() 方法返回一个 MediaQueryList 对象，表示指定 CSS 媒体查询字符串的结果。matchMedia() 方法的值可以是 CSS @media 规则 的任何媒体特征，如 min-height、min-width、orientation 等。
在我们的 CSS 媒体查询 教程中了解更多关于媒体查询的信息
在我们的 响应式网页设计 教程中了解更多关于响应式设计的信息
在我们的 JavaScript 参考中了解更多关于 window.matchMedia() 方法的信息。
