存档

2008年10月20日 的存档

960是个神奇的数字 - 960 Grid System介绍

2008年10月20日

今天介绍一个网页辅助设计框架,960 Grid System。什么是960 Grid System,简单的来说,是用来辅助设计师快速的创建网页原型的辅助系统,960这里是网页的横向尺寸,960px,为什么是960这个数字,而不是1000或者900?

来温习下数学推演:

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(480) = N(2^5 * 3 * 5) = 6 * 2 * 2 - 2 = 22 

  N(750) = N(2 * 3 * 5^3) = 2 * 2 * 4 - 2 = 14

  N(800) = N(2^5 * 5^2) = 6 * 3 - 2 = 16

  N(1000) = N(2^3 * 5^3) = 4 * 4 - 2 = 14

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

  N(1920) = N(2^7 * 3 * 5) = 8 * 2 * 2 - 2 = 30

引用:http://lifesinger.org/blog/?p=375

960是1024之下,最灵活的尺寸,而且恰好是1024分辨率下最合适的尺寸,这些条件决定了960成了目前设计中最完美的尺寸。

基本知识介绍完毕,因为有不少人和我一样,乍看960 Grid System,都以为会是个CSS framework,但是它不是。他是一个非常精巧简单的草稿本。就像我们小时候练字用的米字簿一样。

米字格 米字簿 书法练字

(题外话,当初我挺烦练字的,现在总觉得练个半吊子,后悔了)

960 grid system

现在是不是好理解,什么是Grid System,作者提供给我们的是什么东西了吧。真的是非常巧思的一个东西,怪的有人说数学之美有的时候是那么神奇。就像黄金分隔那样,合适的比例,合适的间隔带来的是稳定而且非常不错的效果输出。

如果你也有兴趣的话,点这里下载。

 我也会后续写一些实际的usage和demo。大家少待。

绾青丝 - WebDesign , , ,