谈谈960

选用960，其实很简单，因为960能够被很多数整除，同时又很接近1024，因此很多网站选用了这个宽度。

我在960的秘密一文中，只是想从数学的角度上指出对栅格系统来说，960是个很灵活的宽度而已。这只是一个引子，想激发大家对栅格系统的兴趣，之后的文章才是重点。

我的数学分析

在将960分解质因数后，我最初的结论确实有不妥之处。这点小奎指出来了，720比960的约数更多，还有1440的约数也很多。从数学上，可以简化为以下问题：

W = 2^m * 3^n * 5 N(W) = (m + 1) * (n + 1) * 2 - 2

m和n是整数，现在要使得N(W)尽量大，同时W的值最接近1024. 简单分析质因数可以得到：

... N(480) = N(2^5 * 3 * 5) = 22 N(960) = N(2^6 * 3 * 5) = 26 N(1920) = N(2^7 * 3 * 5) = 30 ... N(360) = N(2^3 * 3^2 * 5) = 22 N(720) = N(2^4 * 3^2 * 5) = 28 N(1440) = N(2^5 * 3^2 * 5) = 34 ...

就这两个系列的的N值最大（稍加分析，能够比较明显地“看”出来，我相信数学系的学生能严格证明）。

很明显，上面最接近1024的就是960.

国外同行的依据

960不是新鲜玩意，国外同行们已经有过很多讨论，比如：Optimal width for 1024px resolution?, 作者选用960的原因是：

I’ve been using 960 for some time now, as it’s slightly smaller than full width, and it’s divisible by 3, 4, 5, 6, 8, 10, 12, 15, and 16 (imagine the grid possibilities). I’d love to hear what all of you are wrestling with.

再来看看960.gs作者的解释：

All modern monitors support at least 1024 × 768 pixel resolution. 960 is divisible by 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 and 480. This makes it a highly flexible base number to work with.

关于苹果系统下浏览器的默认宽度为960，国外也早有人谈及，看看这个ppt：Grids Are Good

一个有意思的巧合

上周去阿里中文站交流CMS系统的设计，中文站选用了960的宽度。他们调研了很多显示设备，发现320是很多显示设备屏幕的最小单位。因此在Web浏览器上，选用了3个320组成的960布局。这个思路蛮有意思。

关于10像素的间距

选用10px的理由非常简单：写CSS时，比较容易计算各种padding和margin. 淘宝的设计有个潜规则：间距最好都是5px的倍数。5的倍数容易计算，对人友好。Blueprint的设计中，也是把间距定位10px, 类似的例子有很多。就这么简单。

值得一提的是，阿里中文站采用了8px, 原因是8是2的立方，计算机在渲染时，能减少性能开支。不过这个性能影响实在太小了。在软件工程中，人的成本是最大的，感觉对计算机友好不如对人更友好。

关于Grid的翻译

个人觉得“网格”太偏设计领域，而且“网格”的外延很多，不容易让读者立刻领悟要表达的意思。不如“栅格”，一看就很明了。当然，每个译者都可以保留自己的意见，就如“优雅降级”和“平稳退化”一样，存在的不一定是最好的。既然是翻译，就应该有自己的思考和选择。

关于腾讯兄弟的数学证明

w = x * n + (n - 1) * y

上面这个公式和我说的是一样的，x是我说的c, y是槽距g, 对于950, 我的公式是：

W = c * N + g * (N - 1)

至于后面的，

w=z*Math.floor(n/m)+(Math.floor(n/m)-(n%m-1))*y+x*(n%m)

实在不敢苟同。何必引入z来让问题复杂化？小模块划分好了，大模块也就有了。本质上都是穷举，没必要这样折腾。

其它的，比如黄金分割，不想说什么。如果腾讯兄弟认为1px的栅格有意义，我实在佩服。

很重要的一点

栅格并不会限制设计师们的设计，这个在《超越CSS》一书里有很好的阐述和例子。若认为栅格化后，设计师们只能定定颜色、画画小图，实在让我汗流浃背无语凝噎。

栅格化对前端开发工程师更是一种解放，从每天的重复性劳动中解脱出来，多些时间来研究新应用，无论对公司还是对个人都是好的。

最后，提前公布下工具

我不会Photoshop, 原文章中的那些图，其实都是用自己写的一个小工具生成的。放在线上好久了，只是想着等完善后再公布：

http://lifesinger.org/lab/2008/grid_design_tool.html

这个工具借鉴了老外的 Grid Designer 2. 功能如下：

1. 可以测试各种蛋糕的切法^o^
2. 公式中，带灰色小箭头的表示是计算值，可以在三种计算值之间切换
3. 注意那个Add Box按钮，添加的Box，可以拖动，鼠标放到边框附近，还可以调整大小
4. 还有一些方便截图的小功能，折腾折腾应该就会用

最后，本文不欢迎任何侮辱性的留言评论。我非常期望国内的前端开发工程师们能向国外的同行们学习：开放真诚地讨论问题，互助学习、共同进步。