首页 > 代码库 > 网页宽高自适应大小

网页宽高自适应大小

2024-07-09 09:34:11   224人阅读

如今，显示器的分辨率越来越多，终端也变得多样化，web开发页面的自适应问题越来越多，如果不做处理，一旦显示器的分辨率发生变化，展示的内容可能出现许多意料之外的排版问题。关于不同终端的展示问题可以通过响应式布局来实现，而不需要响应式布局时我们需要自己来避免上述问题。

宽度自适应：
1、设置最外层容器（如 DIV）的 width 为 100%；
2、如果网站头部有图片展示，那就不能简单设置宽度为 100%，会出现 repeat 的情况，或者图片大小超出最外层容器宽度，此时可以设置最外层容器宽度为固定值：960px、980px、1000px等，并设置 margin:0 auto ；
3、如果觉得在较大分辨率的显示器上显示 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:  })
<style></style>

 

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

   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:  }
<style></style>

 

3、如果页面有页脚（版权信息等），采用情况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:  }
<style></style>

 

这样结合上面宽度进行设置时，发现设置了 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:  })
<style></style>


联系
我们