有些時候，在網(wǎng)站建設(shè)時使用流動網(wǎng)頁設(shè)計確實(shí)有很多好處，但也只是在正確使用的時候這些技巧才會讓網(wǎng)頁在屏幕大小不同以及移動終端上有良好的表現(xiàn)，而糟糕的代碼結(jié)構(gòu)，對流動布局來說是非常不利的。所以，網(wǎng)站建設(shè)者需要針對流動設(shè)計的弊端探索可行的解決方法。

　　在這篇文章中，凡科建站將會介紹怎么創(chuàng)造百分百自適應(yīng)屏幕分辨率css布局的有效方法。

　　首先，使用網(wǎng)格流動布局。大部分的建站者都會聽過設(shè)計固定寬度的960網(wǎng)格系統(tǒng)，通過960網(wǎng)格系統(tǒng)的寬度設(shè)計要比流動布局更加可取。但是，還有另外的方法可以搭建一個以網(wǎng)格為基礎(chǔ)的彈性布局，從技術(shù)角度看，彈性布局的代碼有別于流動布局，可是它可以給用戶提供基本上相同的效果。

　　是什么流動布局呢？流動網(wǎng)格是指通過智能使用div、數(shù)學(xué)計算以及百分比來創(chuàng)建的。這種布局的理念源于Ethan Marcotte，其理念主要利用相對尺寸、結(jié)合百分比以及em，通過簡單的分割尋找到相對應(yīng)的寬度，而這個寬度會應(yīng)用在固定寬度設(shè)計中。

　　流動布局的優(yōu)點(diǎn)是：它可以讓你的網(wǎng)站擁有一個網(wǎng)格布局，而且只需要固定一次寬度；用戶能夠通過預(yù)設(shè)的字體大小查看布局，而且保持它的比例大?。涣鲃硬季诌€能跨瀏覽器兼容，而且一旦出現(xiàn)問題也將非常容易修復(fù)。

　　搭建流動布局的第一步是創(chuàng)建首選固定寬度的模擬，這樣網(wǎng)站建設(shè)者就能夠看到它的比例，然后就可以使用比例、平衡、間距等技巧。

　　從這個簡單的布局中，我們可以得出960px是固定的寬度，對于所有小于這個分辨率的屏幕，我們需要水平滾動條出現(xiàn)，而內(nèi)容在一個880px的wrapper中，兩側(cè)有40px的margin，元素之間有20px的間距。