第一期 柵(zha)格(ge)

　　我們先來(lai)看一下(xia)shopping.naver的首頁

　　從上(shang)面可以看出來，naver是按照(zhao)一(yi)個固定的(de)柵格來進行(xing)擴展的(de)，那么他的(de)區塊為多大呢?

　　對各(ge)個區塊進行測量：

　　從上面測量出來(lai)的區塊大(da)小來(lai)看，他都是按照一個210x290為標準(zhun)的柵格塊來(lai)對各個版塊進行區分

　　分(fen)為塊狀結構后，不(bu)僅使整(zheng)個(ge)頁面的(de)(de)區(qu)塊更加明顯(xian)，內容(rong)更有(you)條(tiao)理和清(qing)晰外(wai)，同時(shi)還平衡(heng)了每(mei)塊內容(rong)區(qu)的(de)(de)比(bi)重，無論(lun)在哪一(yi)屏，都擁(yong)有(you)了強(qiang)烈(lie)的(de)(de)一(yi)致性，同時(shi)，還有(you)一(yi)個(ge)非常明顯(xian)的(de)(de)好(hao)處 ，那就是～～

　　我(wo)們來(lai)看(kan)一下小的(de)分辨率下頁面的(de)布局吧

　　是不(bu)是，感覺非(fei)常(chang)靈活和(he)自(zi)然，無論是在(zai)哪(na)種屏幕分辨率下，他都進行了自(zi)然的(de)(de)重組和(he)排序，而且對于(yu)內容上(shang)也沒有(you)絲毫(hao)的(de)(de)影響，不(bu)必考慮太多對于(yu)響應式實現(xian)(xian)的(de)(de)過多準備，表現(xian)(xian)非(fei)常(chang)棒!!

　　看(kan)完(wan)了shopping.naver的(de)柵(zha)(zha)(zha)格，想(xiang)必大家現在(zai)第一(yi)(yi)反應就是(shi)想(xiang)到了我們一(yi)(yi)淘的(de)網站(zhan)，目前(qian)一(yi)(yi)淘網站(zhan)特別是(shi)首頁，的(de)確是(shi)沒有應于任何柵(zha)(zha)(zha)格，只做(zuo)了一(yi)(yi)些基(ji)準的(de)對(dui)(dui)齊(qi)和小范圍的(de)柵(zha)(zha)(zha)格。通過對(dui)(dui)shopping.naver的(de)柵(zha)(zha)(zha)格分(fen)析，我對(dui)(dui)一(yi)(yi)淘的(de)網站(zhan)柵(zha)(zha)(zha)格也(ye)做(zuo)了shopping.naver同樣的(de)標準化(hua)柵(zha)(zha)(zha)格實(shi)驗(yan)。

　　按照目前寬度為990的(de)話(hua)，通(tong)過計算，會發(fa)現，190也同樣是一個神奇的(de)數字(zi)，在990下，我們以naver寬度比例來假定一淘網站(zhan)的(de)柵格(ge)比例

　　以(yi)190x270為一(yi)個基本柵格(ge)單元(yuan)格(ge)

　　我們先(xian)按(an)照shopping.naver的版式，以990的寬度(du)對etao.com進行(xing)柵格(ge)劃分(fen)

　　可以看(kan)到，我們的網站也可以像naver一(yi)樣進(jin)行(xing)完美柵(zha)格(ge)劃分(fen)

　　那(nei)么～～～

　　是(shi)不是(shi)同(tong)樣的說，我們也可以像naver一(yi)樣對版塊(kuai)進行流暢移(yi)動，處(chu)理不同(tong)屏幕分辨率下(xia)網(wang)站的顯示結構