HTML5中国

 找回密码
 立即注册

QQ登录

只需一步,快速开始

HTML5中国 首页 教程视频 实例代码 查看内容

网页宽高自适应大小

2014-6-24 10:33| 发布者: html5cn| 查看: 13950| 评论: 0|原作者: html5cn|来自: 博客园

摘要: 如今,显示器的分辨率越来越多,终端也变得多样化,web开发页面的自适应问题越来越多,如果不做处理,一旦显示器的分辨率发生变化,展示的内容可能出现许多意料之外的排版问题。关于不同终端的展示问题可以通过响应 ...
       如今,显示器的分辨率越来越多,终端也变得多样化,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. })
复制代码


高度自适应:


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. }
复制代码


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. #main{
  5.   position:absolute;
  6.   top:80px;    /*header 的高度*/
  7.   bottom:40px;      /*footer 的高度*/
  8. }

  9. #footer{
  10.   position:absolute;
  11.   bottom:0;
  12. }
复制代码


       这样结合上面宽度进行设置时,发现设置了 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. })
复制代码


       以上仅是本人使用过的方法的思路,没有具体实现的 demo,可根据实际情况考虑使用怎样的方式,还会有其他更好的解决方案是我没有想到的,学习中。


更多
2

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (2 人)

相关阅读

最新评论

HTML5中国微信

小黑屋|关于我们|HTML5论坛|友情链接|手机版|HTML5中国 ( 京ICP备11006447号 京公网安备:11010802018489号  

GMT+8, 2017-5-23 09:18

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

返回顶部