利用clientWidth属性实现屏幕分辨率改变时执行不同的JavaScript代码
有时我们需要在屏幕分辨率不同时让同一元素执行不同的JavaScript代码，例如，我们需要折叠式的导航栏在不同的屏幕分辨率下展开不同的高度，可以用如下的方法实现：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#nav{
width: 100%;
height: 50px;
background-color: blueviolet;
overflow: hidden;
}
#nav ul{
margin-top: 30px;
}
</style>
</head>
<body>
<div id="nav">
<button onclick="openNav()">折叠/展开 按钮</button>
<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>
</body>
<script>
var num=1;
var nav=document.getElementById("nav");
function openNav(){
num++;
var bodyWidth=document.body.clientWidth;
if (bodyWidth==900||bodyWidth<900) {
if (num%2!=0) {
nav.style.height="30px";
} else{
nav2.style.height="300px";
}
}else{
if (num%2!=0) {
nav2.style.height="30px";
} else{
nav2.style.height="500px";
}
}
}
</script>
</html>
这个DEMO实现了当屏幕分辨率不同时，导航栏会展开不同的高度，思路是定义一个变量如：
var bodyWidth=document.body.clientWidth（clientWidth指的是body的宽度），
来接收当前屏幕分辨率的数值，然后再用条件语句来判断，如果bodyWidth小于或等于JS代码改变时的分辨率，条件语句内写需要执行的代码，本例是屏幕宽度小于或等于900px时，导航栏会展开300px的高度，而当屏幕宽度大于900px时，导航栏会展开500px的高度。
