前段時間在網絡上(shàng)發現最近網絡上(shàng)開(kāi)始有(yǒu)很多人(rén)在討(tǎo)論栅格化的(de)網頁布局，嗯。我也(yě)先介紹一下網頁栅格化的(de)布局情況吧(ba)。

最早提出網頁栅格化的(de)設計(jì)的(de)人(rén)我忘記是誰了，但(dàn)是應該是網頁還停留在780寬度的(de)時候就聽說過栅格化的(de)問題。從taobao ued的(de)博客了解到(dào)

“1692年，新登基的(de)法國國王路(lù)易十四感到(dào)法國的(de)印刷水(shuǐ)平強差人(rén)意，因此命令成立一個(gè)管理(lǐ)印刷的(de)皇家特别委員會(huì)。他(tā)們的(de)首要任務是設計(jì)出科學的(de)、合理(lǐ)的(de)， 重視功能(néng)性的(de)新字體。委員會(huì)由數學家尼古拉斯加宗（Nicolas Jaugeon）擔任領導，他(tā)們以羅馬體爲基礎，采用(yòng)方格爲設計(jì)依據，每個(gè)字體方格分(fēn)爲64個(gè)基本方各單位，每個(gè)方各單位再分(fēn)成36個(gè)小(xiǎo)格，這樣，一個(gè)印 刷版面就有(yǒu) 2304個(gè)小(xiǎo)格組成，在這個(gè)嚴謹的(de)幾何網格網絡中設計(jì)字體的(de)形狀，版面的(de)編排，試驗傳達功能(néng)的(de)效能(néng)，這是是世界上(shàng)最早對字體和(hé)版面進行(xíng)科學實驗的(de)活動，也(yě) 是栅格系統最早的(de)雛形。”

嗯。簡單說來，網頁栅格化解決的(de)問題即是網頁如(rú)何能(néng)最多的(de)分(fēn)割成爲各種整數寬度的(de)問題。。通過看上(shàng)面的(de)圖片大(dà)家應該基本可(kě)以了解到(dào)什(shén)麽是網頁栅格化的(de)設計(jì)，以上(shàng)是950寬度的(de)網頁設計(jì)。如(rú)果把30作爲每個(gè)單獨的(de)單元格的(de)寬度，10作爲每個(gè)單元格之間的(de)寬度。那麽950恰好可(kě)以分(fēn)成24個(gè)小(xiǎo)列，每個(gè)間隔10像素。

結果黃(huáng)金(jīn)分(fēn)割很好的(de)解決了我的(de)問題。用(yòng)中文(wén)最常見的(de)12px宋體和(hé)14px宋體爲例:

最合适閱讀(dú)的(de)行(xíng)高(gāo)是12像素：12× 1.618=19.4 PX

最合适閱讀(dú)的(de)行(xíng)高(gāo)是14像素：14× 1.618=22.7 PX

再舉個(gè)實際的(de)例子，在豆瓣上(shàng)目前的(de)行(xíng)高(gāo)度是150%，因此12像素宋體是18像素的(de)行(xíng)高(gāo)。如(rú)果換用(yòng)1.618的(de)高(gāo)度。我們對比一下：

因此，這個(gè)就是網頁栅格化最簡單的(de)一個(gè)解釋了。下面我想說另外一個(gè)問題，即使黃(huáng)金(jīn)分(fēn)割。

在一些比例問題上(shàng)，就討(tǎo)論到(dào)這裏把。歡迎各抒己見。
把一條線段分(fēn)割爲兩部分(fēn)，使其中一部分(fēn)與全長之比等于另一部分(fēn)與這部分(fēn)之比。其比值是[5^(1/2)-1]/2，取其前三位數字的(de)近似值是0.618。由于按此比例設計(jì)的(de)造型十分(fēn)美(měi)麗(lì)，因此稱爲黃(huáng)金(jīn)分(fēn)割，也(yě)稱爲中外比。這是一個(gè)十分(fēn)有(yǒu)趣的(de)數字，我們以0.618來近似，通過簡單的(de)計(jì)算就可(kě)以發現：

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

這個(gè)數值的(de)作用(yòng)不僅僅體現在諸如(rú)繪畫、雕塑、音(yīn)樂(yuè)、建築等藝術(shù)領域，而且在管理(lǐ)、工(gōng)程設計(jì)等方面也(yě)有(yǒu)著(zhe)不可(kě)忽視的(de)作用(yòng)。

如(rú)果細心一些的(de)人(rén)會(huì)發現，黃(huáng)金(jīn)分(fēn)割無所不在，包括拍(pāi)張照(zhào)片人(rén)物(wù)放(fàng)在畫面的(de)黃(huáng)金(jīn)分(fēn)割點上(shàng)也(yě)是一種很好的(de)構圖方法。因此，黃(huáng)金(jīn)分(fēn)割是一種公認最優秀的(de)分(fēn)割比例。

因此如(rú)果以一個(gè)950寬度的(de)網頁爲例。最合适的(de)分(fēn)割比例其實是。

左側：950× 0.618 = 587

右側：950 × 0.382 =363

個(gè)人(rén)覺得黃(huáng)金(jīn)比例分(fēn)割比栅格化靠譜很多，但(dàn)是如(rú)果是一個(gè)門戶網站，需要很多的(de)小(xiǎo)區塊分(fēn)割的(de)網站，你(nǐ)要考慮倒栅格化的(de)化，即是爲了以後再分(fēn)割考慮的(de)化，那兩列的(de)比例也(yě)應該是最接近的(de)應該是590像素和(hé)360像素。

爲什(shén)麽呢？

590 = 14 × (30+10) + 30

360 = 9 × (30+10)

其實這個(gè)比例已經幾乎等于黃(huáng)金(jīn)分(fēn)割。因此這樣的(de)使用(yòng)比較好。

同時，黃(huáng)金(jīn)分(fēn)割不僅僅體現在網頁的(de)栅格化中,還體現在行(xíng)高(gāo)（line-height）上(shàng)，一個(gè)網站的(de)文(wén)字怎麽樣的(de)距離(lí)才是最合适閱讀(dú)的(de)呢？這個(gè)是我一個(gè)困擾了很久的(de)問題。