5種佈局方式

1、靜態佈局（static layout）

即傳統Web設計，網頁上的全部元素的尺寸一概使用px做爲單位。

一、佈局特色

無論瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫代碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設置了min-width，這樣的話，若是小於這個寬度就會出現滾動條，若是大於這個寬度則內容居中外加背景，這種設計常見於pc端。

二、設計方法

PC：居中佈局，全部樣式使用絕對寬度/高度(px)，設計一個Layout，在屏幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；

移動設備：另外創建移動網站，單獨設計一個佈局，使用不一樣的域名如wap.或m.。

優勢：這種佈局方式對設計師和CSS編寫者來講都是最簡單的，亦沒有兼容性問題。

缺點：顯而易見，即不能根據用戶的屏幕尺寸作出不一樣的表現。當前，大部分門戶網站、大部分企業的PC宣傳站點都採用了這種佈局方式。固定像素尺寸的網頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種徹底兼容將來網頁的製做方法，咱們須要一些適應未知設備的方法。

2、流式佈局（Liquid Layout）

流式佈局（Liquid）的特色（也叫"Fluid")是頁面元素的寬度按照屏幕分辨率進行適配調整，但總體佈局不變。表明做柵欄系統（網格系統）。

網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設置網頁主體的寬度爲80%，min-width爲960px。圖片也做相似處理（width:100%, max-width通常設定爲圖片自己的尺寸，防止被拉伸而失真）。

1.佈局特色

屏幕分辨率變化時，頁面裏元素的大小會變化而但佈局不變。【這就致使若是屏幕太大或者過小都會致使元素沒法正常顯示。

2.設計方法

使用%百分比定義寬度，高度大都是用px來固定住，能夠根據可視區域 (viewport)和父元素的實時尺寸進行調整，儘量的適應各類分辨率。每每配合 max-width/min-width等屬性控制尺寸流動範圍以避免過大或者太小影響閱讀。

這種佈局方式在Web前端開發的早期歷史上，用來應對不一樣尺寸的PC屏幕（那時屏幕尺寸的差別不會太大），在當今的移動端開發也是經常使用佈局方式，但缺點明顯：主要的問題是若是屏幕尺度跨度太大，那麼在相對其原始設計而言太小或過大的屏幕上不能正常顯示。由於寬度使用%百分比定義，可是高度和文字大小等大都是用px來固定，因此在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，可是高度、文字大小仍是和原來同樣（即，這些東西沒法變得「流式」），顯示很是不協調

3、自適應佈局（Adaptive Layout）

自適應佈局的特色是分別爲不一樣的屏幕分辨率定義佈局，即建立多個靜態佈局，每一個靜態佈局對應一個屏幕分辨率範圍。改變屏幕分辨率能夠切換不一樣的靜態局部（頁面元素位置發生改變），但在每一個靜態佈局中，頁面元素不隨窗口大小的調整發生變化。能夠把自適應佈局看做是靜態佈局的一個系列。

一、佈局特色

屏幕分辨率變化時，頁面裏面元素的位置會變化而大小不會變化。

二、設計方法

使用 @media媒體查詢給不一樣尺寸和介質的設備切換不一樣的樣式。在優秀的響應範圍設計下能夠給適配範圍內的設備最好的體驗，在同一個設備下實際仍是固定的佈局。

4、響應式佈局（Responsive Layout）

隨着CSS3出現了媒體查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保一個頁面在全部終端上（各類尺寸的PC、手機、手錶、冰箱的Web瀏覽器等等）都能顯示出使人滿意的效果，對CSS編寫者而言，在實現上不拘泥於具體手法，但一般是糅合了流式佈局+彈性佈局，再搭配媒體查詢技術使用。——分別爲不一樣的屏幕分辨率定義佈局，同時，在每一個佈局中，應用流式佈局的理念，即頁面元素寬度隨着窗口調整而自動適配。即：建立多個流體式佈局，分別對應一個屏幕分辨率範圍。能夠把響應式佈局看做是流式佈局和自適應佈局設計理念的融合。

響應式幾乎已經成爲優秀頁面佈局的標準。

1.佈局特色

每一個屏幕分辨率下面會有一個佈局樣式，即元素位置和大小都會變。

2.設計方法

媒體查詢+流式佈局。一般使用 @media媒體查詢和網格系統 (Grid System)配合相對佈局單位進行佈局，實際上就是綜合響應式、流動等上述技術經過 CSS給單一網頁不一樣設備返回不一樣樣式的技術統稱。

優勢：適應pc和移動端，若是足夠耐心，效果完美。

缺點：（1）媒體查詢是有限的，也就是能夠枚舉出來的，只能適應主流的寬高。（2）要匹配足夠多的屏幕大小，工做量不小，設計也須要多個版本。

響應式頁面在頭部會加上這一段代碼：

 

5、彈性佈局（rem/em佈局）

1. rem/em區別：rem是相對於html元素的font-size大小而言的，而em是相對於其父元素。

2.使用 em或 rem單位進行相對佈局，相對%百分比更加靈活，同時能夠支持瀏覽器的字體大小調整和縮放等的正常顯示，由於em是相對父級元素的緣由沒有獲得推廣。【中國站點製做網頁的時候，習慣用CSS強制定義字體大小，保證每一個人都看到一致的效果，包括網易、搜狐這些門戶網站在內的大部分站點，用的都是絕對單位px（像素）。可是，若是從網站易用性方面考慮，字體大小應該是可變的，一些視力不是那麼好的人須要放大字體才能看得清頁面內容。然而，佔據大部分瀏覽器市場的IE沒法調整那些使用px做爲單位的字體大小。國外人士很是重視網站的易用性，至關一部分外國站點已經使用em做爲字體單位。

3.這類佈局的特色是，包裹文字的各元素的尺寸採用em/rem作單位，而頁面的主要劃分區域的尺寸仍使用百分數或px作單位（同「流式佈局」或「靜態/固定佈局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網頁內文字尺寸的放大，這種狀況下。使用em/rem作單位，可使包裹文字的元素隨着文字的縮放而縮放。

4.瀏覽器的默認字體高度通常爲16px，即1em:16px，可是 1:16的比例不方便計算，爲了使單位em/rem更直觀，CSS編寫者經常將頁面跟節點字體設爲62.5%，好比選擇用rem控制字體時，先須要設置根節點html的字體大小，由於瀏覽器默認字體大小16px*62.5%=10px。這樣1rem即是10px，方便了計算。

5.用em/rem定義尺寸的另外一個好處是更能適應縮進/以字體單位padding或margin／瀏覽器設置字體尺寸等狀況（由於em/rem相對於字體大小，會同步改變）。例如：p{ text-indent: 2em; }。

6.使用rem單位的彈性佈局在移動端也很受歡迎。

7.其實在移動端使用所謂的彈性佈局，是比較勉強的。移動端彈性佈局流行起來的緣由歸根結底是rem單位對於（根據屏幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的單位，能夠實現完美的流式佈局（高度和文字大小均可以變得「流式」），彈性佈局就再也不必要了。

結論

1.若是隻作pc端，那麼靜態佈局（定寬度）是最好的選擇；

2.若是作移動端，且設計對高度和元素間距要求不高，那麼彈性佈局（rem+js）是最好的選擇，一份css+一份js調節font-size搞定；

3.若是pc，移動要兼容，並且要求很高那麼響應式佈局仍是最好的選擇，前提是設計根據不一樣的高寬作不一樣的設計，響應式根據媒體查詢作不一樣的佈局。