移動端（三）—— rem適配和flex適配
之前說過百分比適配、比例縮放適配和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: 0;
}
div{
/*width: 80px;*/
height: 100px;
width: 4rem;
height: 4rem;
/*1rem=20; nrem=80; n=80/rem; n=80/20; n=4*/
background: green 注意：
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設計稿上：
設計稿上75px 對應 0.75rem, 距離佔設計稿的10%；
在ipone6上：
width = document.documentElement.clientWidth = 375px；
1rem = 375px / 7.5 = 50px;
0.75rem = 37.5px; (37.5/375=10%；佔螢幕10%)
在ipone5上：
width = document.documentElement.clientWidth = 320px；
rem = 320px / 7.5 = 42.667px;
0.75rem = 32px; (32/320=10%；佔螢幕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檔案的書寫如下所示
比如想設定寬度為187px，高度為100px的元素，可以通過下面方式計算適配
@rem：25rem； /*這是1rem = X px的X的值，但是用了rem做單位而已*/
div{
width: 187/@rem;
height: 100/@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：單獨的垂直對齊方式（交叉軸方向上）