1.

设计网页时候确定宽度是件很苦恼事


以minun.cn为例根据Google Analytics统计半年多以来访问者屏幕分辨率共有81种最小分辨率是122x160这应该是手机；最大分辨率是3360x1050天知道是什么设备

张网页要在大小如此悬殊各种屏幕上都呈现令人满意效果难度可想而知举例来说张400px宽图片在800px屏幕上会占据50%宽度而在1920px屏幕上(Windows Vista流行设置)只占据20%

2.

目前常见屏幕分辨率宽度大概有6种:800px1024px1280px1440px1680px和1920px其中1024px最常见但是随着大屏幕显示器流行更高分辨率正变得越来越多

常见解决思路方法有两种:

第种:用javascript根据区别客户端分辨率选择css样式表文件具体做法可以看这里

第 2种:采用弹性布局(Fluid Width Layout)实现网页宽度自适应

第种思路方法优点是可以根据区别屏幕分辨率采用完全区别布局缺点是要设计和维护多张样式表比较麻烦第 2种思路方法只采用张样式表比较省事

下文就根据css-tricks上解决方案讨论如何实现第 2种思路方法实际上是很简单



3.

首先网页缺省宽度确定为满足1024px宽度显示器这不仅1024x768是现在最常见分辨率还这个宽度对网页最合适:1)它放得下足够内容足够 3栏布局；2)单行文字不宜太长1024px已是极限否则容易产生阅读疲劳；3)在当前互联网带宽条件下网页难以采用大分辨率所要求大尺寸图片

其次网页宽度会在780px-1260px范围内自动变化即最小不小于780px最大不超过1280px

最后对于更大分辨率网页内容会自动居中

4.

下面就是CSS文件写法只要4行需要注意是这几行语句都针对整个页面即body标签或者最外层那个div区域

margin: 10px auto;

这行保证了网页在任何分辨率下都会居中

min-width: 780px;
max-width: 1260px;

这 2行规定了网页最小和最大宽度注意IE6不支持这 2行即它们在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范围内会自动伸缩

5.

最后建议大家平时使用计算机时候不要盲目采用高分辨率意义不大

(完)