移動端前端適配方案

首先，談一下目前爲止出現的一些關於移動端適配的技術方案：

（1）經過媒體查詢的方式即CSS3的meida queries

（2）以天貓首頁爲表明的 flex 彈性佈局

（3）以淘寶首頁爲表明的 rem+viewport縮放

（4）rem 方式

1.Media Queries

meida queries 的方式能夠說是我早期採用的佈局方式，它主要是經過查詢設備的寬度來執行不一樣的 css 代碼，最終達到界面的配置。核心語法是：

@media screen and (max-width: 600px) { /*當屏幕尺寸小於600px時，應用下面的CSS樣式*/
  /*你的css代碼*/
}
複製代碼

優勢

• media query能夠作到設備像素比的判斷，方法簡單，成本低，特別是對移動和PC維護同一套代碼的時候。目前像Bootstrap等框架使用這種方式佈局

• 圖片便於修改，只需修改css文件

• 調整屏幕寬度的時候不用刷新頁面便可響應式展現

缺點

• 代碼量比較大，維護不方便

• 爲了兼顧大屏幕或高清設備，會形成其餘設備資源浪費，特別是加載圖片資源

• 爲了兼顧移動端和PC端各自響應式的展現效果，不免會損失各自特有的交互方式

2.Flex彈性佈局

以天貓的實現方式進行說明： 它的viewport是固定的

：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"> 
複製代碼

高度定死，寬度自適應，元素都採用px作單位。

隨着屏幕寬度變化，頁面也會跟着變化，效果就和PC頁面的流體佈局差很少，在哪一個寬度須要調整的時候使用響應式佈局調調就行（好比網易新聞），這樣就實現了『適配』。

3.rem佈局

首先說一下，咱們想要達到的自適應效果是什麼。很簡單：元素、字體大小能隨着屏幕大小（通常相對於寬度來講）變化而變化，在大一點的屏幕上，尺寸大一些；在小一點的屏幕上，尺寸小一些；尺寸的大小和屏幕大小成正比。 最簡單最直接的方案就是直接用百分比設置元素的尺寸。咱們用百分比設置元素大小能夠實現元素尺寸的自適應，可是沒法實現字體大小的自適應，並且尺寸轉化爲百分比計算很麻煩，還有就是元素尺寸的高很難相對屏幕寬度設置百分比。百分比適用於某種具體場景，不是通用解決方案。

其實咱們須要的是一個和屏幕寬度正相關的單位，並且這個單位要和px很容易互相轉化。這樣咱們就可使用這種單位進行元素尺寸和字體大小的設置。那麼css中存在這種單位嗎？答案是：不存在的。。。不過不要灰心，咱們能夠藉助rem來實現這種咱們須要的單位。

rem是一個相對單位，1rem等於html元素上字體設置的大小。咱們只要設置html上font-size的大小，就能夠改變rem所表明的大小。這樣咱們就有了一個可控的統一參考系。咱們如今有兩個目標：

rem單位所表明的尺寸大小和屏幕寬度成正比，也就是設置html元素的font-size和屏幕寬度成正比 rem單位和px單位很容易進行換算，方便咱們按照標註稿寫css

這裏有一個前提，不管是設置html的font-size和屏幕寬度成正比，仍是換算單位，咱們都是以咱們的標註稿爲參考的。移動端的標註稿通常是640px(iphone5)或者750px(iphone6/7/8),如今750px用的比較多一些，咱們假設標註稿是750px的。這裏的750px是指設備的實際尺寸，也是UI標註稿的實際尺寸。而咱們編碼寫的px是指css尺寸，是設備無關的尺寸，css尺寸和屏幕實際尺寸不是1比1的映射關係，而是取決於屏幕的像素密度。好比iphoneX是3倍屏，iphone8是2倍屏，可是兩個的屏幕css尺寸都是375px。而實際的設備尺寸，iphonex是1125px，iphone8是750px，咱們編碼過程當中只須要設置css尺寸，設備會自動幫咱們映射實際的尺寸。咱們按照標註稿寫完頁面以後，頁面應該是能夠在其餘全部尺寸設備上正常自適應地顯示的。

rem單位所表明的尺寸大小和屏幕寬度成正比

首先，設置rem單位所表明的尺寸大小和屏幕寬度成正比，有3中方案,先沒必要糾結其中的數值：

• 媒體查詢, 設定每種屏幕對應的font-size

@media screen and (min-width:240px) {
    html, body, button, input, select, textarea {
        font-size:9px;
    }
}
@media screen and (min-width:320px) {
	html, body, button, input, select, textarea {
		font-size:12px;
	}
}
// 紅米Note2
@media screen and (min-width:360px) {
	html, body, button, input, select, textarea {
		font-size:13.5px;
	}
}
@media screen and (min-width:375px) {
	html, body, button, input, select, textarea {
		font-size:14.0625px;
	}
}

複製代碼

• js設置html的font-size大小

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';


複製代碼

• 使用vw設置，vw也是一個相對單位，100vw等於屏幕寬度

html{
    font-size: 10vw;
}
複製代碼

這3種方式，均可以設置html的font-size和屏幕寬度成正比。這3種的單位是css尺寸,不管第一種方法的min-width仍是第二種document.documentElement.clientWidth都是相對於設備的css尺寸而言，在iphonex和iphone8獲得的結果都是375px。

第一種，須要設置須要每種屏幕都設置對應的font-size,這些font-size都是根據比例算出來的，比較繁瑣，並且還有可能漏掉某些屏幕尺寸，不推薦。第二種用js設置，比較方便，如今大部分網站採用這種方式。第三種經過css的vw來設置，也很方便，並且不用寫css，可是兼容性還不是特別好。綜合推薦使用第二種。

單位換算

如今咱們要使用rem設置元素尺寸和字體大小。有兩種思路：

• 設置特殊的html的font-size,使rem和標註稿上px容易換算，好比把咱們的html的font-size設置成1px，這樣1rem就等於1px，由於咱們標註稿750px，是基於二倍屏的，1個css單位等於2個實際單位，因此咱們的font-size設置爲0.5px，這樣咱們設置尺寸時，rem和標註稿的px，就是1比1映射的。固然這裏全部的大小都是相對於標註稿尺寸來講的，若是是其餘屏幕的尺寸，html的font-size確定要相應的變大或者變小，經過第二種js方法能夠實現：

document.documentElement.style.fontSize = document.documentElement.clientWidth / 750 + 'px';
複製代碼

• 經過css預編譯或者webpack插件，實時計算 好比，咱們將html根元素設置爲16px，標註稿上有一個div元素寬度爲100px,咱們在scss中能夠這樣寫

$rem: 32rem;

div{
	width: 100/$rem;
}
複製代碼