栅格系统

当搭建页面结构复杂的门户型网站时，开发工程师们不约而同地都选择将页面宽度定为950px/960px.

科学界有很多问题都可以归结到数学问题上，我们也从数学着手：


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）

解释一下650px：仅论宽度值的话，650px还是更适于阅读的。根据有关于快速阅读的研究，理想的高效阅读方式为视线焦点在每行的中部附近左右震荡，行的最左和最右端只需要余光足以注意到即可，同时视线随着行数的完成而下扫。与之相对比，初识阅读的儿童进行的阅读则是每行从极左到极右端完全逐字扫描，完成之后再“回车”定位到下一行左端。后者问题在于这一回车定位的过程是相当耗费眼球肌肉能量及大脑CPU周期的，而且有可能发生定位错误而需要重定位，这些都会造成阅读速度的严重下降。因此，通常的文本排版，无论是电子媒介抑或传统媒介，都会将行距控制在“眼球无需左右长距离移动，而只须稍微震荡即可掌控全行”的范围内，这个距离与字号、字数无关——想必大家都有一目扫完报纸上“豆腐块”的畅快体验。就普通PC的常用dpi而言600px左右是一个比较合宜的范围。而当宽度较长，譬如达到1000px时，可以实验一下：视线跟踪到行末时余光已经罩不住行首了，稍加体验，就感觉接下来到有一个相当明显的眼球进行“换行”的动作发生：通常是沿着行或者行的空隙参照，一路“滑”到行首，这相当于一个O(N)的定位。但如果宽度合宜，余光能保持罩住整行的宽度的话，就能避免“跟踪行”高成本，直接O(1)定位，同时对于快速阅读者而言稍加利用余光即可捕获两端文字，眼球的水平移动距离从而缩短，改以垂直移动为主，效率将大大提高。