關于移動端適配的技術方案：
（1）通過媒體查詢的方式即CSS3的meida queries
（2）以天貓首頁為代表的 flex 彈性布局
（3）以淘寶首頁為代表的 rem+viewport縮放
（4）rem 方式
1.Media Queries
meida queries 的方式可以說是我早期采用的布局方式褥符，它主要是通過查詢設備的寬度來執(zhí)行不同的 css 代碼崇众，最終達到界面的配置。核心語法是：
@media screen and (max-width: 600px) { /當屏幕尺寸小于600px時舅踪，應用下面的CSS樣式/
/你的css代碼/
}
優(yōu)點
media query可以做到設備像素比的判斷，方法簡單道偷，成本低瘫怜，特別是對移動和PC維護同一套代碼的時候。目前像Bootstrap等框架使用這種方式布局
圖片便于修改前塔，只需修改css文件
調(diào)整屏幕寬度的時候不用刷新頁面即可響應式展示
缺點
代碼量比較大，維護不方便
為了兼顧大屏幕或高清設備承冰，會造成其他設備資源浪費华弓，特別是加載圖片資源
為了兼顧移動端和PC端各自響應式的展示效果，難免會損失各自特有的交互方式
2.Flex彈性布局
以天貓的實現(xiàn)方式進行說明：
它的viewport是固定的：<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
高度定死困乒，寬度自適應寂屏，元素都采用px做單位。
隨著屏幕寬度變化娜搂，頁面也會跟著變化迁霎，效果就和PC頁面的流體布局差不多，在哪個寬度需要調(diào)整的時候使用響應式布局調(diào)調(diào)就行（比如網(wǎng)易新聞）百宇，這樣就實現(xiàn)了『適配』考廉。
3.rem + viewport 縮放
這也是淘寶使用的方案，根據(jù)屏幕寬度設定 rem 值携御，需要適配的元素都使用 rem 為單位昌粤，不需要適配的元素還是使用 px 為單位。（1em = 16px）
PS：rem
rem是CSS3新增的一個相對單位（root em啄刹，根em）涮坐，這個單位引起了廣泛關注。這個單位與em有什么區(qū)別呢誓军？
區(qū)別在于使用rem為元素設定字體大小時膊升，仍然是相對大小，但相對的只是HTML根元素谭企。這個單位可謂集相對大小和絕對大小的優(yōu)點于一身廓译，通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復合的連鎖反應债查。目前非区，除了IE8及更早版本外，所有瀏覽器均已支持rem盹廷。對于不支持它的瀏覽器征绸，應對方法也很簡單，就是多寫一個絕對單位的聲明俄占。這些瀏覽器會忽略用rem設定的字體大小管怠。比如：p{font-size:14px;font-size:0.875rem;}
(推薦一個單位轉(zhuǎn)換的工具：http://pxtoem.com/)
實現(xiàn)原理
根據(jù)rem將頁面放大dpr倍, 然后viewport設置為1/dpr.
如iphone6 plus的dpr為3, 則頁面整體放大3倍, 1px(css單位)在plus下默認為3px(物理像素)
然后viewport設置為1/3, 這樣頁面整體縮回原始大小. 從而實現(xiàn)高清。
這樣整個網(wǎng)頁在設備內(nèi)顯示時的頁面寬度就會等于設備邏輯像素大小缸榄，也就是device-width渤弛。
這個device-width的計算公式為：設備的物理分辨率/(devicePixelRatio * scale)，
在scale為1的情況下甚带，device-width = 設備的物理分辨率/devicePixelRatio 她肯。
4、rem實現(xiàn)
比如說“魅族”移動端的實現(xiàn)方式鹰贵，viewport也是固定的：
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">晴氨。
通過以下代碼來控制rem基準值(設計稿以720px寬度量取實際尺寸)
!function (d) {
var c = d.document;
var a = c.documentElement;
var b = d.devicePixelRatio;
var f;
function e() {
var h = a.getBoundingClientRect().width, g;
if (b === 1) {
h = 720
}
if(h>720) h = 720;//設置基準值的極限值
g = h / 7.2;
a.style.fontSize = g + "px"
}
if (b > 2) {
b = 3
} else {
if (b > 1) {
b = 2
} else {
b = 1
}
}
a.setAttribute("data-dpr", b);
d.addEventListener("resize", function () {
clearTimeout(f);
f = setTimeout(e, 200)
}, false);
e()
}(window);
css通過sass預編譯，設置量取的px值轉(zhuǎn)化rem的變量$px: (1/100)+rem;
