前端適配：移動端/web端適配方案

科普：

動態適配，實際上是指在須要適配的地方進行適配處理，而不是全局的，全部的元素都進行適配處理；

rem

rem是CSS3新增的一個相對單位（root em，根em）這個單位與em有什麼區別呢？
區別在於
1.使用rem爲元素設定字體大小時，仍然是相對大小，但相對的只是HTML根元素。
2.這個單位可謂集相對大小和絕對大小的優勢於一身，經過它既能夠作到只修改根元素就成比例地調整全部字體大小，又能夠避免字體大小逐層複合的連鎖
3.除了IE8及更早版本外，全部瀏覽器均已支持rem。對於不支持它的瀏覽器，應對方法也很簡單，就是多寫一個絕對單位的聲明。
這些瀏覽器會忽略用rem設定的字體大小。好比：p{font-size:14px;font-size:0.875rem;}

(推薦一個單位轉換的工具：http://pxtoem.com/)
複製代碼

1.經過媒體查詢的方式：css3的media queries

media queries :主要經過查詢不一樣的寬度來執行不一樣的css代碼，最終以達到界面的配置。
核心語法：
@media screen and(max-width:600px){
	/**
		*/
	html{
	 font-size:32px;
	}
}
複製代碼

優勢：

• media query 能夠作到設備像素比的判斷，方法簡單，成本較低，特別是對於PC端和移動端維護同一套代碼的時候；Bootstrap框架就是使用這種方式佈局；
• 調整屏幕寬度的時候，不須要刷新頁面便可響應；
• 圖片便於修改，只須要修改CSS文件；

缺點：

• 代碼量大，維護不方便 -爲了兼顧大屏幕或高清設備，會形成其餘設備資源浪費，特別是加載圖片資源
• 爲了兼顧移動端和PC端各自響應式的展現效果，不免會損失各自特有的交互方式

2.淘寶觸屏版以flex彈性盒子佈局,實現移動端適配：

以淘寶觸屏版首頁爲表明的flex彈性佈局+width:100%百分比單位；不須要適配的地方仍然是px單位；

如下爲例： 淘寶網觸屏版

在iphone6/7/8 下： 底部tab欄，position:fixed定位；display:flex;盒子佈局；flex-direction:row;justify-content:space-between;

在iPad下： 在中間分類欄：以position:absolute;display:flex;flex-direction:column;彈性盒子

京東商城的開發團隊一樣也使用了移動端/web端相同的適配佈局方式：京東開發團隊

在我我的看來，flex彈性盒子佈局，以其靈活方便的優點，在適配佈局上佔據了一席主流地位；flex+vw的佈局方式/flex+百分比的佈局方式更受前端開發者的歡迎

3.的rem+viewport縮放

根據屏幕寬度設定rem值，須要適配的元素都使用rem單位，不須要適配的元素仍是使用px單位。1em=16px;
複製代碼

實現原理：

1.根據rem將頁面放大dpr倍, 而後viewport設置爲1/dpr.

如iphone6 plus的dpr爲3, 則頁面總體放大3倍, 
1px(css單位)在plus下默認爲3px(物理像素) 

而後viewport設置爲1/3, 這樣頁面總體縮回原始大小. 從而實現高清。
複製代碼

這樣整個網頁在設備內顯示時的頁面寬度就會等於設備邏輯像素大小，也就是device-width。 這個device-width的計算公式爲：設備的物理分辨率/(devicePixelRatio * scale)， 在scale爲1的狀況下，device-width = 設備的物理分辨率/devicePixelRatio 。