成了960蛋糕的三種常見切法。
12 x 80
16 x 60
24 x 40
上面三種切法，N越大，靈活度越高。可以根據網頁的實際復雜度來選用對應的切法。在960 Grid System首頁中，展示了12 x 80的應用：
我們來看下 研究(1)中開頭列舉的網站的柵格應用情況。
Yahoo!是很標準的 24 x 40 柵格：
淘寶網目前只有商城上部分使用了柵格系統(大的兩欄布局遵守了 24 x 40 的柵格化，主體部分使用的另一套740的柵格劃分)：
網易很不錯，采用的是 16 x 60 的柵格系統：
研究(1)中的其它站點都沒有真正嚴格地采用柵格系統。
柵格系統的優勢
上面的“發現”是讓人有點沮喪的。目前嚴格采用柵格系統的站點非常少，為什么我們還要努力的讓網頁柵格化呢?
柵格系統具有以下優勢：
能大大提高網頁的規范性。在柵格系統下，頁面中所有組件的尺寸都是有規律的。這對于大型網站的開發和維護來說，能節約不少成本。
基于柵格進行設計，可以讓整個網站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。
對于設計師們來說，靈活地運用柵格系統，能做出很多優秀和獨特的設計。(詳見《超越CSS》一書)
對于大型網站來說，我相信柵格化將是一種潮流和趨勢。
下面討論柵格系統中的黃金分割。
黃金分割
黃金分割可以歸結為數學問題：對于長度為1的線段，將其分成兩部分 x 和 1 - x, 使得：
x / 1 = (1 - x) / x
化為簡單的二次方程：
x^2 + x - 1 = 0
正數解為：
x = (sqrt(5) - 1) / 2 ~= 0.618
這就是黃金分割。這個比例不僅僅出現在諸如繪畫、雕塑、音樂、建筑等藝術領域，在管理、工程設計等方面也有著不可忽視的作用。 (這是個自然界的魔數，類似的還有真空光速、普朗克常數、精細結構等等，感興趣的Google吧)
在平面設計領域，黃金分割點被廣泛采用。比如下面這種圖：
數一數上面有多少黃金分割?
對于960柵格，實際寬度是950. 兩欄布局時，黃金分割為：
對于 24 x 40 的情景，最接近黃金分割的兩欄布局是 350 : 590, 欄數比例為 9 : 15. 但實際使用時，因為窄欄經常用來做導航或放輔助信息，并不需要350px這么寬。因此實際情況下經常被采用的布局是：
上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應用。
高度方向上的柵格
還記得研究(1)中那張紅紅的很刺眼的圖嗎?注意高度值560也是很神奇的。
N(560) = N(2^4 * 5 * 7) = 18
560 / 960 ~= 0.583
N(560)比較大，同時可以讓高寬比接近黃金分割。針對560, 我們采用 14 x 40 柵格：
這樣，我們就在寬度和高度兩個方向上都實現了柵格化。
淘寶的首頁目前尚未嚴格遵守柵格系統，如果重構的話，寬度方向可以考慮采用下面的柵格布局（只考慮頁面主體部分，忽略高度的比例）：
（圖1）
紛亂的高度世界我們來看下圖1左上角。左上角部分目前的寬度為256px, 重構的話可以將寬度縮小到230px以符合柵格（不可避免的要調整內容，比如人氣寶貝中將只能放下3張圖片）。來仔細看下高度方向：
（圖2）
高度方向的布局是：90 : 117 : 100, 第一個間隔是8, 總高度為325. 很明顯，高度方向沒有任何柵格化的跡象。實際上，即便是嚴格遵守柵格系統的Yahoo!首頁，高度方向上也沒有嚴格柵格化。
這究竟是為何？
一切皆有可能我們縮小關注點：
（圖3）
上圖中，圖像的大小是70 x 70, 剛好是24列960柵格系統兩列的寬度。對于右邊的文字，采取了如下樣式：font-size: 12px;line-height: 150%; /* 12 x 150% = 18px */
中文字體是宋體，line-height的計算值是18px. 注意圖3中文字部分可視區域的高度為65, 上下各有4px和1px的間隙。為什么會產生這么奇怪的間隙呢？我們來看下圖：
（圖4）
從上圖中我們可以得知，12px的宋體中文字，實際高度只有11px. line-height減去11多出來的高度，則“均勻”分布在上下間隙中（如果多出來的高度為偶數，則上下均分；為奇數時，上面比下面多1px）。這樣，對于70px的高度來說，要布局4行文字時，假設行高多出來的上半部分為x, 下半部分為y, 在最理想的情況下，應該滿足以下公式：11 * 4 + 4 * x + 3 * y = 70x = y 或 x = y + 1
不難推出，x最理想的整數解為4. 從而line-height為 4 + 11 + 3 = 18. 因此：
對于24列960柵格系統來說，如果要在高度方向上實現柵格，font-size為12px時，line-height的最佳取值是18px(150%).
追求完美點話，還可以將文字部分margin-top: -1px, 使得65上下的間隙為3和2.
至此，我們可以初步判斷：
高度方向上是有可能嚴格柵格化的。一切皆有可能！
然而，現實總那么殘酷
（圖5）
上圖中的標題高度為22, 這在24列960柵格系統中是無法對齊的。而且總高度為100, 在24列960柵格系統中也不存在（110才可以）。或許高度方向上我們可以細化行寬為20, 但依舊沒法解決上面兩個問題（22是明顯不能解決的，而對于100px的高度，也無法通過細化行寬來解決。可選高度永遠是10的奇數倍，如果進一步細化，小于10后，會變得非常繁瑣，沒什么實際應用價值）寬度世界里會好些嗎
（圖6）
上面是Yahoo!首頁上的兩個小模塊，我都不想去標注模塊里面的布局寬度了（因為一點都不符合24列960柵格系統）。寬度世界里，和高度世界一樣充滿希望但現實卻殘酷無比。銀彈是不存在的柵格系統是美好的。但如果我們一味地追求將所有設計都柵格化（必須承認我曾有這個幻想），則立刻會陷入地獄一般的黑暗中。這篇文章中的艱難嘗試（我分析了20多個小模塊），讓我突然醒悟到一個粒度問題：任何設計都有適用范圍，超出最佳適用范圍，強行使用只會帶來無盡的煩惱。對于柵格系統（這里指所有柵格系統，包括多種柵格系統混合使用的情景）來說，我覺得以下場景非常適合：
頁面的總體寬度布局，比如兩欄、三欄等布局
一些固定區塊的尺寸，比如廣告圖片的尺寸
區塊之間的間距，可以參考柵格系統的槽寬（Gutter）
一些可以柵格化的小區域，比如圖3中的例子，暗合柵格往往能簡化布局上的考慮
除了上面這些應用場景，強行使用柵格系統，往往會束手束腳，適得其反。這篇文章的目的，就是嘗試用最啰嗦最費神貌似很科學實際很無聊的分析來指出柵格系統應用時的粒度問題。在粒度問題上達成一致后，下一篇中我們將討論柵格系統的技術實現，最后一篇則討論柵格系統的壓軸好戲：模塊化開發。
前三篇文章中，明確了柵格系統的設計細節和適用范圍。這一篇將集中討論960柵格系統的技術實現。
Blueprint的實現Blueprint是一個完整的CSS框架，柵格系統是它的一部分功能。我們來看demo頁面：
以上三欄布局的代碼為：<style type="text/css"> .買粉絲ntainer { margin: 0 買粉絲; width: 950px } .span-8 { float: left; margin-right: 10px } div.last { margin-right: 0 } hr { clear: both; height: 0; border: none }</style><div class="買粉絲ntainer"> <div class="span-8"></div> <div class="span-8"></div> <div class="span-8 last"></div> <hr /></div>
上面是基本功能，Blueprint還支持append-n, prepend-m, border等“高級”功能，這些就不細說了
其實今天安徽碼農科技之所以寫這個響應式網站是因為近兩年響應式網站確實很火，很多客戶通過業務員的介紹感覺神乎其神，甚至網站業務員說得自己都相信了，把自己都騙了，覺得響應式無所不能，非常完美。其實響應式并不是沒有缺點，準確的說也有很多致命的缺點。
什么是響應式網站?
響應網站設計應根據用戶使用的設備的分辨率大小進行相應的響應與調整，最大限度滿足不同設備用戶體驗需求。響應式網站設計就是一個網站能夠兼容多個終端，不需要為每個終端做一個特定的版本。簡單地理解：一個響應式網站＝手機網站＋pad端網站＋PC網站。具體的實現方式由多方面決定，包括彈性網格、彈性圖片、CSS媒體查詢（media query）的使用等。
彈性網格（flexible grids）
可基于屏幕分辨率擴展或拉伸內容。
彈性圖片（flexible grids）
在小屏幕上可縮小尺寸，并可擴展大最大尺寸以支持大屏幕。
媒體查詢（media queries）
是放在站點HTML和樣式表中的代碼段，用來收集設備顯示能力的信息以支持多種形式的界面。
下面安徽碼農科技就給大家總結一下響應式網站的優缺點吧 。
響應式網站優點
1:用戶體驗友好
隨著電腦尺寸多元化，智能設備（pad/智能手機）普及化，在當下追求用戶體驗至上的時代（2016年），之前網站普遍使用固定的寬度（960px或1000px）逐漸滿足不了現在不同設備與不同分辨率需求。在高分辨率電腦寬屏顯示器上，兩邊留白過多。在手機上顯示，內容顯示過小，用戶為了看清楚，首先需要放大界面，再左右拖拖界面。響應式網站可以根據不同終端、不同尺寸和不同應用環境，自動調整界面布局、展示內容、內容大小，提供非常好視覺展示效果，一致性友好體驗。
2:SEO友好
由于響應網站在不同終端有友好的界面展示效果，用戶可以與網站一直保持聯系，比如URL不變積累分享；通過單一的URL地址收集所有的社交分享鏈接最佳化搜索用引擎。搜索引擎也在變得越來越聰明，它們足夠智能可以完成移動網站和桌面網站的連接。
3:多個網站只需一個后臺即可完成全部網站維護，無需額外增加負擔。說到這里你也許會說不做響應式的網站，做個手機站也可以數據同步，一個后