页面响应式网络布局原理

来源：互联网发布：贷款那个软件好编辑：程序博客网时间：2024/06/01 08:45

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

新建一个空白css链接

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

0 0