一、靜態(tài)布局（ ）
即傳統(tǒng)Web設(shè)計，網(wǎng)頁上的所有元素的尺寸一律使用px作為單位。
1、布局特點：不管瀏覽器尺寸具體是多少，網(wǎng)頁布局始終按照最初寫代碼時的布局來顯示。常規(guī)的pc的網(wǎng)站都是靜態(tài)（定寬度）布局的，也就是設(shè)置了min-width，這樣的話，如果小于這個寬度就會出現(xiàn)滾動條，如果大于這個寬度則內(nèi)容居中外加背景，這種設(shè)計常見與pc端。
2、設(shè)計方法：
PC：居中布局，所有樣式使用絕對寬度/高度(px)，設(shè)計一個，在屏幕寬高有調(diào)整時，使用橫向和豎向的滾動條來查閱被遮掩部分；
移動設(shè)備：另外建立移動網(wǎng)站，單獨設(shè)計一個布局，使用不同的域名如wap.或m.。
在移動端開發(fā)中采用靜態(tài)布局的兩種方式：(來自：流布局與響應(yīng)式網(wǎng)頁設(shè)計有什么區(qū)別？)
（1）在 meta標簽上設(shè)置width=320，頁面的各個元素也采用px作為單位。通過用JS動態(tài)修改標簽的-scale使得頁面等比縮放，從而剛好占滿整個屏幕。（見前端開發(fā)-web app 變革之rem）
（2）設(shè)在 meta標簽上設(shè)置"width=640,user-=no，頁面的各個元素也采用px作為單位。由于640px超出了手機寬度，瀏覽器會自動縮小頁面至剛好全屏。（具體見"width=640,user-=no" 然后再進行固定尺寸的px設(shè)計？ - 前端開發(fā)）
優(yōu)點：這種布局方式對設(shè)計師和CSS編寫者來說都是最簡單的，亦沒有兼容性問題。
缺點：顯而易見，即不能根據(jù)用戶的屏幕尺寸做出不同的表現(xiàn)。
當前，大部分門戶網(wǎng)站、大部分企業(yè)的PC宣傳站點都采用了這種布局方式。固定像素尺寸的網(wǎng)頁是匹配固定像素尺寸顯示器的最簡單辦法。但這種方法不是一種完全兼容未來網(wǎng)頁的制作方法，我們需要一些適應(yīng)未知設(shè)備的方法。
二、流式布局（ ）
流式布局（）的特點（也叫"Fluid") 是頁面元素的寬度按照屏幕分辨率進行適配調(diào)整，但整體布局不變。代表作柵欄系統(tǒng)（網(wǎng)格系統(tǒng)）。
網(wǎng)頁中主要的劃分區(qū)域的尺寸使用百分數(shù)（搭配min-*、max-*屬性使用），例如，設(shè)置網(wǎng)頁主體的寬度為80%，min-width為960px。圖片也作類似處理（width:100%, max-width一般設(shè)定為圖片本身的尺寸，防止被拉伸而失真）。
1、布局特點：屏幕分辨率變化時，頁面里元素的大小會變化而但布局不變。【這就導(dǎo)致如果屏幕太大或者太小都會導(dǎo)致元素?zé)o法正常顯示】
2、設(shè)計方法：使用%百分比定義寬度，高度大都是用px來固定住，可以根據(jù)可視區(qū)域 () 和父元素的實時尺寸進行調(diào)整，盡可能的適應(yīng)各種分辨率。往往配合 max-width/min-width 等屬性控制尺寸流動范圍以免過大或者過小影響閱讀。
這種布局方式在Web前端開發(fā)的早期歷史上，用來應(yīng)對不同尺寸的PC屏幕（那時屏幕尺寸的差異不會太大），在當今的移動端開發(fā)也是常用布局方式，但缺點明顯：主要的問題是如果屏幕尺度跨度太大，那么在相對其原始設(shè)計而言過小或過大的屏幕上不能正常顯示。因為寬度使用%百分比定義，但是高度和文字大小等大都是用px來固定，所以在大屏幕的手機下顯示效果會變成有些頁面元素寬度被拉的很長，但是高度、文字大小還是和原來一樣（即，這些東西無法變得“流式”），顯示非常不協(xié)調(diào)。
三、自適應(yīng)布局（ ）
自適應(yīng)布局的特點是分別為不同的屏幕分辨率定義布局，即創(chuàng)建多個靜態(tài)布局，每個靜態(tài)布局對應(yīng)一個屏幕分辨率范圍。改變屏幕分辨率可以切換不同的靜態(tài)局部（頁面元素位置發(fā)生改變），但在每個靜態(tài)布局中，頁面元素不隨窗口大小的調(diào)整發(fā)生變化?？梢园炎赃m應(yīng)布局看作是靜態(tài)布局的一個系列。
1、布局特點：屏幕分辨率變化時，頁面里面元素的位置會變化而大小不會變化。
2、設(shè)計方法：使用 @media 媒體查詢給不同尺寸和介質(zhì)的設(shè)備切換不同的樣式。在優(yōu)秀的響應(yīng)范圍設(shè)計下可以給適配范圍內(nèi)的設(shè)備最好的體驗，在同一個設(shè)備下實際還是固定的布局。
四、響應(yīng)式布局（ ）
隨著CSS3出現(xiàn)了媒體查詢技術(shù)，又出現(xiàn)了響應(yīng)式設(shè)計的概念。響應(yīng)式設(shè)計的目標是確保一個頁面在所有終端上（各種尺寸的PC、手機、手表、冰箱的Web瀏覽器等等）都能顯示出令人滿意的效果，對CSS編寫者而言，在實現(xiàn)上不拘泥于具體手法，但通常是糅合了流式布局+彈性布局，再搭配媒體查詢技術(shù)使用?！謩e為不同的屏幕分辨率定義布局，同時，在每個布局中css響應(yīng)式布局媒體查詢，應(yīng)用流式布局的理念，即頁面元素寬度隨著窗口調(diào)整而自動適配。即：創(chuàng)建多個流體式布局，分別對應(yīng)一個屏幕分辨率范圍?？梢园秧憫?yīng)式布局看作是流式布局和自適應(yīng)布局設(shè)計理念的融合。
響應(yīng)式幾乎已經(jīng)成為優(yōu)秀頁面布局的標準。
1、布局特點：每個屏幕分辨率下面會有一個布局樣式，即元素位置和大小都會變。
2、設(shè)計方法：媒體查詢+流式布局。通常使用 @media 媒體查詢 和網(wǎng)格系統(tǒng) (Grid ) 配合相對布局單位進行布局，實際上就是綜合響應(yīng)式、流動等上述技術(shù)通過 CSS 給單一網(wǎng)頁不同設(shè)備返回不同樣式的技術(shù)統(tǒng)稱。
優(yōu)點：適應(yīng)pc和移動端，如果足夠耐心，效果完美
缺點：（1）媒體查詢是有限的，也就是可以枚舉出來的，只能適應(yīng)主流的寬高。（2）要匹配足夠多的屏幕大小，工作量不小，設(shè)計也需要多個版本。
View Code
總結(jié)：
響應(yīng)式與自適應(yīng)的原理是相似的，都是檢測設(shè)備，根據(jù)不同的設(shè)備采用不同的css，而且css都是采用的百分比的，而不是固定的寬度，不同點是響應(yīng)式的模板在不同的設(shè)備上看上去是不一樣的，會隨著設(shè)備的改變而改變展示樣式，而自適應(yīng)不會，所有的設(shè)備看起來都是一套的模板，不過是長度或者圖片變小了，不會根據(jù)設(shè)備采用不同的展示樣式，流式就是采用了一些設(shè)置，當寬度大于多少時怎么展示，小于多少時怎么展示，而且展示的方式向水流一樣，一部分一部分的加載，靜態(tài)的就是采用固定寬度的了。
流式布局是用于解決類似的設(shè)備不同分辨率之間的兼容(一般分辨率差異較少)；響應(yīng)式是用于解決不用設(shè)備之間不用分辨率之間的兼容問題(一般是指PC，平板，手機等設(shè)備之間較大的分辨率差異)。
如何實現(xiàn)響應(yīng)式布局：折騰響應(yīng)式布局設(shè)計，應(yīng)運而生的web頁面響應(yīng)布局
五、彈性布局（rem/em布局）
參考：流布局與響應(yīng)式網(wǎng)頁設(shè)計有什么區(qū)別？
1、rem,em區(qū)別：rem,em都是順應(yīng)不同網(wǎng)頁字體大小展現(xiàn)而產(chǎn)生的。其中，em是相對其父元素，在實際應(yīng)用中相對而言會帶來很多不便；而rem是始終相對于html大小，即頁面根元素。
2、使用 em 或 rem 單位進行相對布局，相對%百分比更加靈活，同時可以支持瀏覽器的字體大小調(diào)整和縮放等的正常顯示，因為em是相對父級元素的原因沒有得到推廣?！局袊军c制作網(wǎng)頁的時候，習(xí)慣用CSS強制定義字體大小，保證每個人都看到一致的效果，包括網(wǎng)易、搜狐這些門戶網(wǎng)站在內(nèi)的大部分站點，用的都是絕對單位px（像素）。但是，如果從網(wǎng)站易用性方面考慮，字體大小應(yīng)該是可變的，一些視力不是那么好的人需要放大字體才能看得清頁面內(nèi)容。然而，占據(jù)大部分瀏覽器市場的IE無法調(diào)整那些使用px作為單位的字體大小。國外人士非常重視網(wǎng)站的易用性，相當一部分外國站點已經(jīng)使用em作為字體單位。】
3、這類布局的特點是，包裹文字的各元素的尺寸采用em/rem做單位，而頁面的主要劃分區(qū)域的尺寸仍使用百分數(shù)或px做單位（同「流式布局」或「靜態(tài)/固定布局」）。早期瀏覽器不支持整個頁面按比例縮放，僅支持網(wǎng)頁內(nèi)文字尺寸的放大，這種情況下。使用em/rem做單位，可以使包裹文字的元素隨著文字的縮放而縮放。
4、瀏覽器的默認字體高度一般為16px，即1em:16px，但是 1:16 的比例不方便計算，為了使單位em/rem更直觀，CSS編寫者常常將頁面跟節(jié)點字體設(shè)為62.5%，比如選擇用rem控制字體時，先需要設(shè)置根節(jié)點html的字體大小，因為瀏覽器默認字體大小16px*62.5%=10px。這樣1rem便是10px，方便了計算。
Set body font-size to 62.5% for em :
If you would like to use units (em) for your font sizes, 62.5% for the font-size of the body will make it to px to em. By doing it this way, to em is a of the px value by 10 (e.g. 24px = 2.4em).
那么為什么一般多是 html{font-size:62.5%;} 而不是 html{font-size:10px;}呢？
因為有些瀏覽器默認的不是16px，或者用戶修改了瀏覽器默認的字體大?。ㄒ驗g覽器分辨率大小，視力，習(xí)慣等因素）。如果我們將其設(shè)置為10px，一定會影響在這些瀏覽器上的效果，所以最好用絕大多數(shù)用戶默認的16作為基數(shù) * 62.5% 得到我們需要的10px。
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*/}
實際項目設(shè)置成 font-size: 62.5%可能會出現(xiàn)問題，因為不支持小于12px的字體，計算小于12px的時候，會默認取12px去計算，導(dǎo)致的em/rem計算不準確。
針對這個現(xiàn)象，可以嘗試設(shè)置html字體為100px，body 修正為16px，這樣 0.1rem 就是 10px，而body的字體仍然是默認大小，不影響未設(shè)置大小的元素的默認字體的大小。
5、用em/rem定義尺寸的另一個好處是更能適應(yīng)縮進/以字體單位或／瀏覽器設(shè)置字體尺寸等情況（因為em/rem相對于字體大小，會同步改變）。例如：p{ text-: 2em; }
6、使用rem單位的彈性布局在移動端也很受歡迎。
工具：PX轉(zhuǎn)換到REM（自動預(yù)處理）
rem的定義：font size of the root ，rem是相對于根元素來設(shè)置字體大小的，這就意味著，我們只需要根據(jù)自己的需求在根元素確定一個參考值。
rem與em、px的區(qū)別：
px：像素，比較精確的單位，但不好做響應(yīng)式布局
em：以父節(jié)點font-size大小為參考點，標準不統(tǒng)一，容易造成混亂
REM支持的瀏覽器： 3.6+、Apple 5+、 、IE9+和+。IE6-8無法支持。
對于不同尺寸的屏幕，可以統(tǒng)一假設(shè)屏幕寬度為640px后編寫CSS（當然你也可以假定統(tǒng)一為320px）。此時，我們設(shè)定html元素的font-size為40px（同樣，只是舉例），然后各處（元素尺寸、文字大?。┦褂胷em作為單位，隨后搭配媒體查詢或JS，根據(jù)屏幕的大小來動態(tài)控制html元素的font-size（特定屏幕尺寸下，html元素的font-size應(yīng)當設(shè)置為何值，是使用這個方案時設(shè)計師和程序員需要反復(fù)考慮后確定的，以下試舉一段相關(guān)的CSS媒體查詢代碼），即可自動改變所有用rem定義尺寸的元素的大?。ㄇ褻SS編寫者在腦中進行換算的計算過程比em簡單得多）。
View Code
其實在移動端使用所謂的彈性布局，是比較勉強的。移動端彈性布局流行起來的原因歸根結(jié)底是rem單位對于（根據(jù)屏幕尺寸）調(diào)整頁面的各元素的尺寸、文字大小時比較好用。其實，使用vw、vh等后起之秀的單位，可以實現(xiàn)完美的流式布局（高度和文字大小都可以變得“流式”），彈性布局就不再必要了。詳細可參考：視區(qū)相關(guān)單位vw, vh..簡介以及可實際應(yīng)用場景
以下優(yōu)缺點參考：響應(yīng)式設(shè)計和REM布局的對比（有疑問）
優(yōu)點：理想狀態(tài)是所有屏幕的高寬比和最初的設(shè)計高寬比一樣，或者相差不多，完美適應(yīng)。
缺點：這種rem+js只不過是寬度自適應(yīng)，高度沒有做到自適應(yīng)，一些對高度，或者元素間距要求比較高的設(shè)計，則這種布局沒有太大的意義。如果只是寬度自適應(yīng)，更推薦響應(yīng)式設(shè)計。
響應(yīng)式和彈性布局之間的對比：
響應(yīng)式布局：改變?yōu)g覽器寬度，“布局”會隨之變化，不是一成不變的，例如導(dǎo)航欄在大屏幕下是橫排，在小屏幕下是豎排，在超小屏幕下隱藏為菜單，也就是說如果有足夠的耐心，在每一種屏幕下都應(yīng)該有合理的布局，完美的效果。
rem布局：改變?yōu)g覽器寬度，頁面所有元素的高寬都等比例縮放，也就是大屏幕下導(dǎo)航是橫的，小屏幕下還是橫的只不過變小了。
結(jié)論：
1.如果只做pc端，那么靜態(tài)布局（定寬度）是最好的選擇；
2.如果做移動端css響應(yīng)式布局媒體查詢，且設(shè)計對高度和元素間距要求不高，那么彈性布局（rem+js）是最好的選擇，一份css+一份js調(diào)節(jié)font-size搞定；
3.如果pc，移動要兼容，而且要求很高那么響應(yīng)式布局還是最好的選擇，前提是設(shè)計根據(jù)不同的高寬做不同的設(shè)計，響應(yīng)式根據(jù)媒體查詢做不同的布局。