响应式布局原理实现屏幕的大小来进行颜色的变化

当页面宽度大于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>