960 grid 分析

960 网格系统的构造如下:
页面总宽度 960px
12 栏布局, 每栏 60px
每栏两边保留 10px 的外边距, 相当于 20px 的槽
内容区域总宽度是 940px

960 布局无疑是非常好的网格系统, 因为相当灵活. 它帮助网页设计者快速地构造以下栏栅数目的布局原型: 9 x 3, 3 x 3 x 3, 4 x 4 x 4 x 4, 10 x 2 等. 960 网格系统可能是现在最受欢迎的网格系统, 并已经在很多网站和设计模板上使用.

为什么960？

1024 x 768 的分辨率下，打开Firefox：

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

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越大，可组合的宽度值就越多。对栅格系统来说，这意味着越灵活！

960栅格化系统：

960栅格化系统是由Nathan Smith创造的，具体来讲，就是基于960像素宽度，通过划分具有规律的分割，来提高网页开发效率。

960栅格化系统系统（或者说适应型css构架）早期主要用来进行快速原型制作，减少重复单调的工作，但是目前，它在网页设计开发项目中开始扮演非常重要的角色了。它将为你的设计提供一个坚实的坐标基础。

最初有两种变形：12栅格和16栅格。它们互补保证了系统的融通性。后来产生了更多的衍生。上图展示了16栅格到3栅格的案例。BBC和yahoo的门户网站就采用了栅格化体系，从而非常好的规范了网站的信息布局和疏密程度。

在960宽度下12栏的删格设计中，可以有如下的单位宽度可选：
60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 和 940.

在960宽度下16栏的删格设计中，可以有如下的单位宽度可选：
40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 和 940.

在网站设计改版部分，如何选择合适的屏宽（栅格化系统）来为网站做改版呢？

一、分析现有网站用户的显示器分布情况收集现有网站用户用的显示器分辨率是多少？是
为满足大多数网站用户的使用情况，需要以宽屏为主还是以窄屏为主？通过分析网站流量统计当中的数据，我们不难获得用户所能接受的最大屏宽数据，从而为下一步选择合适的栅格化系统提供依据；

二、结合改版风格确定屏宽设计站风格效果。常见的三种形式
不同的栅格化系统，具有不同的网如下：

传统型栅格化风格

以960到980像素为屏宽的网站设计，是网页设计师设计网页的标准宽度，可应用于绝大多数的网站建设项目。这是因为，960到980像素是最适合人眼视觉接受范围的宽度，且和传统的1024×768像素的显示器分辨率相匹配，和最大限度的发挥其长处。

精细型栅格化风格

以900到940像素为屏宽的网站设计，属于细腻、精致的风格展示，多用于界面设计工作室，品牌策划公司。精细型屏宽设计，如同瘦身美女一样，处处透露出其流线美，没有任何一丝多余的‘赘肉’；

宽屏型栅格化风格

980像素以上的页面设计，多应用在综合门户、网上商城等内容丰富的站点设计当中。宽屏营造大气、丰富的视觉冲击力，给人无限的遐想空间，因此也可用于个性艺术网站当中，例如婚纱摄影网站设计，可通过大幅的精致照片，烘托品质感受。但是，使用宽屏设计需要非常谨慎，因为使用宽屏设计的前提是舍弃一部分显示器分辨率不高的用户，毕竟，使用1440×900像素及以上分辨率的用户目前还仅占少数。

因此，选择何种宽度的栅格化网页设计系统，需要结合现有用户情况及网站改版的风格定位。企业还可借鉴网站制作公司的专业建议来决定最终的选择。当然，不论使用哪种栅格化系统，仅仅是为了辅助网页设计师进行更好的创造，最终的网站作品取决于设计师对于整体定位的把握和素材的运用。

栅格系统的设计原理及应用
　　那么如何设计一个栅格系统？接下来我们将通过实例，详细的介绍一下网页栅格系统的原理与应用：

在网页设计中，我们把宽度为“W”的页面分割成n个网格单元“a”，每个单元与单元之间的间隙设为“i”,此时我们把“a+i”定义“A”。他们之间的关系如下：
W =（a×n）+（n-1）i
由于a+i=A，
可得：(A×n) – i = W
　　这个公式表述了网页的布局与网页“背后”的栅格系统之间的某种关系。我们拿yahoo作例，来看一下栅格系统的应用：

　yahoo的网站页面宽度为W=950px，每个区块与区块的间隔为i=10px；如果应用上面的公式，可以推出A=40px，既yahoo首页横向版式设计采用的栅格系统为：
（40×n）- 10 = W
　　下面我们列出当n等于不同数值时W变化的数值表格 ：

从表格可以看出：yahoo首页的布局完全是按照栅格系统进行设计的，每个区块的宽度对应的n值分别为：4，11，9。在这里我们看到一个很有意思 的事情：只要保证一个横向维度的各个区块的n值相加等于24，则即可保证页面的宽度一定是950px。然而，950px的宽度也恰好就是当n=24的时 候，W的宽度值。由此我们得出以下的应用模式：

在栅格系统中，设计师根据需要制定不同的版式或者划分区块，他们的依据将是上面的那张对应表进行设计。这样，一个栅格系统的应用就从此开始了。我们 看到，使用栅格系统的网页设计，非常的有条理性；看上去也很舒服。最重要的是，它给整个网站的页面结构定义了一个标准。对于视觉设计师来说，他们不用再为 设计一个网站每个页面都要想一个宽度或高度而烦恼了。对于前端开发工程师来说，页面的布局设计将完全是规范的和可重用的，这将大大节约了开发成本。对于内 容编辑或广告销售来说，所有的广告都是规则的，通用的，他们再也不用做出一套N张不同尺寸的广告图了……

　　当然只要你愿意，我们可以衍生出任何一种栅格系统，只要改变A和i的值，这个根据网站的实际情况来制定。那么如何选择合适栅格系统，主要通过“构成 要素与程序、限制与选择、构成要素的比例、组合、虚空间与组合、四边联系与轴的联系、三的法则、圆与构成、水平构成这些设计元素规划，来实现比例和谐的平 面设计”。比较深奥，我们在这里就不详细阐述了。

　　呵呵，说了一堆栅格系统的优点。大家可能会问：难道栅格系统真的是完美的么？答案是否定的：对于内容信息不确定导致高度不确定的页面，在高度层面上就无法做到栅格了。当然，具体的情况还需具体的分析与解决，这就需要设计师们在实际的应用中不断的总结经验，不断实践了。

更多：

http://www.yunsheji.net/?p=110

http://www.neoease.com/960-grid-system-is-getting-old/

http://www.zhihu.com/question/20309521