網(wǎng)頁柵格系統(tǒng)研究960的秘密研究網(wǎng)頁柵格系統(tǒng)前，來看一組數(shù)據(jù)：網(wǎng)站首頁頁面寬度pxYahoo!950淘寶950MySpace960新浪950網(wǎng)易960LiveSearch958搜狐950優(yōu)酷960AOL960上面列舉的都是Alexa全球排名前100的站點(diǎn)，它們的首頁寬度為950px/960px。除了微軟的LiveSearch，這些站點(diǎn)有個共同特點(diǎn)：頁面結(jié)構(gòu)較復(fù)雜，都可以認(rèn)為是門戶型網(wǎng)站。再來看看Google，YouTube，F(xiàn)acebook，F(xiàn)lickr!，eBay等知名站點(diǎn)，它們的首頁寬度沒什么固定規(guī)律，共同的特點(diǎn)是：功能專一，頁面結(jié)構(gòu)相對簡單。根據(jù)上面的簡單分析可以認(rèn)為：當(dāng)搭建頁面結(jié)構(gòu)復(fù)雜的門戶型網(wǎng)站時，開發(fā)工程師們不約而同地都選擇將頁面寬度定為950px/960px。這是一件很有趣的事情，為什么要選擇這個寬度呢？這個寬度值究竟有什么魔力？神奇的960設(shè)計師們對蘋果情有獨(dú)衷。在1024x768的分辨率下，翻開Firefox：自然狀態(tài)下，F(xiàn)irefox窗體的大小約為974x650。減掉左右兩邊7px的邊框，網(wǎng)頁的實際大小為上圖中的紅色局部，高寬為960x650。有趣的960就這樣出現(xiàn)了。是的，可以認(rèn)為一切就這么簡單。柵格系統(tǒng)最早出現(xiàn)在平面設(shè)計領(lǐng)域，設(shè)計師們愛用蘋果，蘋果下瀏覽器的默認(rèn)寬度為960px，于是960就這么“自然〞地出現(xiàn)了。數(shù)字背后的微妙上面的“自然〞出現(xiàn)，細(xì)究自然是不讓人信服的。蘋果系統(tǒng)的設(shè)計者們在沒有喝醉酒的情況下選擇了960，而不是其它什么1000之類的整數(shù)，自然另有微妙。科學(xué)界有很多問題都可以歸結(jié)到數(shù)學(xué)問題上，我們也從數(shù)學(xué)著手：960可以分解為2的6次方乘以3和5,這使得960可以分割成以下寬度的整數(shù)倍：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自身〕，我們標(biāo)記為：N(960)=N(2^6*3*5)=26根據(jù)上面的算法，可以得到：N(360)=N(2^3*3^2*5)=22N(480)=N(2^5*3*5)=22N(720)=N(2^4*3^2*5)=28N(750)=N(2*3*5^3)=14N(800)=N(2^5*5^2)=16N(960)=N(2^6*3*5)=26N(1000)=N(2^3*5^3)=14N(1024)=N(2^10)=9N(1440)=N(2^6*3^2*5)=34N(1920)=N(2^7*3*5)=30根據(jù)直覺〔嚴(yán)格證明也不難，不過還是留給數(shù)學(xué)系的學(xué)生去證明吧〕，我們得到一個有趣的結(jié)論：要使得N(width)最大，width的取值有兩個系列：A系列：…,320,720,1440,…B系列：…,480,960,1920,…N越大，可組合的寬度值就越多。對柵格系統(tǒng)來說，這意味著越靈活！目前絕大多數(shù)顯示器都支持1024x768及其以上分辨率。為了有效的利用屏幕寬度同時保證柵格的靈活度，可以看出960是非常適宜的。這樣，在目前主流顯示器下，960就成為網(wǎng)頁柵格系統(tǒng)中的最正確寬度了?！惨苍S不久的將來，將會流行1440〕細(xì)心的你也許會記得，本文開頭列舉的寬度值中，950也出現(xiàn)了好幾次。950是怎么來的？和960是啥關(guān)系？這些疑問，請關(guān)注本系列的下一節(jié)。蛋糕的切法首先澄清一個應(yīng)用場景問題。研究〔2〕中指出，對于結(jié)構(gòu)復(fù)雜的網(wǎng)站，不少設(shè)計師們喜歡采用960固定寬度布局。但要注意的是，960并不是萬能鑰匙，大局部網(wǎng)站沒有也不需要柵格系統(tǒng)。Amazon采用的是寬度自適應(yīng)布局，最大限度的呈現(xiàn)信息。Google更是簡簡單單，主題局部就一個列表。eBay的頁面非常簡潔，商品頁面寬度自適應(yīng)，信息自然流暢，噪音少，購物很踏實。類似的站點(diǎn)還有很多，對于這些站點(diǎn)來說，寬度自適應(yīng)布局更受青睞。有個很有意思的網(wǎng)站是Yahoo!,看起來是固定寬度布局，實際上在CSS中只要去掉一行，就能搖身一變自適應(yīng)寬度了：#page{width:70em;}為什么Yahoo!最后選擇了定寬布局呢？這很可能是因為定寬布局比寬度自適應(yīng)布局更容易控制。對于結(jié)構(gòu)復(fù)雜的網(wǎng)站來說，可維護(hù)性和可擴(kuò)展性非常重要。Yahoo!是以信息展示為主的門戶型網(wǎng)站，960的寬度對于信息的閱讀比擬友善〔JoeClark寫了一篇屏幕閱讀時有關(guān)行長的有趣文章〕。種種因素使得Yahoo!最后采用了定寬布局〔TommyOlsson總結(jié)了每種布局設(shè)計的優(yōu)缺點(diǎn)〕。這里將只關(guān)注定寬布局，適用的場景是搭建復(fù)雜的門戶型網(wǎng)站。對于寬度自適應(yīng)布局和相應(yīng)的柵格系統(tǒng)，暫不討論〔根據(jù)實現(xiàn)的技術(shù)手段不同，寬度自適應(yīng)布局又分為流體布局和彈性布局。我個人蠻喜歡彈性布局，以后有時間再研究〕。好了，已經(jīng)將范圍縮小到定寬布局的網(wǎng)頁柵格系統(tǒng)，那我們開始吧。并不遙遠(yuǎn)的750還記得800×600的顯示器不？雖然才時隔幾年，感覺卻好似是上個世紀(jì)的事了。MarkBoulton做了最早的探索：將750分割成均等的6份，這就形成了柵格系統(tǒng)，稍加組合劃分就形成了兩欄布局和三欄布局。MarkBoulton還研究了Gutter〔垂直欄之間的間隙〕對柵格的影響，有興趣的可以閱讀原文，或者跟著我往下看吧，下面將詳細(xì)闡述。幾個術(shù)語和一個公式一個標(biāo)準(zhǔn)的柵格系統(tǒng)，包括以下局部：將Flowline的總寬度標(biāo)記為W,Column的寬度標(biāo)記為c,Gutter寬度標(biāo)記為g,Margin的寬度標(biāo)記為m,Column的個數(shù)標(biāo)記為N,我們可以得到以下公式：W=c*N+g*(N-1)+2*m一般來說，Gutter的寬度是Margin的兩倍，上面的公式可以簡化為：W=c*N+g*(N-1)+g=(c+g)*N將c+g標(biāo)記為C,公式變得非常簡單：W=C*N上面的公式就是柵格系統(tǒng)的根底，很簡單吧。950的來歷具體應(yīng)用時，Margin其實是一個空白邊，從視覺上看并不屬于總寬度。不少柵格設(shè)計里習(xí)慣性地設(shè)定Gutter為10px,這樣Margin就是5px.當(dāng)W為960，分割成6列時，柵格如下列圖：上圖的處理是左右Margin各為5px.也可以將Margin集中放在一邊，比方右邊：無論Margin放在何處〔這只影響技術(shù)實現(xiàn)，不影響設(shè)計〕，我們真正要關(guān)注的是去除Margin之后的局部：這就是我們要真正關(guān)注的950！將W的含義變?yōu)槿コ齅argin的總寬度，公式變化為：W=N*C–g將上面的公式實例化一下：950=12*80–10950=16*60–10950=24*40–10這就形成了960蛋糕的三種常見切法。12x8016x6024x40上面三種切法，N越大，靈活度越高。可以根據(jù)網(wǎng)頁的實際復(fù)雜度來選用對應(yīng)的切法。在960GridSystem首頁中，展示了12x80的應(yīng)用：我們來看下研究〔1〕中開頭列舉的網(wǎng)站的柵格應(yīng)用情況。Yahoo!是很標(biāo)準(zhǔn)的24x40柵格：淘寶網(wǎng)目前只有商城上局部使用了柵格系統(tǒng)〔大的兩欄布局遵守了24x40的柵格化，主體局部使用的另一套740的柵格劃分〕：網(wǎng)易很不錯，采用的是16x60的柵格系統(tǒng)：研究〔1〕中的其它站點(diǎn)都沒有真正嚴(yán)格地采用柵格系統(tǒng)。柵格系統(tǒng)的優(yōu)勢上面的“發(fā)現(xiàn)〞是讓人有點(diǎn)沮喪的。目前嚴(yán)格采用柵格系統(tǒng)的站點(diǎn)非常少，為什么我們還要努力的讓網(wǎng)頁柵格化呢？柵格系統(tǒng)具有以下優(yōu)勢：1.能大大提高網(wǎng)頁的標(biāo)準(zhǔn)性。在柵格系統(tǒng)下，頁面中所有組件的尺寸都是有規(guī)律的。這對于大型網(wǎng)站的開發(fā)和維護(hù)來說，能節(jié)約不少本錢。2.基于柵格進(jìn)行設(shè)計，可以讓整個網(wǎng)站各個頁面的布局保持一致。這能增加頁面的相似度，提升用戶體驗。3.對于設(shè)計師們來說，靈活地運(yùn)用柵格系統(tǒng)，能做出很多優(yōu)秀和獨(dú)特的設(shè)計?！苍斠?超越CSS?一書〕對于大型網(wǎng)站來說，我相信柵格化將是一種潮流和趨勢。下面討論柵格系統(tǒng)中的黃金分割。黃金分割黃金分割可以歸結(jié)為數(shù)學(xué)問題：對于長度為1的線段，將其分成兩局部x和1-x,使得：x/1=(1-x)/x化為簡單的二次方程：x^2+x-1=0正數(shù)解為：x=(sqrt(5)-1)/2~=0.618這就是黃金分割。這個比例不僅僅出現(xiàn)在諸如繪畫、雕塑、音樂、建筑等藝術(shù)領(lǐng)域，在管理、工程設(shè)計等方面也有著不可無視的作用?！策@是個自然界的魔數(shù)，類似的還有真空光速、普朗克常數(shù)、精細(xì)結(jié)構(gòu)等等，感興趣的Google吧〕在平面設(shè)計領(lǐng)域，黃金分割點(diǎn)被廣泛采用。比方下面這種圖：數(shù)一數(shù)上面有多少黃金分割？960柵格，實際寬度是950.對于24x40的情景，最接近黃金分割的兩欄布局是350:590,欄數(shù)比例為9:15:但實際使用時，因為窄欄經(jīng)常用來做導(dǎo)航或放輔助信息，并不需要350px這么寬。因此實際情況下經(jīng)常被采用的布局是：上面講的都是寬度方向上的柵格化，下面我們看看高度方向上如何應(yīng)用。高度方向上的柵格還記得研究〔1〕中那張紅紅的很刺眼的圖嗎？注意高度值560也是很神奇的。N(560)=N(2^4*5*7)=18560/960~=0.583N(560)比擬大，同時可以讓高寬比接近黃金分割。針對560,我們采用14x40柵格：這樣，我們就在寬度和高度兩個方向上都實現(xiàn)了柵格化。然而，柵格化真的就這么簡單嗎？請關(guān)注下一篇，我們將詳細(xì)探討柵格化的粒度問題。粒度問題研究〔2〕中討論了柵格系統(tǒng)的根底知識。這一篇將集中探討柵格系統(tǒng)的粒度問題。〔注：如非特別指明，柵格系統(tǒng)均指24列960柵格系統(tǒng)〕淘寶的首頁〔截圖〕目前尚未嚴(yán)格遵守柵格系統(tǒng)，如果重構(gòu)的話，寬度方向可以考慮采用下面的柵格布局〔只考慮頁面主體局部，忽略高度的比例〕：紛亂的高度世界我們來看下列圖1左上角。左上角局部目前的寬度為256px,重構(gòu)的話可以將寬度縮小到230px以符合柵格〔不可防止的要調(diào)整內(nèi)容，比方人氣寶貝中將只能放下3張圖片〕。來仔細(xì)看下高度方向：高度方向的布局是：90:117:100,第一個間隔是8,總高度為325.很明顯，高度方向沒有任何柵格化的跡象。實際上，即便是嚴(yán)格遵守柵格系統(tǒng)的Yahoo!首頁，高度方向上也沒有嚴(yán)格柵格化。這究竟是為何？一切皆有可能我們縮小關(guān)注點(diǎn)：上圖中，圖像的大小是70x70,剛好是24列960柵格系統(tǒng)兩列的寬度。對于右邊的文字，采取了如下樣式：font-size:12px;line-height:150%;/*12x150%=18px*/中文字體是宋體，line-height的計算值是18px.注意圖3中文字局部可視區(qū)域的高度為65,上下各有4px和1px的間隙。為什么會產(chǎn)生這么奇怪的間隙呢？我們來看下列圖：從上圖中我們可以得知，12px的宋體中文字，實際高度只有11px.line-height減去11多出來的高度，那么“均勻〞分布在上下間隙中〔如果多出來的高度為偶數(shù)，那么上下均分；為奇數(shù)時，上面比下面多1px〕。這樣，對于70px的高度來說，要布局4行文字時，假設(shè)行高多出來的上半局部為x,下半局部為y,在最理想的情況下，應(yīng)該滿足以下公式：11*4+4*x+3*y=70x=y或x=y+1不難推出，x最理想的整數(shù)解為4.從而line-height為4+11+3=18.因此：對于24列960柵格系統(tǒng)來說，如果要在高度方向上實現(xiàn)柵格，font-size為12px時，line-height的最正確取值是18px(150%).追求完美點(diǎn)話，還可以將文字局部margin-top:-1px,使得65上下的間隙為3和2.至此，我們可以初步判斷：高度方向上是有可能嚴(yán)格柵格化的。一切皆有可能！然而，現(xiàn)實總那么殘酷上圖中的標(biāo)題高度為22,這在24列960柵格系統(tǒng)中是無法對齊的。而且總高度為100,在24列960柵格系統(tǒng)中也不存在〔110才可以〕?；蛟S高度方向上我們可以細(xì)化行寬為20,但依舊沒法解決上面兩個問題〔22是明顯不能解決的，而對于100px的高度，也無法通過細(xì)化行寬來解決?？蛇x高度永遠(yuǎn)是10的奇數(shù)倍，如果進(jìn)一步細(xì)化，小于10后，會變得非常繁瑣，沒什么實際應(yīng)用價值〕寬度世界里會好些嗎上面是Yahoo!首頁上的兩個小模塊，我都不想去標(biāo)注模塊里面的布局寬度了〔因為一點(diǎn)都不符合24列960柵格系統(tǒng)〕。寬度世界里，和高度世界一樣充滿希望但現(xiàn)實卻殘酷無比。銀彈是不存在的柵格系統(tǒng)是美好的。但如果我們一味地追求將所有設(shè)計都柵格化〔必須成認(rèn)我曾有這個夢想〕，那么立刻會陷入地獄一般的黑暗中。這篇文章中的艱難嘗試〔我分析了20多個小模塊〕，讓我突然醒悟到一個粒度問題：任何設(shè)計都有適用范圍，超出最正確適用范圍，強(qiáng)行使用只會帶來無盡的煩惱。對于柵格系統(tǒng)〔這里指所有柵格系統(tǒng)，包括多種柵格系統(tǒng)混合使用的情景〕來說，我覺得以下場景非常適合：1.頁面的總體寬度布局，比方兩欄、三欄等布局2.一些固定區(qū)塊的尺寸，比方廣告圖片的尺寸3.區(qū)塊之間的間距，可以參考柵格系統(tǒng)的槽寬〔Gutter〕4.一些可以柵格化的小區(qū)域，比方圖3中的例子，暗合柵格往往能簡化布局上的考慮除了上面這些應(yīng)用場景，強(qiáng)行使用柵格系統(tǒng)，往往會束手束腳，適得其反。這篇文章的目的，就是嘗試用最啰嗦最費(fèi)心貌似很科學(xué)實際很無聊的分析來指出柵格系統(tǒng)應(yīng)用時的粒度問題。在粒度問題上達(dá)成一致后，下一篇中我們將討論柵格系統(tǒng)的技術(shù)實現(xiàn)，最后一篇那么討論柵格系統(tǒng)的壓軸好戲：模塊化開發(fā)。技術(shù)實現(xiàn)前三篇文章中，明確了柵格系統(tǒng)的設(shè)計細(xì)節(jié)和適用范圍。這一篇將集中討論960柵格系統(tǒng)的技術(shù)實現(xiàn)。Blueprint的實現(xiàn)Blueprint是一個完整的CSS框架，柵格系統(tǒng)是它的一局部功能。我們來看demo頁面：以上三欄布局的代碼為：<styletype="text/css">.container{margin:0auto;width:950px}.span-8{float:left;margin-right:10px}div.last{margin-right:0}hr{clear:both;height:0;border:none}</style><divclass="container"><divclass="span-8"></div><divclass="span-8"></div><divclass="span-8last"></div><hr/></div>上面是根本功能，Blueprint還支持append-n,prepend-m,border等“高級〞功能，這些就不細(xì)說了。Blueprint的特點(diǎn)簡單總結(jié)如下：1.采用浮動來實現(xiàn)布局，簡單明了2.950兩側(cè)沒有margin,最后一列的class需要加上last3.采用額外標(biāo)簽來去除浮動960.gs的實現(xiàn)談到960柵格系統(tǒng)，不得不提960.gs.NathanSmith在這篇文章中，詳細(xì)闡述了他的想法和設(shè)計思路。這里有個demo頁面，核心代碼很簡單：<styletype="text/css">.container_12{margin:0auto;width:960px}.grid_4{float:left;margin:010px}</style><divclass="container_12"><divclass="grid_4"></div><divclass="grid_4"></div><divclass="grid_4"></div><divclass="clear"></div></div>上面就構(gòu)建了三欄布局：有意思的幾點(diǎn)：1.margin是均勻放在950兩側(cè)的2.所有g(shù)rid除了寬度不同，左右邊距都一致margin:010px;3.代碼簡單清晰，起始和結(jié)束列不需要添加額外class很明顯，Blueprint和960.gs都是采用浮動來實現(xiàn)布局的，主容器需要添加額外標(biāo)簽來去除浮動〔可以參考這里〕。當(dāng)然，這也不是什么大問題，請看這篇文章的總結(jié)，不添加額外標(biāo)簽也可以去除浮動。YUI的實現(xiàn)接著來看大名鼎鼎的YUIGridsCSS.YUI的CSS框架由三個文件組成：reset.css-樣式重置fonts.css-版式字體控制grids.css-柵格系統(tǒng)我們從demo開始：注意，demo鏈接中的寬度是750的，但我們只要將<divid="doc"></div>中的id改為doc2,頁面寬度就自動變?yōu)?50寬了〔YUI非常強(qiáng)大^o^〕。來看下dom結(jié)構(gòu)：采用的也是浮動布局，簡化后的CSS代碼為：<styletype="text/css">.doc2{margin:auto;width:73.076em}.yui-u{float:left;margin-left:1.99%;width:32%}div.first{margin-left:0}#ft{clear:both}</style>YUI的特點(diǎn)是：1.依舊是采用浮動布局，槽〔Gutter〕寬通過margin-left來控制〔Blueprint采用右邊距，960.gs采用均分，這三個框架對槽的處理實在有意思〕2.總寬度采用em,這樣可以用在彈性布局上3.欄的布局用的是百分比，采用了流體布局YUI的好處是能用來做自適應(yīng)布局，在這前面兩個框架里是沒有的。但普通的定寬布局，YUI那么顯得有點(diǎn)麻煩，比方我們要實現(xiàn)四欄布局，dom得這樣寫：先來兩個兩欄布局，再細(xì)分為四欄布局，清晰度上欠佳。更多柵格實現(xiàn)柵格化更多是一種布局思想，實現(xiàn)技術(shù)可以千差萬別。比方今年冒出來的偽絕對定位，立刻就可以用來實現(xiàn)柵格系統(tǒng)。明城兄弟就嘗試了一把。肯定還有非常多的柵格化實現(xiàn)方案，這里就不一一挖掘了。雙飛翼柵格系統(tǒng)挺奇怪這個名字？請先閱讀這篇文章：漸進(jìn)增強(qiáng)式布局探討.簡單說，雙飛翼布局是一種布局實現(xiàn)技術(shù)，可以利用它來實現(xiàn)一整套柵格系統(tǒng)。先看test頁面：GridsLayoutTest.具體技術(shù)細(xì)節(jié)在漸進(jìn)增強(qiáng)式布局探討一文中已經(jīng)闡述，這里不再重復(fù)。有幾點(diǎn)需要說明：1.這套柵格系統(tǒng)并不能實現(xiàn)所有布局。這和YUIGrids類似，只能實現(xiàn)預(yù)定的一些布局。比方三欄布局，目前只參加了5:13:6,5:12:7,9:9:6,8:8:8四種情況，這是從淘寶的現(xiàn)有頁面中分析總結(jié)出來的。對于同一個站點(diǎn)來說，太多不同的三欄比例不是好事〔淘寶目前都有點(diǎn)多，以后可能還會進(jìn)一步統(tǒng)一〕。因此如果采用這套柵格系統(tǒng)的話，需要先分析站點(diǎn)，定義出一套適宜的比例。這里有個所有比例的自動生成工具：