网页栅格系统中的最佳宽度:960px

网站 首页页面宽度 px
Yahoo! 950
淘宝 950
MySpace 960
新浪 950
网易 960
Live Search 958
搜狐 950
优酷 960
AOL 960

上面列举的都是 Alexa全球排名前100的站点 ,它们的首页宽度为950px/960px. 除了微软的Live Search, 这些站点有个共同特点:页面结构较复杂,都可以认为是门户型网站。

再来看看Google, YouTube, Facebook, Flickr!, eBay等知名站点,它们的首页宽度没什么固定规律,共同的特点是:功能专一,页面结构相对简单。

根据上面的简单分析可以认为:当搭建页面结构复杂的门户型网站时,开发工程师们不约而同地都选择将页面宽度定为950px/960px.

这是一件很有趣的事情,为什么要选择这个宽度呢?这个宽度值究竟有什么魔力?

神奇的960

设计师们对苹果情有独衷。在 1024 x 768 的分辨率下,打开Firefox:

自然状态下,Firefox窗体的大小约为 974 x 650. 减掉左右两边7px的边框,网页的实际大小为上图中的红色部分,高宽为 960 x 650.

有趣的960就这样出现了。是的,可以认为一切就这么简单。栅格系统最早出现在平面设计领域,设计师们爱用苹果,苹果下浏览器的默认宽度为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(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22
N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14
N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16
N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14
N(1024) = N(2^10) = 11 - 2 = 9
N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30

根据直觉(严格证明也不难,不过还是留给数学系的学生去证明吧),我们得到一个有趣的结论:

要使得N(width)最大,width的取值必须是 …, 480, 960, 1920, …

N越大,可组合的宽度值就越多。对栅格系统来说,这意味着越灵活!

目前绝大多数显示器都支持 1024 x 768 及其以上分辨率,480太窄,1920则太宽(太宽也不利于阅读),因此960就成为网页栅格系统中的最佳宽度了。(补充:480可以应用在Flash的栅格设计中)

细心的你也许会记得,本文开头列举的宽度值中,950也出现了好几次。950是怎么来的?和960是啥关系?这些疑问,请关注本系列的下一篇文章。

时间: 2025-01-31 01:34:58

网页栅格系统中的最佳宽度:960px的相关文章

网页栅格系统的粒度问题

研究(2)中讨论了栅格系统的基础知识.这一篇将集中探讨栅格系统的粒度问题.(注:如非特别指明,栅格系统均指24列960栅格系统) 淘宝的首页(截图)目前尚未严格遵守栅格系统,如果重构的话,宽度方向可以考虑采用下面的栅格布局(只考虑页面主体部分,忽略高度的比例): (图1) 纷乱的高度世界 我们来看下图1左上角.左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格(不可避免的要调整内容,比如人气宝贝中将只能放下3张图片).来仔细看下高度方向: (图2) 高度方向的布局是

学习网页栅格系统的几篇好文

1.[蓝色理想]网页的栅格系统设计[1] http://www.blueidea.com/design/doc/2008/6171.asp 2.[蓝色理想]网页的栅格系统设计[2] http://www.blueidea.com/design/doc/2008/6171_2.asp 3.网页栅格系统研究(1):960的秘密 http://www.68design.net/Web-Guide/Web-Theory/37967-1.html 4.网页栅格系统研究(2):蛋糕的切法http://www

网页设计中的栅格系统

栅格系统的形成 1692年,新登基的法国国王路易十四感到法国的印刷水平强差人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的, 重视功能性的新字体.委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基本方各单位,每个方各单位再分成36个小格,这样,一个印 刷版面就有 2304个小格组成,在这个严谨的几何网格网络中设计字体的形状,版面的编排,试验传达功能的效能,这是是世界上最早对字体

网页栅格系统研究(4):技术实现

前三篇文章中,明确了栅格系统的设计细节和适用范围.这一篇将集中讨论960栅格系统的技术实现. Blueprint的实现 Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能.我们来看demo页面: 以上三栏布局的代码为: <style type="text/css"> .container { margin: 0 auto; width: 950px } .span-8 { float: left; margin-right: 10px } div.last

[转载]网页栅格系统研究(3):粒度问题

[出自]http://lifesinger.org/blog/2008/10/grid-system-3/ 研究(2)中讨论了栅格系统的基础知识.这一篇将集中探讨栅格系统的粒度问题.(注:如非特别指明,栅格系统均指24列960栅格系统) 淘宝的首页(截图)目前尚未严格遵守栅格系统,如果重构的话,宽度方向可以考虑采用下面的栅格布局(只考虑页面主体部分,忽略高度的比例):(图1) 纷乱的高度世界 我们来看下图1左上角.左上角部分目前的宽度为256px, 重构的话可以将宽度缩小到230px以符合栅格(

[转]网页栅格系统研究(2):蛋糕的切法

[出自]http://lifesinger.org/blog/2008/10/grid-system-2/ 首先澄清一个应用场景问题.研究(1)中指出,对于结构复杂的网站,不少设计师们喜欢采用960固定宽度布局.但要注意的是,960并不是万能钥匙,大部分网站没有也不需要栅格系统.Amazon采用的是宽度自适应布局,最大限度的呈现信息.Google更是简简单单,主题部分就一个列表.eBay的页面非常简洁,商品页面宽度自适应,信息自然流畅,噪音少,购物很踏实.类似的站点还有很多,对于这些站点来说,宽

Bootstrap自动适应PC、平板、手机的Bootstrap栅格系统_javascript技巧

栅格系统英文为"grid systems",也有人翻译为"网格系统",运用固定的格子设计版面布局,其风格工整简洁,在二战后大受欢迎,已成为今日出版物设计的主流风格之一. 1692年,新登基的法国国王路易十四感到法国的印刷水平差强人意,因此命令成立一个管理印刷的皇家特别委员会.他们的首要任务是设计出科学的.合理的, 重视功能性的新字体.委员会由数学家尼古拉斯加宗(Nicolas Jaugeon)担任领导,他们以罗马体为基础,采用方格为设计依据,每个字体方格分为64个基

[转载]网页栅格系统研究(4):技术实现

[出自]http://lifesinger.org/blog/2008/11/grid-system-4/ 前三篇文章中,明确了栅格系统的设计细节和适用范围.这一篇将集中讨论960栅格系统的技术实现. Blueprint的实现 Blueprint是一个完整的CSS框架,栅格系统是它的一部分功能.我们来看demo页面:以上三栏布局的代码为: <style type="text/css"> .container { margin: 0 auto; width: 950px }

Bootstrap3.0栅格系统的原理

通过前面博文的简单介绍,大致对于Bootstrap有了初步的了解.由于自己也只是想通过Bootstrap官网来进行简单的学习,自己能够随便搞个不是太搓的页面就可以了.所以如果你是新手或许可以来看看,对你还有那么一点儿帮助,高手请飘过. <学习第一轮>中也只是简单的介绍了如何下载文件,及进行引用下载的文件,还没有真正的进入前端的设计学习中.我也看到了广大博友们对Bootstrap3.0也具有很大的兴趣,有之前就使用过的大牛,也有和我一样正打算学习一下的盆友.小菜.至于回复中比较多的就是:希望能有