随便

转眼到了周四。卖了两件衣服开了两个会和老公吃了一顿猪脚饭。考虑到本人最近才思枯竭无话可说的苦况，贴工作图如下，希望博客不要因此中断了。无论如何，即使是再细微的事情，有个地方可以记录下来总是好的，即使以后不会去看或者忘记登录密码，依然觉得是好事一桩。



另记录“海洛因达人”的“解毒”地址，其文精彩非常，值得一读：http://www.wangxiaofeng.net/?p=2329



===================学习笔记的分割线=================



网页栅格系统研究：960的秘密



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


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) = 40
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）


几个术语和一个公式


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



将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


具体应用时，Margin其实是一个空白边，从视觉上看并不属于总宽度。不少栅格设计里习惯性地设定Gutter为10px, 这样Margin就是5px. 当W为960，我们要真正关注的是950！将W的含义变为去除Margin的总宽度，公式变化为：W = N * C - g


将上面的公式实例化一下：


950 = 12 * 80 - 10
950 = 16 * 60 - 10
950 = 24 * 40 - 10

这就形成了960蛋糕的三种常见切法：

12 *80


16 * 60


24 * 40


上面三种切法，N越大，灵活度越高。可以根据网页的实际复杂度来选用对应的切法。

栅格系统具有以下优势：

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

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

对于设计师们来说，灵活地运用栅格系统，能做出很多优秀和独特的设计。