页面响应式网络布局原理

window.οnresize=function(){}：改变窗口事件,即窗口或框架被调整大小时发生；

新建一个空白css链接

<link rel="stylesheet" type="text/css" href="" id="styleCss">

当页面宽度>960时，调用css/1.css

当页面宽度>480时，调用css/2.css

……

 

<script type="text/javascript">
		window.onload=function(){
      var styleCss=document.getElementById("styleCss");
      window.onresize = reSize;//不加括号，表示多次运用这个函数
      // 加了括号，表示页面加载时就调用，只调用一次
      function reSize(){
        var clientWidth=client().width;//得到当前页面的宽度
        console.log(clientWidth);
        if(clientWidth>980){
          styleCss.href=" ";
        }else if(clientWidth>640){
          styleCss.href="css/pad.css";
        }else{
          styleCss.href="css/mobile.css"
        }
      }

      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
        }
      }
    }
	</script>