当页面宽度大于960像素的时候,页面显示红色并且显示computer当页面宽度大于840像素的时候,小于960时,页面显示绿色,并且显示tablet剩下的情况为黄色并且显示为mobile
代码:
*<script>
window.onresize=function(){
responsive();//网页大小发生改变的时候发生响应
};
responsive();//页面刚加载的时候也发生响应
function responsive(){
if(all().width>960){
document.body.style.background="red";
document.body.innerHTML="computer";
}else if(all().width>840){
document.body.style.background="green";
document.body.innerHTML="tablet";
}else{
document.body.style.background="yellow";
document.body.innerHTML="mobile";
}
}
function all(){//封装函数
return{ width:window.innerWidth||document.documentElement.allWidth||document.body.alltWidth||0, height:window.innerHeight||document.documentElement.allHeight||document.body.alltHeight||0
};
}
</script>