關于web頁面布局，首先簡單了解一下固定布局(fixed layout)、流體布局(fluid layout)、彈性布局(elastic layout)、響應布局(responsive layout)和相應的使用技巧？

?

固定布局(fixed layout)

固定布局，例如豆瓣網(wǎng)，無論如何change瀏覽器的寬度，頁面主體區(qū)域的寬度是固定不變了，里面的內(nèi)容布局也是打死不動的；

利

任意瀏覽器下的顯示寬度都一樣，對于圖像、表單、視頻等寬度固定的內(nèi)容，潛在的沖突更少（設計師看到什么，用戶看到的就是什么）。

不用設定min-width（最小寬度）和max-width（最大寬度），這兩個屬性并不被所有瀏覽器支持。

即使網(wǎng)頁被設計成兼容最小屏幕分辨率800×600的大小，在大分辨率顯示器下，內(nèi)容仍然足夠易讀。

弊

固定寬度的布局可能會給高分辨率屏幕用戶帶來巨大的頁面空白，從而破壞“神圣比例”、“三分割法則”、整體平衡，乃至其他設計原則。

小屏幕上可能會出現(xiàn)水平滾動條，影響用戶體驗。

無縫材質(zhì)拼圖，紋樣和其他連續(xù)圖像需要針對大分辨率做出優(yōu)化。

總體來說，固定寬度的可用性更低。

使用技巧：

• 1024×768以及更高分辨率的屏幕選擇960px作為網(wǎng)頁內(nèi)容主容器的像素寬度，還能有一點留白。而800×600分辨率下的主容器最佳顯示寬度是760px，設置成這一寬度能夠照顧到那10%，而較大屏幕上看起來也還不賴。
• 固定寬度設計，務必保證主容器居中對齊，以保持平衡（一般利用margin: 0 auto;就可以了）。

?

?

流體布局(fluid layout)

流體布局，也稱為自適應布局布局，寬度使用了百分比寬度來適應不同屏幕分辨率，高度大都是用px來固定住。例如google analytics，當你change瀏覽器的寬度，顯示區(qū)域也會如同水流般自適應于顯示器的寬度顯示（瀏覽器寬度變一點，web頁面寬度也跟著變一點），主體結構布局不變。開發(fā)中一般通過調(diào)整內(nèi)容區(qū)塊的寬度來適應，或調(diào)整空白區(qū)域大小來適應不同分辨率。

利

流動網(wǎng)頁布局擁有更強的親和力，因為它能根據(jù)客戶端的情況自適應。

在不同瀏覽器和屏幕分辨率下的額外空白量都差不多，更符合視覺吸引力要求。

如果設計得當，流動布局能避免在小屏幕上的水平滾動條。

弊

設計師對客戶端的顯示效果更難以控制，由于他們使用特定大小的屏幕調(diào)試，也更不容易發(fā)現(xiàn)潛在問題。

圖片、視頻以及其他擁有固定寬度的內(nèi)容不得不被設置上不同寬度，以配合不同的屏幕分辨率。

對于特別大的顯示屏，內(nèi)容不夠多的話就會造成過量空白，破壞美感。

因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。

使用技巧：

• 采用簡單設計：應用到流動網(wǎng)頁布局的圖案和復雜技巧越少，其建立和維護也就越容易。同時也能更方便地適應不同屏幕分辨率。
• min-width 和 max-width，可以用來為過大或過小屏幕的用戶指定一個固定寬度。屏幕過小的時候，內(nèi)容區(qū)塊固定成指定寬度，屏幕下方也出現(xiàn)一個水平滾動條；屏幕過大的時候，內(nèi)容也固定到最大寬度，以免延展得太開，影響文字的可讀性。

?

?

彈性布局(elastic layout)

其要點就在于使用單位em或rem來定義元素寬度。em/rem則是相對于字體大小的單位寬度。它隨著字體大小的變化而變化，反應用戶對字體大小的設定。

利

如果合理運用，這種布局設計能帶來非常友好的用戶界面。目標效果是所有東西都能根據(jù)用戶的偏好增大或縮小尺寸。

可以用于字體縮進text-indent；使用rem單位的彈性布局在移動端也很受歡迎；

弊

盡管第一條“利”說得沒錯，彈性布局還是為可用性埋下了很多地雷。得需要十分的聰明才智和不斷測試才能讓布局適合所有用戶。

這種布局比前述兩種要難實現(xiàn)得多，可能那一小點的可用性并不值得你花這么多功夫。

由于這種布局的特殊性，有些彈性布局設計可能需要額外的樣式表，并針對IE6做些特別的調(diào)整? ；

REM支持的瀏覽器：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。IE6-8無法支持。

使用技巧：

• 包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要劃分區(qū)域的尺寸仍使用百分數(shù)或px做單位（同「流式布局」或「靜態(tài)/固定布局」）。
• 瀏覽器的默認字體高度一般為16px，即1em=1rem=16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，CSS編寫者常常將頁面根節(jié)點字體設為62.5%，比如選擇用rem控制字體時，先需要設置根節(jié)點html的字體大小，因為瀏覽器默認字體大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。。

注意：實際項目設置成?font-size: 62.5%可能會出現(xiàn)問題，如下

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/} body {font-size: 1.4rem;/*1.4 × 10px = 14px */} h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

因為有些瀏覽器默認的不是16px，或者用戶修改了瀏覽器默認的字體大小（因瀏覽器分辨率大小，視力，習慣等因素）。如果我們將其設置為10px，一定會影響在這些瀏覽器上的效果，所以最好用絕大多數(shù)用戶默認的16作為基數(shù) * 62.5% 得到我們需要的10px。

因為chrome不支持小于12px的字體，計算小于12px的時候，會默認取12px去計算，導致chrome的em/rem計算不準確。針對這個現(xiàn)象，可以嘗試設置html字體為100px，body 修正為16px，這樣 0.1rem 就是 10px，而body的字體仍然是默認大小，不影響未設置大小的元素的默認字體的大小。

html {font-size: 625%;/*字體換算為1rem=100px*/}body {font-size:0.1rem;/*全文基礎字體0.1rem = 10px */}h2 { font-size: 0.24rem;/*0.24 × 100px = 24px*/}

?

?

響應布局(responsive layout)

隨著寬屏的不斷普及，CSS3出現(xiàn)了@media媒體查詢技術，又出現(xiàn)了響應式設計的概念。響應式設計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現(xiàn)上不拘泥于具體手法，但通常是糅合了百分比流式布局+rem彈性布局，再搭配媒體查詢技術使用。響應式幾乎已經(jīng)成為優(yōu)秀頁面布局的標準。

響應布局是瀏覽器的寬度滿足某一個條件的時候，web頁面的布局發(fā)生變化。這種變化往往不僅僅是web頁面寬度的變化，還有主體結構布局的改變。例如導航欄在大屏幕下是橫排，在小屏幕下是豎排，在超小屏幕下隱藏為菜單，也就是說如果有足夠的耐心，在每一種屏幕下都應該有合理的布局，完美的效果。如京東商城的首頁。

@media (min-width: 768px){ //>=768的設備 } @media (min-width: 992px){ //>=992的設備 }

利

適應pc和移動端，如果足夠耐心，效果完美

弊

媒體查詢是有限的，也就是可以枚舉出來的，只能適應主流的寬高。

要匹配足夠多的屏幕大小，工作量不小，設計也需要多個版本。

布局特點：屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。流式布局是用于解決類似的設備不同分辨率之間的兼容(一般分辨率差異較少)；響應式是用于解決不同設備之間不同分辨率之間的兼容問題(一般是指PC，平板，手機等設備之間較大的分辨率差異)。

使用技巧：通常是糅合了百分比流式布局+rem彈性布局，再搭配媒體查詢技術使用。——使用?@media 媒體查詢給不同尺寸和介質(zhì)的設備切換不同的樣式，分別為不同的屏幕分辨率定義布局。同時，在每個布局中，主區(qū)域劃分應用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動適配。

響應式布局具體實踐看上一篇文章：https://blog.csdn.net/zhouzuoluo/article/details/95756442

?

?

選擇何種布局方式

選擇何種布局應該由網(wǎng)站的性質(zhì)決定。權衡上述利弊，根據(jù)你的網(wǎng)站需求找到合適的解決方案，如以下選擇：

1、如果只實現(xiàn)pc端簡單設計，那么靜態(tài)固定布局（定寬度）是最好的選擇。

2、如果做移動端，且設計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定；

3、一些特定的界面可以使用主區(qū)域流動+側邊欄固定+一些彈性應用 來很好的實現(xiàn)。

4、如果pc，移動要兼容，而且要求很高那么響應式布局還是最好的選擇，前提是設計根據(jù)不同的高寬做不同的設計，響應式根據(jù)媒體查詢做不同的布局。

?

?

?

學習網(wǎng)址：
https://www.cnblogs.com/yanayana/p/7066948.html

https://www.cnblogs.com/MirageFox/p/6754791.html

總結

以上是生活随笔為你收集整理的固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。