1.JS的根據不同屏幕寬度動態設置html的font-size，使用rem布局。
a.手淘方案 flexible+rem（參考https://github.com/amfe/article/issues/17）
引入flexible.js，不需要在html結構中加入viewport標簽。
flexible.js會在<html>元素上增加一個data-dpr屬性，以及一個font-size樣式。JS會根據不同的設備添加不同的data-dpr值，比如說2或者3；同時會給html加上對應的font-size的值，比如說75px；以及會添加viewport標簽，JS會根據不同的設備添加不同的縮放比(建議內聯處理，在所有資源加載之前執行這個JS)
例如：設計稿是750px寬度，將750px進行10等分，則1rem=75px,
如果設計稿中量出某塊區域的margin-top值20px，對應換算成rem為20/75=0.266667rem。
css代碼就是margin-top:0.266667rem。
b.不引入第三方庫，自寫js動態設置html的font-size+rem
(function (doc, win) {
var docEl = doc.documentElement,//根元素html
//判斷窗口有沒有orientationchange這個方法，有就賦值給一個變量，沒有就返回resize方法。
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
//把document的fontSize大小設置成跟窗口成一定比例的大小，從而實現響應式效果。
docEl.style.fontSize = 16* (clientWidth / 375) + 'px';
};
//alert(docEl)
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);//addEventListener事件方法接受三個參數：第一個是事件名稱比如點擊事件onclick，第二個是要執行的函數，第三個是布爾值
doc.addEventListener('DOMContentLoaded', recalc, false)//綁定瀏覽器縮放與加載時間
})(document, window);
js會根據不同設備的寬度設置html的font-size，html結構需要加入
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
屏幕根據設計稿的比例轉換對應的rem值，比如：
750的設置 = 16*(clientWidth/375)
640的設置 = 20*(clientWidth/320)
320的設置 = 10*(clientWidth/320)
例如：設計稿是750px寬度（基於iphone6 375*2=750 得到的設計稿），如果設計稿中量出某塊區域的margin-top值20px，
在實際iphone6設備375px寬度中，應該除以2，所以得到值mragin-top是20/2=10px,
因為1rem=16px（16*（iphone6設備寬度/375）+'px'）,所以對應換算成rem為10/16=0.625rem。
css代碼中就是margin-top:0.625rem。
2.flex布局，不使用rem，直接使用px。
html結構需要加入<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
例如：設計稿是750px寬度，設計稿是750px寬度（基於iphone6 375*2=750 得到的設計稿），
如果設計稿中量出某塊區域的margin-top值20px，
在實際iphone6設備375px寬度中，應該除以2，所以得到值mragin-top是20/2=10px。
css代碼中就是margin-top:10px。