前段時間在網(wǎng)絡(luò)上發(fā)現(xiàn)最近網(wǎng)絡(luò)上開始有很多人在討論柵格化的網(wǎng)頁布局，嗯。我也先介紹一下網(wǎng)頁柵格化的布局情況吧。

最早提出網(wǎng)頁柵格化的設(shè)計的人我忘記是誰了，但是應(yīng)該是網(wǎng)頁還停留在780寬度的時候就聽說過柵格化的問題。從taobao ued的博客了解到

“1692年，新登基的法國國王路易十四感到法國的印刷水平強差人意，因此命令成立一個管理印刷的皇家特別委員會。他們的首要任務(wù)是設(shè)計出科學(xué)的、合理的， 重視功能性的新字體。委員會由數(shù)學(xué)家尼古拉斯加宗（Nicolas Jaugeon）擔(dān)任領(lǐng)導(dǎo)，他們以羅馬體為基礎(chǔ)，采用方格為設(shè)計依據(jù)，每個字體方格分為64個基本方各單位，每個方各單位再分成36個小格，這樣，一個印 刷版面就有 2304個小格組成，在這個嚴謹?shù)膸缀尉W(wǎng)格網(wǎng)絡(luò)中設(shè)計字體的形狀，版面的編排，試驗傳達功能的效能，這是是世界上最早對字體和版面進行科學(xué)實驗的活動，也 是柵格系統(tǒng)最早的雛形?！?/P>

嗯。簡單說來，網(wǎng)頁柵格化解決的問題即是網(wǎng)頁如何能最多的分割成為各種整數(shù)寬度的問題。。通過看上面的圖片大家應(yīng)該基本可以了解到什么是網(wǎng)頁柵格化的設(shè)計，以上是950寬度的網(wǎng)頁設(shè)計。如果把30作為每個單獨的單元格的寬度，10作為每個單元格之間的寬度。那么950恰好可以分成24個小列，每個間隔10像素。

因此，這個就是網(wǎng)頁柵格化最簡單的一個解釋了。下面我想說另外一個問題，即使黃金分割。
把一條線段分割為兩部分，使其中一部分與全長之比等于另一部分與這部分之比。其比值是[5^(1/2)-1]/2，取其前三位數(shù)字的近似值是0.618。由于按此比例設(shè)計的造型十分美麗，因此稱為黃金分割，也稱為中外比。這是一個十分有趣的數(shù)字，我們以0.618來近似，通過簡單的計算就可以發(fā)現(xiàn)：

1/0.618=1.618
(1-0.61  / 0.618=0.618

這個數(shù)值的作用不僅僅體現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，而且在管理、工程設(shè)計等方面也有著不可忽視的作用。

如果細心一些的人會發(fā)現(xiàn)，黃金分割無所不在，包括拍張照片人物放在畫面的黃金分割點上也是一種很好的構(gòu)圖方法。因此，黃金分割是一種公認最優(yōu)秀的分割比例。

因此如果以一個950寬度的網(wǎng)頁為例。最合適的分割比例其實是。

左側(cè)：950× 0.618 = 587

右側(cè)：950 × 0.382 =363

個人覺得黃金比例分割比柵格化靠譜很多，但是如果是一個門戶網(wǎng)站，需要很多的小區(qū)塊分割的網(wǎng)站，你要考慮倒柵格化的化，即是為了以后再分割考慮的化，那兩列的比例也應(yīng)該是最接近的應(yīng)該是590像素和360像素。

為什么呢？

590 = 14 × (30+10) + 30

360 = 9 × (30+10)

其實這個比例已經(jīng)幾乎等于黃金分割。因此這樣的使用比較好。

同時，黃金分割不僅僅體現(xiàn)在網(wǎng)頁的柵格化中,還體現(xiàn)在行高（line-height）上，一個網(wǎng)站的文字怎么樣的距離才是最合適閱讀的呢？這個是我一個困擾了很久的問題。

結(jié)果黃金分割很好的解決了我的問題。用中文最常見的12px宋體和14px宋體為例:

最合適閱讀的行高是12像素：12× 1.618=19.4 PX

最合適閱讀的行高是14像素：14× 1.618=22.7 PX

再舉個實際的例子，在豆瓣上目前的行高度是150%，因此12像素宋體是18像素的行高。如果換用1.618的高度。我們對比一下：

非常明顯，下面是最合適閱讀的一種比例。

在一些比例問題上，就討論到這里把。歡迎各抒己見。

原文：http://dreamcog.yo2.cn/articles/%E6%A0%85%E6%A0%BC%E5%8C%96%E7%9A%84%E7%BD%91%E9%A1%B5%E5%B8%83%E5%B1%80%E5%92%8C0618%E7%9A%84%E5%85%B3%E7%B3%BB.html