之前說過百分比适配、比例縮放适配和viewport适配，但是，現在的主流适配方案是rem适配，它很強大。
4、rem适配
首先說說常用像素機關：
常用像素機關
1. px
絕對機關，給多少就是多少，
問題：不管螢幕尺寸怎麼變化，它都不會變。做不到适配
2.em
相對機關，相對于自身字型大小的值
font-size:12px
1em=12px
問題：
1. chrom下有最小字型限制，必需為12px，是以這個值不能小于12
2. 如果兩個一樣的元素，但是裡面字型不一樣，那就不能統一設定了。或者元素字型變化了，就又要統一設定一遍
3. rem
CSS3新增的一個相對機關，相對于根節點(html)字型大小的值
r就是root
html{font-size:10px}
則2rem=20px
通過它就可以做到隻修改根元素的大小，就能成比例地調整所有的字型大小，隻依賴html字型的大小
另外還有vw和vh這裡不做過多介紹。可以自己搜尋資料或者檢視張鑫旭老師的部落格。
那麼，怎麼去适配呢？
方案步驟：
1、首先動态計算html的font-size
2、将所有的px換算成rem(計算過程請看下面代碼和注釋（注意：rem的換算是根據設計圖稿的像素計算的，下面的計算隻是動态計算html的font-size大小），請看下面的注意事項
<meta name="viewport" content="width=device-width,user-scalable=no"/>
<style>
body{
margin: ;
}
div{
/*width: 80px;*/
height: px;
width: rem;
height: rem;
/*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
background: green;
float: left;
}
<style>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</body>
<script>
(function(){
var html=document.documentElement;
var width=html.getBoundingClientRect().width; //擷取螢幕寬度（裝置獨立像素），如iPhone6 為414
html.style.fontSize=width/16+'px'; //html font-size = 20px
//iphone5下 1rem=20 這裡之是以除以16，是因為要把寬度分成16份，這個數字并沒有固定，一般選15，16，以ipone5為準是16，因為一除可以得到整數20，好計算。
})();
</script>
注意：
1、必需動态的去設定html的大小，才能适配
2、根據頁面的寬度除以一個系數，把算出的這個值賦給html的font-size屬性，rem換算值是根據psd設計圖的寬度/系數的rem系數。
以640px設計稿和750px的視覺稿，網易這樣處理的：
var width = document.documentElement.clientWidth; // 螢幕的布局視口寬度
var rem = width / 7.5; // 750px設計稿将布局視口分為7.5份
var rem = width / 6.4; // 640px設計稿将布局視口分為6.4份
這樣不管是750px設計稿還是640px設計稿，1rem 等于設計稿上的100px。故px轉換rem時：
1rem = 1px * 0.01;
在750px設計稿上：
設計稿上px 對應 rem, 距離占設計稿的%；
在ipone6上：
width = document.documentElement.clientWidth = px；
rem = px / = px;
rem = px; (/=%；占螢幕10%)
在ipone5上：
width = document.documentElement.clientWidth = px；
rem = px / = px;
rem = px; (/=%；占螢幕10%)
故對于設計稿上任何一個尺寸換成rem後，在任何屏下對應的尺寸占螢幕寬度的百分比相同。故這種布局可以百分比還原設計圖。
1、為什麼要除一個數字，原因是：一個頁面裡，不可能全都是整屏的元素，肯定有一行中放多個元素。是以就把一行分成n份
2、不除一個數字的話，那1個rem就是螢幕的寬度，這個值太大，如果一個元素的寬度比它小的話，就不友善計算
3、這個系數，自己定。多少都可以，但是建議給一個能整除的值（這個能整除的數，是還要根據設計稿能整除的數。）
3、對于切的圖檔，尺寸是根據設計圖的尺寸寬度的，顯示起來會很大，如果是Img标簽，可以設定寬度為切出的圖檔尺寸，換算成rem，如果是background-img，用background-size屬性，設定設計圖尺寸寬高，換算成rem進行圖檔的縮放适配。
對于上述的第二點，根據設計稿動态轉換rem，這裡說一下，前面的計算是動态的設定html的font-size的大小，這是根據裝置的獨立像素計算的。而設計稿往往是根據實體像素，即裝置像素設計的，往往很大，是750px及以上，是以在轉換rem的時候，轉換是根據psd設計稿的像素進行轉換，即1rem = 設計稿像素寬度/系數，例如，如果是1080px的設計稿，那麼，就用1rem = 1080/18 = 60px（這裡用18做系數，是因為能整除），然後布局的時候就根據設計稿的元素尺寸轉換，例如設計稿一個元素的高為60px，那麼就可以轉化為1rem了。
特點：
1、所有有機關的屬性會根據螢幕的尺寸自動計算大小
2、同樣一個元素，在不同的裝置下的大小是不一樣的。在尺寸小的裝置下顯示的小，在尺寸大的裝置下顯示的大
3、一般以iphone6為基準，以它的寬度750除上一個系數，再去算rem
Tips：上述步驟2中換算可以通過Hbuilder将px自動轉rem以及通過less自動計算成rem，sublime也可以通過插件進行自動轉換，這裡不詳細說明，可以百度搜尋
- 打開Hbuilder，頂部欄的工具》選項》Hbuilder》代碼助手》px自動轉rem設定。
- less自動轉換：Hbuilder也可以将less檔案自動轉成css檔案。less檔案的書寫如下所示
比如想設定寬度為px，高度為px的元素，可以通過下面方式計算适配
@rem：rem； /*這是rem = X px的X的值，但是用了rem做機關而已*/
div{
width: /@rem;
height: /@rem;
}
5. 彈性布局适配(會配合rem适配使用 )
flex布局（彈性布局）
相容情況
IE10及以上、ios9及以上、android4.4及以上版本支援
特點
- 預設所有子元素都會在一行中顯示，即使給子元素一個很大的寬度
- 父級加了這條屬性，子級的float、vertical-align就會失效
- 如果相容低版本的機型要加字首-webkit-，包括後面講的所有屬性
容器屬性（父元素樣式） 具體看菜鳥教程或阮一峰的教程，這裡說一下一些重點知識。
- flex-direction：子元素排列方向（主軸的方向，如果設定了column，則意味着主軸旋轉了90度）
- flex-wrap：換行方式
- flex-flow：以上兩種方式的簡寫
- justify-content：水準對齊方式（子元素在主軸上的對齊方式）
- align-items：垂直對齊方式（子元素在交叉軸上的對齊方式）
- align-content：多行垂直對齊方式（多根軸線的對齊方式）
項目屬性（子元素樣式）
- order：排列位置 //如果有兩個的值是相等，按書寫順序排列
-
flex-grow：擴充比例
flex-grow 當父級的寬度大于所有子元素寬度之和時，根據父級的剩餘空間，設定子元素的擴充比例（設定後，元素給的固定寬度會被覆寫）它是一個系數
預設為0，即如果存在剩餘空間，也不擴充
剩餘空間
剩餘空間=父級的寬度-所有子元素的寬度和
注意：如果沒有設定初始寬度，也沒有内容，則預設為0，否則為内容的寬度。例如設定了文字，會撐開有初始寬度。
子元素寬度計算公式 子元素的寬度=（父級的寬度-所有子元素的寬度和）/所有子元素的flex-grow屬性值之和*子元素的flex-grow屬性值+子元素初始寬度 -
flex-shrink：收縮比例
flex-shrink 當所有子元素寬度之和大于父級寬度的時候，根據超出的空間，設定子元素的收縮比例（設定後，元素給的固定寬度會被覆寫）它是一個系數
預設為1，如果給個0的話，就不會收縮
超出空間
超出空間=所有子元素的寬度和-父級的寬度
子元素寬度計算公式 1、算出超出空間，所有子元素的寬度和-父級的寬度 2、子元素的初始寬度*子元素的flex-shrink值 3、算出第二步所有結果的和 4、每個子元素的第二步/第三步*第一步 5、子元素的初始寬度-第四步 - flex-basis：元素的大小
- flex：以上三個屬性的簡寫
- align-self：單獨的垂直對齊方式（交叉軸方向上）
![Flex實作代碼分離mxml/as[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)