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

众所周知,标准网页设计一般不能出现横向滚动条,这是由网页美观,易用性等多方面决定的。
而现在主流设计还都是针对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左右。

申明

非源创博文中的内容均收集自网上,若有侵权之处,请及时联络,我会在第一时间内删除.再次说声抱歉!!!

博文欢迎转载,但请给出原文连接。

原文地址:https://www.cnblogs.com/Athrun/p/1050198.html