网页设计宽度几寸最为适宜？

答复：960无疑是最佳选择之一！以下原因摘自网络，仅供参考，我们关注的是结论！

Yahoo! 950

淘宝 950

MySpace 960

新浪 950

网易 960

Live Search 958

搜狐 950

优酷 960

AOL 960

通过上述简要分析，我们可以认为：在构建页面结构复杂的门户网站时，开发工程师们普遍倾向于将页面宽度设定为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(360)= N(2^3 3^2 5)= 22

N(480)= N(2^5 3 5)= 22

N(720)= N(2^4 3^2 5)= 28

N(750)= N(2 3 5^3)= 14

N(800)= N(2^5 5^2)= 16

N(960)= N(2^6 3 5)= 26

N(1000)= N(2^3 5^3)= 14

N(1024)= N(2^10)= 9

N(1440)= N(2^6 3^2 5)= 34

N(1920)= N(2^7 3 5)= 30根据直觉（严格证明也不难，不过还是留给数学系的学生去证明吧），我们得到一个有趣的结论：

要使得N(width)最大，width的取值有两个系列：

A系列：…, 320, 720, 1440,…

B系列：…, 480, 960, 1920,…

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

目前绝大多数显示器都支持1024 x 768及其以上分辨率。为了有效地利用屏幕宽度同时保证栅格的灵活性，可以看出960是非常合适的。这样，在目前主流显示器下，960就成为网页栅格系统中的最佳宽度了。（也许不久的将来，将会流行1440）

对于结构复杂的网站，许多设计师们喜欢采用960固定宽度布局。但要注意的是，960并非万能钥匙，大部分网站没有也不需要栅格系统。Amazon采用的是宽度自适应布局，最大限度地呈现信息。Google更是简洁明了，主题部分就一个列表。eBay的页面非常简洁，商品页面宽度自适应，信息自然流畅，噪音少，购物很踏实。类似的站点还有很多，对于这些站点来说，宽度自适应布局更受欢迎。

有一个很有意思的网站是Yahoo!，看起来是固定宽度布局，实际上在CSS中只要去掉一行，就能变成自适应宽度：

page{

width: 70em;

}

为什么Yahoo!最后选择了固定宽度布局呢？这很可能是因为固定宽度布局比宽度自适应布局更容易控制。对于结构复杂的网站来说，可维护性和可扩展性非常重要。

Yahoo!是以信息展示为主的门户网站，960的宽度对于信息的阅读比较友好（Joe Clark写了一篇关于屏幕阅读时有关行长的有趣文章）。种种因素使得Yahoo!最后采用了固定宽度布局（Tommy Olsson总结了每种布局设计的优缺点）。

这里将只关注固定宽度布局，适用的场景是构建复杂的门户网站。对于宽度自适应布局和相应的栅格系统，暂不讨论（根据实现的技术手段不同，宽度自适应布局又分为流体布局和弹性布局。我个人比较喜欢弹性布局，以后有时间再研究）。

好了，已经将范围缩小到固定宽度布局的网页栅格系统，那我们开始吧。

并不遥远的750

还记得800×600的显示器吗？虽然才时隔几年，感觉却好像是上个世纪的事了。Mark Boulton做了最早的探索：

将750分割成均等的6份，这就形成了栅格系统，稍加组合划分就形成了两栏布局和三栏布局。Mark Boulton还研究了Gutter（垂直栏之间的间隙）对栅格的影响，有兴趣的可以阅读原文，或者跟着我往下看吧，下面将详细阐述。

几个术语和一个公式

一个标准的栅格系统，包括以下部分：

将Flowline的总宽度标记为W，Column的宽度标记为c，Gutter宽度标记为g，Margin的宽度标记为m，Column的个数标记为N，我们可以得到以下公式：

W= c N+ g(N- 1)+ 2 m一般来说，Gutter的宽度是Margin的两倍，上面的公式可以简化为：

W= c N+ g(N- 1)+ g=(c+ g) N将c+g标记为C，公式变得非常简单：

W= C* N上面的公式就是栅格系统的基础，很简单吧。

950的来源

具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px，这样Margin就是5px。当W为960，分割成6列时，栅格如下图：

上图的处理是左右Margin各为5px。也可以将Margin集中放在一边，比如右边：

无论Margin放在何处（这只影响技术实现，不影响设计），我们真正要关注的是去除Margin之后的部分：

这就是我们要真正关注的950！将W的含义变为去除Margin的总宽度，公式变化为：

这就是我们亟需关注的950！将W的涵义转变为去除边距的总宽度，公式调整为：

W= N C- g

950= 12 80- 10

950= 16 60- 10

950= 24 40- 10

这便形成了960蛋糕的三种普遍切法。

12 x 80

16 x 60

24 x 40

这三种切法中，N值越大，灵活性越高。可以根据网页的实际复杂程度来选择相应的切法。在960网格系统首页中，展示了12 x 80的应用：

让我们回顾一下上篇文章中开头列举的网站的网格应用情况。

Yahoo!采用的是很标准的 24 x 40网格：

淘宝网目前仅在商城上部分使用了网格系统（大的两栏布局遵循了 24 x 40的网格化，主体部分使用的另一套740的网格划分）：

网易采用的是 16 x 60的网格系统：

研究（1）中的其他站点都没有真正严格地采用网格系统。

网格系统的优势

上述的“发现”让人略感失望。目前严格采用网格系统的站点为数不多，但我们为何还要努力让网页网格化呢？

网格系统具有以下优势：

能显著提升网页的规范性。在网格系统下，页面中所有组件的尺寸都是有规律的。这对于大型网站的开发和维护来说，能节省不少成本。

基于网格进行设计，可以让整个网站各个页面的布局保持一致。这能增加页面的相似度，提升用户体验。

对于设计师们来说，灵活地运用网格系统，能创造出许多优秀和独特的设计。（详见《超越CSS》一书）

对于大型网站来说，我相信网格化将是一种潮流和趋势。

接下来讨论网格系统中的黄金比例。

黄金比例

黄金比例可以归结为一个数学问题：对于长度为1的线段，将其分成两部分 x和 1– x，使得：

x/ 1=(1- x)/ x

化为简单的二次方程：

x^2+ x- 1= 0

正数解为：

x

=(sqrt(5)- 1)/ 2~=

0.618这就是黄金比例。这个比例不仅仅出现在诸如绘画、雕塑、音乐、建筑等艺术领域，在管理、工程设计等方面也有着不可忽视的作用。

（这是个自然界的魔数，类似的还有真空光速、普朗克常数、精细结构等等，感兴趣的Google吧）

在平面设计领域，黄金比例点被广泛采用。比如下面这种图：

数一数上面有多少黄金比例？

对于960网格，实际宽度是950。两栏布局时，黄金比例为：

对于 24 x 40的情景，最接近黄金比例的两栏布局是 350: 590，栏数比例为 9: 15。但实际使用时，因为窄栏经常用来做导航或放置辅助信息，并不需要350px这么宽。因此实际情况下经常被采用的布局是：

以上讲的都是宽度方向上的网格化，下面我们看看高度方向上如何应用。

高度方向上的网格

还记得研究（1）中那张红红的很刺眼的图吗？注意高度值560也是很神奇的。

N(560)= N(2^4 5 7)= 18

560/ 960~= 0.583N(560)比较大，同时可以让高宽比接近黄金比例。针对560，我们采用 14 x 40网格：

这样，我们就在宽度和高度两个方向上都实现了网格化。

H5网页的设计有哪些优势啊

1、页面内容丰富简洁。H5技术完成的网站也等于常说的响应式设计，优化了页面多媒体元素的应用效果，以前建站页面往往减少动画、视频等的应用，因为所占的网站资源空间大，导致页面加载速度慢的环境，但现在应用H5建站，不仅可以大胆应用这些元素，且无需担心阅读不顺畅的问题，同时让页面显得更加丰富，又能保证其整齐性。

2、有利于网站优化。一个网站如果不能很好地利用互联网资源，那么建站的代价就已不复存在，其中搜索引擎这个大平台便是资源利用的一个好渠道，由此网站必定少不了优化。H5技术所应用的代码格式相对于旧时的编程来讲要简洁得多，且应用多媒体的情况下，对搜索引擎的抓取也是异常友好的，因此网站优化起来更加轻松。

3、提升用户体验。H5的出现，改善了网页内容被插件约束的场合排场，创造了丰富多彩的网站，满足了用户视觉上的审美需求，且能够保证网站的加载速度，更重要的是以后的各类浏览器的推出，对于不同的用户有不同的应用习惯，H5很好地兼容了各类浏览器的，让网站的出现效果不会因设备的差异而改变，大大提升了用户体验。

4、增加用户流量。因为H5技术实现了网站跨平台的应用，特别是移动设备的多样化，包括各类屏幕大小的手机、平板等等，毫无疑问，在移动互联网的趋势下，大部分的用户流量将来源于移动端的用户，H5网站的构建，轻松拓展了用户阅读渠道，企业无需另外开发移动网站来获取用户流量，也同样能够分得移动用户群体的蛋糕，无形中给网站增加了流量。