网页宽高自适应大小

现在，显示器的分辨率愈来愈多，终端也变得多样化，web开发页面的自适应问题愈来愈多，若是不作处理，一旦显示器的分辨率发生变化，展现的内容可能出现许多意料以外的排版问题。关于不一样终端的展现问题能够经过响应式布局来实现，而不须要响应式布局时咱们须要本身来避免上述问题。

宽度自适应：
一、设置最外层容器（如 DIV）的 width 为 100%；
二、若是网站头部有图片展现，那就不能简单设置宽度为 100%，会出现 repeat 的状况，或者图片大小超出最外层容器宽度，此时能够设置最外层容器宽度为固定值：960px、980px、1000px等，并设置 margin:0 auto ；
三、若是以为在较大分辨率的显示器上显示 960px 宽度显得不够大方美观，能够根据不一样的分辨率设置不一样的宽度（一样要设置 margin:0 auto），并制做相应大小的图片替换便可：

   1:  $(function(){

   2:      var screenWidth = window.screen.width;    

   3:      var width;

   4:      var imgURL ;

   5:      if (screenWidth >= 1440) {

   6:          width = "1400px";

   7:          imgURL = "1400.png";

   8:      } else if (1024 < screenWidth && screenWidth < 1440) {

   9:          width = "1200px";

  10:          imgURL = "1200.png";

  11:      } else {

  12:          width = "980px";

  13:          imgURL = "980.png";

  14:      }

  15:      $obj.css("width", width);  //$obj为要设置宽度的jQuery对象

  16:      $img.css("backgroundImage","url(" + imgURL + ")");  //$img为要设置背景的jQuery对象

  17:  })

 

高度自适应：
一、可直接设置最外层容器以及 html、body 的 height 为 100%；
二、有时，网页的填充内容会根据不一样的权限或者数据的完整程度显示出不同的大小，这样，咱们就须要比较页面的大小和显示器的分辨率高度再作相应的调整：

   1:  function autoHeight(objId){

   2:      var nowHeight;

   3:      if (window.innerHeight){//FF

   4:          nowHeight = window.innerHeight;

   5:      }else{

   6:          nowHeight = document.documentElement.clientHeight;

   7:      }

   8:      if(nowHeight > document.body.clientHeight){

   9:          document.getElementById(objId).style.height = nowHeight  + 'px';

  10:      }else{

  11:          document.getElementById(objId).style.height = document.body.clientHeight + 'px';

  12:      }

  13:  }

 

三、若是页面有页脚（版权信息等），采用状况2的方法可能会使页脚悬于页面中间，这时，页面每每会是 header、main、footer 这样的结构，在外面会有一个外层容器 container，方法2就是设置该外层容器的高度。固然，咱们能够在获取到 container 的新的高度以后减去 header 和 footer 的高度就能够设置 main 的高度了，这样能够避免 footer 出如今页面中间的状况了。
此外，咱们还有另外一种方式解决 footer 的问题：position。
设置 container 的 position:relative ， main 和 footer 的 position:absolute（其他css属性略去）：

   1:  #container{

   2:    position:relative;  

   3:  }

   4:   

   5:  #main{

   6:    position:absolute;

   7:    top:80px;    /*header 的高度*/

   8:    bottom:40px;      /*footer 的高度*/

   9:  } 

  10:   

  11:  #footer{

  12:    position:absolute;

  13:    bottom:0;

  14:  }

 

这样结合上面宽度进行设置时，发现设置了 position 以后，margin:0 auto就失效了，由于脱离了文档流的缘故，因此咱们须要设置 container 的 margin-left 为宽度的一半的负值便可，即：

   1:  $(function(){

   2:      var screenWidth = window.screen.width;    

   3:      var width;

   4:      var imgURL ;

   5:      var left;

   6:      if (screenWidth >= 1440) {

   7:          width = "1400px";

   8:          left = "-700px";

   9:          imgURL = "1400.png";

  10:      } else if (1024 < screenWidth && screenWidth < 1440) {

  11:          width = "1200px";

  12:          left = "-600px";

  13:          imgURL = "1200.png";

  14:      } else {

  15:          width = "980px";

  16:          left = "-490px";

  17:          imgURL = "980.png";

  18:      }

  19:      $obj.css({"width": width,"margin-left":left });  //$obj为要设置宽度的jQuery对象

  20:      $img.css("backgroundImage","url(" + imgURL + ")");  //$img为要设置背景的jQuery对象

  21:  })