頁面佈局的幾種方式

基本佈局的幾種方式:

（1）流體佈局：

流佈局與固定寬度佈局基本不一樣點就在於對網站尺寸的測量單位不一樣。固定寬度佈局使用的是像素，可是流佈局使用的是百分比，看到百分比，你應該想到，這將提供了很強的可塑性和流動性。換句話說，經過設置了百分比，你將不須要考慮設備尺寸或者屏幕寬度大小了，結論就是，你能夠爲每種情形找到一種可行的方案，由於你的設計尺寸將適應全部的設備尺寸。流佈局與媒體查詢和優化樣式技術的關係密切。

（2）固定佈局

在固定佈局中，網頁的寬度是必須指定爲一個像素值，通常設爲960像素。在過去，開發人員發現960像素是最適合做爲網格佈局的寬度，由於960能夠整除3，4，5，6，8，10，12和15。儘管到了今天，在web開發中仍是比較廣泛使用固定寬度佈局的，緣由是這種佈局提供很強的穩定性與可控性。若是你知道你的網頁寬度，就能夠兼容全部瀏覽器與設備，你能夠精確地控制圖像位置，就好像一切盡在掌控之中。然而，固定寬度佈局當然有些劣勢，，想建立一個固定寬度佈局網站的開發人員必須意識到網站是否能夠在各式各樣的屏幕，瀏覽器和設備中可用與可見地顯示出來。如今市場上出現如此衆多設備，意味着有各式各樣的屏幕尺寸，對開發人員提出了「一種尺寸適應全部」的技術挑戰，這種挑戰已超越了固定寬度設計的精確度和可控制性。固定寬度的網站出錯的一個常見例子就是小於960像素的屏幕尺寸是很是常見的。這樣網站就不可以全屏顯示了，你將看到一條水平的導航條。事實上,這些小屏幕一般用手指操做,而不是鼠標來控制。

（3）彈性佈局：

彈性佈局跟流佈局很相像，主要不一樣是大小單位。彈性佈局的大小單位不是像素或者百分比，而是em。一個em單位等於定義在CSS規則：font-size的值大小。例如，咱們設置文本的font-size大小爲20像素，那麼1em就等於20px，2em就等於40px，以此類推。這種佈局爲開發人員提供了一種很強的排版控制。因爲絕大多數的佈局主要由文原本填充，此方案使彈性佈局成爲許多項目的強有力的競爭者。然而，仍是存在缺點就是在某些例子中依然出現使人不愉快的水平滾動條。

 

（4）混合佈局

最後介紹這個混合佈局，是上面介紹的兩種或者更多佈局類型的組合。例如，開發人員可能須要設置某些指定元素（側欄或者底部）一個固定寬度，剩下的就選擇百分比或者em。明顯地，這種途徑仍是有劣勢——若是你是指側欄的寬度爲200像素，而後爲剩下的內容設置爲80%的寬度，當屏幕小於1000像素時，你將會看到一條水平滾動條，由於主要的列已經沒有足夠空間容納了。現實中不多狀況,在你的項目只會有一個元素。可是你能夠很容易地解決這些問題,後面咱們將會學習到。

總結：

你可能想知道什麼是最好的解決方案？上面列出的四種類型佈局哪一種纔是最適合做爲響應式解決方案。你或許已經猜到,每一個佈局類型都有其優勢和缺點。這一切都取決於你的需求和項目的特色。這或者很容易導致你認爲，這些佈局之一都是廣泛比其餘的優秀的，但不能認爲它們之間是互斥關係或是競爭對手。相反地,應該考慮技術,能夠結合使用。許多這些技術不可能獨立於其餘技術而存在的。例如，若是沒有定義固定字體大小，em就是沒有意義的。一樣，若是沒有精確寬度來適應流行的屏幕尺寸，媒體查詢也將是無心義的。

參考：http://www.w3cplus.com/responsive/responsive-web-design-fluid-layouts.html