一、什么是移動端適配
移動端 Web 頁面，就是常說的手機 h5頁面、webview頁面、公眾號開發的網頁等。
由於手機機型較多，各個手機的屏幕尺寸不一樣，所以做移動端頁面，需要考慮在安卓和ios的各種尺寸設備的兼容問題，我們要做的 web 頁面適配，就是為了在不同設備上，頁面能夠保持統一展示效果，或等比縮放。
二、移動適配方案
常見的移動適配方案有以下幾種：
- viewport
- 盒模型
- flex
- rem
2.1、viewport - 可視區
最初手機端需要照顧 PC 端，如果不設置 viewport，直接訪問網頁的時候，我們發現網頁內容看着很小，這是因為頁面按照PC端最小寬度980展示的，也就是我們的網頁寬度就是980，而手機屏幕寬度通常375、411、320、414等，沒有980那么大，所以頁面被縮小了很多。
設置viewport
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0 maximum-scale=1.0" />
分別對 meta 的各個屬性介紹如下：
- width - 設置viewport的寬度，為一個正整數，或字符串‘device-width’
- initial-scale - 設置頁面的初始縮放值，是一個數字，可以是小數
- maximum-sacle - 設置頁面最大縮放值，是一個數字，可以是小數
- user-scalable - 是否允許用戶進行縮放，值為'yes'或者'no',yes表示可縮放，no表示禁止縮放
- minimum-scale - 允許用戶縮放的最小值，是一個數字，可以是小數
- height - 設置layout viewport的高度，這個屬性很少使用
一般情況下禁止用戶縮放網頁，設置的時候只需要：
<meta name="viewport" content="width=device-width, initial-scale=1.0 , user-scalable=no" >
就可以了，但是由於某些瀏覽器不能識別 initial-scale，所以添加了最大和最小縮放限制。
viewport 設置可視區之后，就會把網頁的寬度設置為移動設備的屏幕寬度。
如想深入學習，可查閱《viewport深入理解和使用 - 前端人 - 博客園》。
2.2、盒模型
CSS3 中新增 box-sizing 屬性，可以設置盒模型類型。屬性值分別為：
content-box - 標准模型
border-box - IE模型
兩者最大區別就是盒子的寬度不同：
標准模型寬 = 內容寬 + padding + border
IE模型寬 = 內容寬（包含padding、border）
這樣做的優點就是可以任意設置它的 padding 和 border，不會擠壓盒子的排列，但是如果設置一個 margin，會立馬改變盒子的排列。
如想深入了解，可查閱《前端面試題中的“盒模型”是什么？》
2.3、flex - 彈性布局
Flex 是 Flex Box 的簡寫，意為彈性布局，為盒子提供最大的靈活性。任何一個元素都可以指定為彈性布局。
使用語法：
.box{ display:-webkit-flex; display:flex; }采用 flex 布局的，也稱 flex 容器，對應的屬性有：
- flex-direction 設置排列方向(向下、向上、向左、向右)的
- flex-wrap 內容放置不下時換行方式
- flex-flow 是flex-direction和flex-wrap屬性簡寫默認值row nowrap
- justify-content 定義在主軸上的對齊方式。
- align-items 定義項目在交叉軸上如何對齊。
- align-content 定義多根軸線的對齊方式
容器內的子元素增加，布局所占的系數：如：
<div class="box"> <div class="child"></div> <div class="child"></div> <div class="child"></div> </div> //其樣式為 .box{ display:-webkit-flex; display:flex; } .child{ flex:1; background:#eee; height:100px; border:solid 1px red; }
此時我們給 child 不論如何設置邊框、內邊距，還有外邊距，三個 child 始終排列在一行。
flex 布局優點：
- 可以實現 border-box 的效果。
- 添加彈性布局之后，元素不需要再使用浮動，清除浮動等。
- 同行元素設置邊框、內外邊距均不影響同行排列。
- 還可使用 max-width、min-width 或固定寬度與 flex 配合使用，另一邊可自動填充功能。
不設置其他屬性的時候，彈性布局默認水平方向從左排列，還可以通過屬性控制垂直方向布局，對齊方式等，可以點擊《flex布局制作自適應網頁 - 前端人 - 博客園》詳細學習。彈性布局超強大，應用也非常廣泛。
2.4、rem
rem是一種相對單位。長度單位可分為兩種：相對單位和絕對單位。
絕對單位：長度是固定的值，反應物理真實尺寸。如：px像素，一個像素相當於我們屏幕的一個小點，屏幕實際就是由很多個像素點組成的，不同顯示器像素大小不同。還有cm、mm、in等等。
相對單位：根據其參考物決定的，參照物大小改變時，它也會改變。如%、rem、em、vh、ex等等。
網頁布局中我們常用到em和rem兩種單位：
em - 是相對於自身的
rem - 是root em,相對於根元素的
em和rem 修改他們自身和html的font-size大小，會改變em、rem單位大小。
特點：使用rem布局時，只需要通過寬度改變html的font-size，就可以改變所有元素大小。注意的是，所有設置大小的時候都要使用rem。