网页制作页面宽度自适应处理方法
发布时间: 2015-06-29
很多客户在找北京网页制作公司时都希望能实现页面自适应，目前，常见的屏幕分辨率宽度大概有6种：800px，1024px，1280px，1440px，1680px和1920px。其中，1024px最常见，但是随着大屏幕显示器的流行，更高的分辨率正变得越来越多。
常见的解决方法有两种：
第一种：用javascript根据不同的客户端分辨率，选择css样式表文件，具体的做法可以看这里。
第二种：采用弹性布局（Fluid Width Layout），实现网页宽度的自适应。
第一种方法的优点是，可以根据不同屏幕分辨率，采用完全不同的布局，缺点是要设计和维护多张样式表，比较麻烦。第二种方法只采用一张样式表，比较省事。
下文就根据css-tricks上的解决方案，讨论如何实现第二种方法，实际上是很简单的。
首先，网页的缺省宽度，确定为满足1024px宽度的显示器。这不仅因为1024x768是现在最常见的分辨率，还因为这个宽度对网页最合适：1）它放得下足够的内容，足够三栏的布局；2）单行文字不宜太长，1024px已是极限，否则容易产生阅读疲劳；3）在当前的互联网带宽条件下，网页难以采用大分辨率所要求的大尺寸图片。
其次，网页宽度会在780px-1260px的范围内，自动变化，即最小不小于780px，最大不超过1280px。
最后，对于更大的分辨率，网页内容会自动居中。
下面就是CSS文件的写法，只要4行。需要注意的是，这几行的语句都针对整个页面，即body标签或者最外层的那个div区域。
margin: 10px auto;
这一行保证了网页在任何分辨率下，都会居中。
min-width: 780px;
max-width: 1260px;
这二行规定了网页的最小和最大宽度。注意，IE6不支持这二行，即它们在IE6中是无效的。
width:expression(document.body.clientWidth < 782? "780px" : document.body.clientWidth > 1262? "1260px" : "auto");
这一行是针对IE6的解决方法。它采用了CSS表达式，也可以通过javascript实现。
另外，如果想让内层的各个区块也自动伸缩，它们的宽度可以采用百分比的形式，比如：
#div-left{
width:50%;
}
#div-right{
width:50%;
}
最后的效果和源码下载请查看这里。通过变动浏览器窗口的大小，可以发现网页在780px-1260px的范围内会自动伸缩。
最后，建议大家平时使用计算机的时候，不要盲目采用高分辨率，意义不大。北京网页制作，首选麦哲网联，垂询热线：010-57298550
下一篇 阿里云网站备案的拍照要求
- 阿里云网站备案的拍照要求.2017-02-27
- 网页制作页面宽度自适应处理方法.2015-06-29
- 为什么网页设计师要学习HTML和CSS知.2015-05-04
- 北京网页制作的一般流程.2013-08-08
- “开发、推广、融资”--互联网创业者必考的三道题.2013-06-18
- 北京网页制作成本已经节节攀升.2013-06-08
- 网页世界无处不在-你意想不到的未来浏览器.2013-06-04
- html5网页制作的优劣势分析.2013-04-07
- 营销型网页制作的基本要求.2012-08-31
- 网页制作需要注意的一般问题.2011-10-23
- div+css设计技巧-麦哲网联网页制作经验总结.2011-10-20
专业的游戏门户平台网站，以服务公会为核心，让所有游戏玩家都能享受便捷的公会服务，最新的游戏资讯，最火爆的游戏推荐。麦哲网联鼎力技术支持。垂直门户网站开发又一力作。
青岛清算所java网站建设，定制企业官网。
慧尔思一对一在线教育电商系统网站平台开发。在线教育平台开发是教育行业互联网+的必然趋势。麦哲网联认为：
综保区（北京）国际医药分拨中心有限公司网站改版项目
正在为您刷新更多案例……