1. Onresize事件
只要浏览器的大小改变,哪怕1像素,都会触动这个事件。
2.获取屏幕可视区域的封装
<script>
/* console.log(document.body.clientHeight);
console.log(document.body.clientWidth);
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
console.log(window.innerHeight);
console.log(window.innerWidth); */
window.onresize=function(){
console.log(1)
document.title=client().width+" "+client().height;
}
//获取屏幕可视区域的封装
function client(){
if(window.innerHeight!==undefined){
return{
"width":window.innerWidth,
"height":window.innerHeight
}
}else if(document.compatMode==="CSS1Compat"){
return{
"width":document.documentElement.clientWidth,
"height":document.documentElement.clientHeight
}
}else{
return{
"width":document.body.clientWidth,
"height":document.body.clientHeight
}
}
}
</script>
3. 案例:根据浏览器可视区域大小,给定背景色
(基于响应式原理)
<body>
<script src="jquery1.0.0.1.js"></script>
<script>
window.onresize=fn;
fn();
function fn(){
if(client().width>960){
document.body.style.backgroundColor="red";
}else if(client().width>640){
document.body.style.backgroundColor="blue";
}else{
document.body.style.backgroundColor="green";
}
}
</script>
</body>
4. 获得屏幕宽高(获得的是电脑分辨率)
window.screen.width
分辨率是屏幕图像的精密度,指显示器所能显示的像素有多少。
<script>
window.onresize=function(){
document.title=window.screen.width;
}
</script>