移動端 Web頁面適配

由於手機機型較多，各個手機的螢幕尺寸不一樣，所以做移動端頁面，需要考慮在安卓和ios的各種尺寸裝置的相容問題，我們要做的 web 頁面適配，就是為了在不同裝置上，頁面能夠保持統一展示效果，或等比縮放。

常見的移動適配方案有以下幾種：

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 的各個屬性介紹如下：

一般情況下禁止使用者縮放網頁，設定的時候只需要：

就可以了，但是由於某些瀏覽器不能識別 initial-scale，所以新增了最大和最小縮放限制。

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

採用 flex 布局的，也稱 flex 容器，對應的屬性有：

容器內的子元素增加，布局所佔的係數：如：

<
div 
class
="box"
>
<
div 
class
="child"
>
div>
<
div 
class
="child"
>
div>
<
div 
class
="child"
>
div>
div>
//其樣式為
.box
.child

此時我們給 child 不論如何設定邊框、內邊距，還有外邊距，三個 child 始終排列在一行。

flex 布局優點：

不設定其他屬性的時候，彈性布局預設水平方向從左排列，還可以通過屬性控制垂直方向布局，對齊方式等。彈性布局超強大，應用也非常廣泛。

2.4、rem

rem是一種相對單位。長度單位可分為兩種：相對單位和絕對單位。

絕對單位：長度是固定的值，反應物理真實尺寸。如：px畫素，乙個畫素相當於我們螢幕的乙個小點，螢幕實際就是由很多個畫素點組成的，不同顯示器畫素大小不同。還有cm、mm、in等等。

網頁布局中我們常用到em和rem兩種單位：

em - 是相對於自身的

rem - 是root em,相對於根元素的

em和rem 修改他們自身和html的font-size大小，會改變em、rem單位大小。

特點：使用rem布局時，只需要通過寬度改變html的font-size，就可以改變所有元素大小。注意的是，所有設定大小的時候都要使用rem。