一、流式布局（百分比布局）
使用非固定像素來定義網頁內容，也就是百分比布局，(特別適合於電商網站的布局)通過盒子的寬度設置成百分比來根據屏幕的寬度來進行伸縮，不受固定像素的限制，內容向兩側填充。這樣的布局方式，就是移動web 開發使用的常用布局方式。這樣的布局可以適配移動端不同的分辨率設備。
二、rem布局（局限條件：主要用來適配手機和ipad,除了手機和ipad，其他的都不能適配。）
rem布局方案（用rem這個單位來做不同手機的適配）是現在做手機端頁面最好的。
首先說一下px、em、rem取用選擇依據？
1. px 像素（Pixel），絕對單位，是相對於顯示器屏幕分辨率而言的，是一個虛擬長度單位，是計算機系統的數字化圖像長度單位，如果px要換成物理長度，需要指定精度DPI。
2. em 是相對長度單位，相對於當前對象內文本的字體尺寸。如當前對象內文本的字體尺寸未被人設置，則相對於瀏覽器的默認字體尺寸。它會繼承父級元素的字體大小，因此不是一個固定的值。
3. rem 是CSS3新增的一個相對單位（root em，根em），使用rem為元素設定字體大小時，仍然是相對大小，但相對的是HTML根元素。
4. 區別：IE無法調整那些使用px作為單位的字體大小，而em和rem可以進行縮放，rem相對的是HTML根元素，這個單位可謂集相對大小和絕對大小的優點於一身，通過它既可以做到只修改根元素就成比例地調整所有字體大小，又可以避免字體大小逐層復合的連鎖反應。目前，除了IE8及更早版本外，所有瀏覽器均已支持rem。
rem布局中的尺寸是怎樣計算的？
本質是等比縮放，一般是基於寬度，試想一下假設UE圖能等比縮放，假設我們將屏幕寬度平均分成100份，每一份用x表示，x=屏幕寬度/100，如果將x作為單位，x前面的數值就代表屏幕寬度的百分比。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*目標：就是把box適配到常見的iphone5 三星 iphone6手機上*/ /*1.通過切圖工具，我們得知 box在設計圖（640px）上的大小是16*16px */ /*2.把設計圖分成20份 1份=32px*/ /*3.iphone5的寬度=320 iphone6的寬度=375 這里指的是設備獨立像素*/ /*4.使用媒體查詢*/ @media screen and (width: 320px){ html { /*在320寬的屏幕中 一份是16px*/ font-size: 16px;/*320/20=16*/ } } /*三星*/ @media screen and (width: 360px){ html { /*在360寬的屏幕中 一份是18px*/ font-size: 18px;/*360/20=18*/ } } @media screen and (width: 375px){ html { /*在375寬的屏幕中 一份是18.75px*/ font-size: calc(375px/20);/*375/20=18.75*/ } } .box { /* 在某一屏幕中的大小=元素的尺寸/32 * 屏幕中一份的大小，即16/32*18或16/32*16，就能得到px為單位的*/ width: 0.5rem; height: 0.5rem; background-color: red; } </style> </head> <body> <div class="box"></div> </body> </html>
例：給了我們一張640px的設計圖（把640px分成20份，則每份32px）
適配代碼：
@media screen and (width: 320px){ html { /*在320寬的屏幕中 一份是16px*/ font-size: 16px;/*320/20=16*/ } } /*三星*/ @media screen and (width: 360px){ html { /*在360寬的屏幕中 一份是18px*/ font-size: 18px;/*360/20=18*/ } } @media screen and (width: 375px){ html { /*在375寬的屏幕中 一份是18.75px*/ font-size: calc(375px/20);/*375/20=18.75*/ } }
html中，加入一個div量出來height是90px,那么應該這樣寫：
.box {
/*90/32意思是這個尺寸在設計圖中占了多少份*/
height: 90/32rem; }
我在工作中是這樣用的：
給一個750px的設計稿
（我們這里所說的750px並不是絕對的，750px是iphone6的物理像素，也叫屏幕分辨率。所以這里只是泛指移動端設計稿是按照設備的物理像素所給。）
物理像素：顧名思義，就是設備屏幕上的實際像素，也就是說這個手機被出廠造出來的時候，這個屏幕上有多少個像素點，它的物理像素就是多少。
設備獨立像素：也叫邏輯像素（對於前端來說，和我們的css像素是一樣的），這個不同的設備是不一樣的。在viewport為ideal-viewport模式時，如iphone6此時的viewport為375排序，代表着我們在css中寫375px就可以達到全屏的效果。
在index.html中添加一段js代碼
<script>
var u = navigator.userAgent;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android終端或者uc瀏覽器
var isiOS = u.indexOf('iPhone') > -1; //ios終端
if(isAndroid || isiOS) {
var windowWidth = document.documentElement.clientWidth;
document.documentElement.style.fontSize = windowWidth / 7.5 + 'px';
} else {
var windowWidth = document.documentElement.clientWidth;
if(windowWidth > 480) {
document.documentElement.style.fontSize = 480 / 7.5 + 'px';
} else {
document.documentElement.style.fontSize = windowWidth / 7.5 + 'px';
}
}
</script>
然后只需要將設計稿量出來的長度（px），小數點向左移2位，單位變成rem就好了。
還可以這樣來寫，添加如下代碼
(function(){ function changeRootFont(){ var designWidth = 750,rem2px = 100; document.documentElement.style.fontsize=((window.innerWidth/designWidth)*rem2px) +'px'; //iphon6: (375/750)*100 + 'px' } changeRootFont(); window.addEventListener('resize',changeRootFont,false); })();
可以看到，我們通過動態的獲取設備獨立像素，然后除以設計稿的寬度，然后賦給根字體的大小，以致來改變根字體大小，做到自適應。但至於為什么要乘100，首先375/750是0.5，瀏覽器默認最小字體為12px,所以我們需要放大一些，而100又很好算，然后只需要將設計稿量出來的長度（px），小數點向左移2位，單位變成rem就好了。
三、響應式布局（使用媒體查詢這個工具實現）
簡而言之，就是一個網站能夠兼容多個終端。
度區間的網頁布局。它主要是通過查詢設備的寬度來執行不同的 css 代碼，最終達到界面的配置。核心語法是：
@media screen and (max-width: 600px) { /*當屏幕尺寸小於600px時，應用下面的CSS樣式*/ /*你的css代碼*/ }
如下所示：
@media screen and (width: 320px){ body { background-color:red } } @media screen and (width: 375px){ body { background-color:green } }
由於響應式開發顯得繁瑣些，一般使用第三方響應式框架來完成，比如bootstrap來完成一部分工作，當然也可以自己寫響應式。
bootstrap中常用類名：
.col-sm-*小屏設備 768px-992px
.col-md-*中等屏幕 992px-1200px
.col-lg-*寬屏設備 1200px 以上
四、flex彈性布局
以天貓的實現方式進行說明：
它的viewport是固定的：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死，寬度自適應，元素都采用px做單位。
隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體布局差不多，在那個寬度需要調整的時候使用響應式布局調調就行（比如網易新聞），這就實現了適配。