网页设计中对网页宽度的研究

众所周知，标准网页设计一般不能出现横向滚动条，这是由网页美观，易用性等多方面决定的。
而现在主流设计还都是针对800*600分辨率设计的。在这可怜的800像素宽里，设计师既要考虑到最大限度表现出文字与图片，还要为了美观来美化表格、增加质感和效果。真可谓是每像素必争（至少我是这样），所以经常会有朋友问，到底800*600分辨率下，想要不出现横向滚动条，网页到底可以做多宽？

答案很简单：779像素。（在800*600分辨率下，windows外观为系统默认，ie窗口最大化，页面属性左右两侧边距为0像素）

为什么呢，其实很简单，看看下面几张图就明白了。

图一：windows默认情况下，滚动条宽度为17像素。

此主题相关图片如下：

图二：windows默认情况下，活动窗口边框宽为1像素，但是windows为了增加效果，会再有1像素宽的阴影，所以一共是2像素。

此主题相关图片如下：

图三：根据上面可以得出，右侧窗口边框2像素+滚动条17像素=19像素，再加上左侧窗口边框一共是21像素。

此主题相关图片如下：


而剩余的就是窗口内容了，所以可以轻松得出，内容宽度=800-21=779像素宽。

图四：在浏览器中实际测试，779宽度不产生横向滚动条。

此主题相关图片如下：



图五：而增加780宽的表格，横向滚动条就出来了。

此主题相关图片如下：



具体设计时，一般为了考虑内容居中和方便计算，大多采用双数，所以778是最佳尺寸。知道这个的原理，1024或1280的也都可以轻松算出来了。

===========================================================================

　　1、在IE6.0下，宽度为显示器分辨率减21，比如1024的宽度-21就变成1003。但值得注意的是IE6.0(或更低)无论你的网页多高都会有右侧的滚动条框。

　　2、在Firefox下，宽度的分率辨减19。比如1024的宽度-19就变成1005

　　3、在Opear下，宽度的分率辨减23。比如1024的宽度-23就变成1001

　　注：Firefox或Opear在内容少于浏览器高度时不显示右侧滚动条。

　　所以如果是1024的分辨率，你的网页不如设成1000安全一点。如果是800的分辨率一般都设成770。

　　这些需要明白并且牢记，不然很可能做出来的东西不符合浏览器要求。不过一般我们都回设定的再稍微小一点，应为有些浏览器加了插件或者其他的东西宽度会有变化，所以800的分辨率一般设定760左右；1024的设定990左右。