布局種類：
頁面布局的幾種方式（靜態化布局、流式布局、自適應布局、響應式布局、彈性布局）使用建議：
1.如果只做pc端，那麼靜態布局（定寬度）是最好的選擇；傳統web設計，網頁上的所有元素的尺寸一律使用px作為單位。2.如果做移動端，且設計對高度和元素間距要求不高，那麼彈性布局（rem+js）是最好的選擇，乙份css+乙份js調節font-size搞定；
3.如果pc，移動要相容，而且要求很高那麼響應式布局還是最好的選擇，前提是設計根據不同的高寬做不同的設計，響應式根據**查詢做不同的布局。
1、布局特點
1、如果小於這個寬度就會出現滾動條。2、如果大於這個寬度則內容居中外加背景，這種設計常見於pc端。
2、設計方法
pc：居中布局，所有樣式使用絕對寬度/高度(px)，設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
pc端自適應設計詳情參考 googley開發文件
優點：這種布局方式對設計師和css編寫者來說都是最簡單的，亦沒有相容性問題。
缺點：顯而易見，即不能根據使用者的螢幕尺寸做出不同的表現。當前，大部分門戶**、大部分企業的pc宣傳站點都採用了這種布局方式。自適應布局的特點是，使用@media **查詢：固定畫素尺寸的網頁是匹配固定畫素尺寸顯示器的最簡單辦法。但這種方法不是一種完全相容未來網頁的製作方法，我們需要一些適應未知裝置的方法。
分別為不同的螢幕解析度定義布局，即建立多個靜態布局,每個靜態布局對應乙個螢幕解析度範圍。改變螢幕解析度可以切換不同的靜態區域性（頁面元素位置發生改變），但在每個靜態布局中，頁面元素不隨視窗大小的調整發生變化。可以把自適應布局看作是靜態布局的乙個系列。
1、布局特點
螢幕解析度變化時，頁面裡面元素的位置會變化而大小不會變化。2、設計方法
使用@media **查詢給不同尺寸和介質的裝置切換不同的樣式。在優秀的響應範圍設計下可以給適配範圍內的裝置最好的體驗，在同乙個裝置下實際還是固定的布局。流式布局（liquid）的特點（也叫"fluid") 是頁面元素的寬度按照螢幕解析度進行適配調整，但整體布局不變。代表作柵欄系統（網格系統）。
網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的寬度為80%，min-width為960px。也作類似處理（width:100%, max-width一般設定為本身的尺寸，防止被拉伸而失真）。
1、布局特點
螢幕解析度變化時，頁面裡元素的大小會變化而但布局不變。【這就導致如果螢幕太大或者太小都會導致元素無法正常顯示】。2、設計方法
使用%百分比定義寬度，高度大都是用px來固定住，可以根據可視區域 (viewport) 和父元素的實時尺寸進行調整，盡可能的適應各種解析度。往往配合 max-width/min-width 等屬性控制尺寸流動範圍以免過大或者過小影響閱讀。
這種布局方式在web前端開發的早期歷史上，用來應對不同尺寸的pc螢幕（那時螢幕尺寸的差異不會太大），在當今的移動端開發也是常用布局方式，但缺點明顯：主要的問題是如果螢幕尺度跨度太大，那麼在相對其原始設計而言過小或過大的螢幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大螢幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得「流式」），顯示非常不協調隨著css3出現了**查詢技術，又出現了響應式設計的概念。響應式設計的目標是確保乙個頁面在所有終端上（各種尺寸的pc、手機、手錶、冰箱的web瀏覽器等等）都能顯示出令人滿意的效果，對css編寫者而言，在實現上不拘泥於具體手法。但通常是糅合了流式布局+彈性布局，再搭配**查詢技術使用。
——分別為不同的螢幕解析度定義布局，同時，在每個布局中，應用流式布局的理念，即頁面元素寬度隨著視窗調整而自動適配。即：建立多個流體式布局，分別對應乙個螢幕解析度範圍。可以把響應式布局看作是流式布局和自適應布局設計理念的融合。
響應式幾乎已經成為優秀頁面布局的標準。1、布局特點
每個螢幕解析度下面會有乙個布局樣式，即元素位置和大小都會變。2、設計方法
**查詢+流式布局。通常使用 @media **查詢 和網格系統 (grid system) 配合相對布局單位進行布局，實際上就是綜合響應式、流動等上述技術通過 css 給單一網頁不同裝置返回不同樣式的技術統稱。
優點：適應pc和移動端，如果足夠耐心，效果完美。
缺點：（1）**查詢是有限的，也就是可以列舉出來的，只能適應主流的寬高。
（2）要匹配足夠多的螢幕大小，工作量不小，設計也需要多個版本。
響應式頁面在頭部會加上這一段**：
"cache-control" content="no-transform ">
rem/em區別：rem是相對於html元素的font-size大小而言的，而em是相對於其父元素。1、布局特點
2、設計方法
1、這類布局的特點是，包裹文字的各元素的尺寸採用em/rem做單位，而頁面的主要劃分區域的尺寸仍使用百分數或px做單位（同「流式布局」或「靜態/固定布局」）。早期瀏覽器不支援整個頁面按比例縮放，僅支援網頁內文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。
2、瀏覽器的預設字型高度一般為16px，即1em:16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，css編寫者常常將頁面跟節點字型設為62.5%，比如選擇用rem控制字型時，先需要設定根節點html的字型大小，因為瀏覽器預設字型大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。
3、用em/rem定義尺寸的另乙個好處是更能適應縮排/以字型單位padding或margin／瀏覽器設定字型尺寸等情況（因為em/rem相對於字型大小，會同步改變）。例如：p。
4、使用rem單位的彈性布局在移動端也很受歡迎。其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結底是rem單位對於（根據螢幕尺寸）調整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等後起之秀的單位，可以實現完美的流式布局（高度和文字大小都可以變得「流式」），彈性布局就不再必要了。
網頁布局layout
網頁常見的布局有一般一欄 兩欄 三欄現在從一欄說起 css 大家都知道一框架居中margin 0px auto 和margin left auto margin right auto 都是可以 大家可以看看bootstrap框架一般用的後免得方法 html 兩欄 css 一般從學習的時候別人就跟我們...
移動web開發之rem布局
理論基礎 什麼是rem?fontsize of the root elelment 說白了就是字型單位，是指相對於根元素的字型大小的單位。rem的優點 相對於流式布局 響應式布局等布局方式，rem更為靈活，可以根據根不同螢幕尺寸上的根元素來等比例適配。rem的基準值 根元素的字型大小 而網頁的根元素...
移動WEB開發之flex布局
flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性，任何乙個容器都可以指定為 flex 布局。伸縮布局 彈性布局 伸縮盒布局 彈性盒布局 flex布局 注意 使用這個屬性之前一定要確定好主軸是哪個 flex wrap屬性定義，flex布局中預設是不換行的。...