最佳网页宽度及其兼容实现方法

下文就根据css-tricks上的解决方案，讨论如何实现第二种方法，实际上是很简单的。

3.

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

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

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

4.

下面就是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");

另外，如果想让内层的各个区块也自动伸缩，它们的宽度可以采用百分比的形式，比如：

#div-left{
width:50%;
}

#div-right{
width:50%;
}

最后的效果和源码下载请查看这里。通过变动浏览器窗口的大小，可以发现网页在780px-1260px的范围内会自动伸缩。

5.

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