Nat*_*eth 6 javascript media-queries
我注意到 css 媒体查询定义和 javascript window.matchMedia 媒体查询定义之间的区别：
css 规则最初应用于加载的页面。
javascript 中定义的规则不会在页面加载后执行，而只会在输入新条件后执行。
一个例子：
我有两个具有等效媒体查询定义的不同页面，第一个在 css 中定义，第二个在 javascript 中定义：
css 版本（在样式元素中定义）：
@media (min-width: 401px) and (max-width: 600px) { body {background-color: red; } }
@media (min-width: 601px) and (max-width: 800px) { body {background-color: blue; } }
javascript 版本（在全局或在主体加载后调用的函数中定义）：
window.matchMedia("(min-width: 401px) and (max-width: 600px)")
.addListener(function(e) {
if (e.matches) {
document.body.style.background = "red";
}
});
window.matchMedia("(min-width: 601px) and (max-width: 800px)")
.addListener(function(e) {
if (e.matches) {
document.body.style.background = "blue";
}
});
当我加载页面并且窗口宽度为 700 像素时
如何强制匹配的 window.matchMedia 在页面加载时执行？
要matchMedia在加载时触发 a ，您可以这样做（使用更简洁的代码库）。
堆栈片段
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
document.addEventListener("DOMContentLoaded", function(e) {
// medias (as an array to make it a little easier to manage)
var mqls = [
window.matchMedia("(max-width: 400px)"),
window.matchMedia("(min-width: 401px) and (max-width: 600px)"),
window.matchMedia("(min-width: 601px) and (max-width: 800px)"),
window.matchMedia("(min-width: 801px)")
]
// event listeners
for (var i=0; i<mqls.length; i++){
mqls[i].addListener(mqh)
}
// matches methods
function mqh(){
if (mqls[0].matches) {
console.log("CALLBACK (max-width: 400px)");
document.body.style.background = "green";
} else if (mqls[1].matches) {
console.log("CALLBACK (max-width: 600px)");
document.body.style.background = "red";
} else if (mqls[2].matches) {
console.log("CALLBACK (max-width: 800px)");
document.body.style.background = "blue";
} else if (mqls[3].matches) {
console.log("CALLBACK (min-width: 801px)");
document.body.style.background = "gray";
}
console.log("window.innerWidth: " + window.innerWidth);
}
// call once on load
mqh();
});
</script>
</head>
<body>
</body>
</html>组织。源代码：http : //www.javascriptkit.com/javatutors/matchmediamultiple.shtml