网页宽度多少最合适.doc

960无疑是最合适的一个宽度了!Yahoo!950淘宝950MySpace960新浪950网易960LiveSearch958搜狐950优酷960AOL960根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?神奇的960设计师们对苹果情有独衷。在1024x768的分辨率下,打开Firefox:自然状态下,,网页的实际大小为上图中的红色部分,。是的,可以认为一切就这么简单。栅格系统最早出现在平面设计领域,设计师们爱用苹果,苹果下浏览器的默认宽度为960px,于是960就这么“自然”地出现了。数字背后的奥妙上面的“自然”出现,细究自然是不让人信服的。苹果系统的设计者们在没有喝醉酒的情况下选择了960,而不是其它什么1000之类的整数,自然另有奥妙。科学界有很多问题都可以归结到数学问题上,我们也从数学着手:960可以分解为2的6次方乘以3和5,这使得960可以分割成以下宽度的整数倍:2,3,4,5,6,8,10,12,15,16,20,24,30,32,40,48,60,64,80,96,120,160,192,240,320,480共26种(26=7*2*2–2,减去2是去掉1和960自身),我们标记为:N(960)=N(2^6*3*5)=26根据上面的算法,可以得到:N(360)=N(2^3*3^2*5)=22N(480)=N(2^5*3*5)=22N(720)=N(2^4*3^2*5)=28N(750)=N(2*3*5^3)=14N(800)=N(2^5*5^2)=16N(960)=N(2^6*3*5)=26N(1000)=N(2^3*5^3)=14N(1024)=N(2^10)=9N(1440)=N(2^6*3^2*5)=34N(1920)=N(2^7*3*5)=30根据直觉(严格证明也不难,不过还是留给数学系的学生去证明吧),我们得到一个有趣的结论:要使得N(width)最大,width的取值有两个系列:A系列:…,320,720,1440,…B系列:…,480,960,1920,…N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活!目前绝大多数显示器都支持1024x768及其以上分辨率。为了有效的利用屏幕宽度同时保证栅格的灵活度,可以看出960是非常合适的。这样,在目前主流显示器下,960就成为网页栅格系统中的最佳宽度了。(也许不久的将来,将会流行1440)对于结构复杂的网站,不少设计师们喜欢采用960固定宽度布局。但要注意的是,960并不是万能钥匙,大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局,最大限度的呈现信息。Google更是简简单单,主题部分就一个列表。eBay的页面非常简洁,商品页面宽度自适应,信息自然流畅,噪音少,购物很踏实。类似的站点还有很多,对于这些站点来说,宽度自适应布局更受青睐。有个很有意思的网站是Yahoo!,看起来是固定宽度布局,实际上在CSS中只要去掉一行,就能摇身一变自适应宽度了:#page{width:70em;}为什么Ya