如何在JavaScript中使用媒体查询？
要将媒体查询与JavaScript结合使用，代码如下-
示例
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
color: white;
padding: 20px;
}
</style>
</head>
<body>
<h1>Using media queries with JavaScript Example</h1>
<h2>Resize the screen to see the color change from blue to red</h2>
<script>
var mediaQuery = window.matchMedia("(max-width: 700px)");
function setColor(mediaQuery) {
if (mediaQuery.matches) {
document.body.style.backgroundColor = "red";
} else {
document.body.style.backgroundColor = "blue";
}
}
setColor(mediaQuery);
mediaQuery.addListener(myFunction);
</script>
</body>
</html>输出结果
上面的代码将在窗口大小大于700px时产生以下输出-
调整浏览器窗口大小小于700px时-
热门推荐
2 祝福语简短七夕
10 小清新的祝福语简短
11 亲姐姐怀孕祝福语简短
12 中秋祝福语简短版大全
13 送师姐的祝福语简短
14 小朋友祝福语简短的话
15 朋友领证祝福语长文简短
16 租房明天搬家祝福语简短
17 对美好前程祝福语简短
18 简短的高考祝福语精选