监测屏幕宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
</body>
</html>
<script>
function client() {
if(window.innerWidth != null) // ie9 + 最新浏览器
{
return {
width: window.innerWidth,
height: window.innerHeight
}
}
else if(document.compatMode === "CSS1Compat") // 标准浏览器
{
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
return { // 怪异浏览器
width: document.body.clientWidth,
height: document.body.clientHeight
}
}
reSize();//（带有括号只调用一次）先调用一次
window.onresize = reSize;//页面改变才会发生
function reSize(){
var clientWidth = client().width;
if (clientWidth >960){
document.body.style.backgroundColor = "red";
}else if(clientWidth < 640){
document.body.style.backgroundColor = "yellow";
}else{
document.body.style.backgroundColor = "blue";
}
}
</script>
