移動端布局，為了適配各種大屏手機，目前最好的方案莫過于使用相對單位 ?rem.
基于rem的原理，我們要做的就是針對不同手機屏幕尺寸，和dpr動態的修改根節點HTML的font-size的大小（基準值）。
這里我們提取一個計算rem的公式：
rem = document.documentElement.clientWidth * dpr / 10；
說明：
1. 乘以dpr ，是因為頁面有可能為了實現 1px border 頁面會縮放（scale）1/ dpr 倍（如果沒有，dpr=1）。
2. 除以 10 ，這純粹是為了取整，方便計算，這個值可以是任何值，根據個人喜好定。
所以就像，下面這樣，HTML的font-size可能會是：
iPhone 3 ： 320px / 10 = 32px;
iPhone 4/5 ：320px * 2 / 10 = 64px;
iPhone 6 : ? 375px * 2 / 10 = 75px;
對于動態改變根節點的font-size，我們可以通過css做，也可以通過JavaScript做。
css方式，可以通過設備寬度來媒體查詢改變HTML的font-size：
html { font-size : 32px; }
//iphone 6
@media( min-device-width : 375px ){
? ? ? ? ? ? ? html{ font-size : 64px; }
}
// iphone6 plus
@media( min-device-width : 414px ){
? ? ? ? ? html{ font-size : 75px; }
}
缺點：通過設備寬度 ”范圍查詢“ ，這樣的媒體查詢來動態改變rem基準值，其實不夠精確，比如：寬度為360px和寬度320px的手機，因為屏寬在同一個范圍區間內（<375px）,所以會被等同對待（rem基準值相同），而事實上他們的屏幕寬度并不相等，他們的布局也應該有所不同。最終結論就是：這樣的做法，沒有做到足夠的精確，但是夠用。
JavaScript方式，通過上面的公式，計算出基準值rem，然后寫入樣式
var ?dpr , rem , scale;
var docEl = document.documentElement;
var fontEl = document.createElement("style");
var metaEl = document.querySelector("mate[name = 'viewport']");
dpr = window.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
scale = 1 / dpr;
// 設置viewport ，進行縮放，達到高清的效果；
metaEl.setAttribute('content','width=', + dpr * docEl.clientWidth + ',initial-scale='+scale+',maximum-scale='+scale+', minimum-scale='+scale+',user-scalable=no');
//設置data-dpr屬性，留作css hack之用
docEl.setAttribute('data-dpr',dpr);
//動態寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px !importment; }';
//給js調用的，某一dpr下rem和px之間的轉換函數
window.rem2px = function ( v ) {
? ? ? ?v = parseFloat ( v );
? ? ? ?return v * rem;
};
window.px2rem = function ( v ){
? ? ? ? v = parseFloat（ v ）;
? ? ? ? return ?v / rem;
}
window.dpr = dpr;
window.rem = rem;
這種方式可以精確的計算出不同屏幕所對應的rem基準值，缺點就是要加載一段js代碼，但是個人覺得這是目前最好的解決方式。
因為這個方案同時解決了三個問題：
1. 1px border 的問題。
2. 圖片高清問題。
3. 屏幕適配布局問題。
字體大小問題
既然上面的方案會使得頁面縮放（scale），對于頁面區域的寬高，我們可以依賴高清視覺稿，因為視覺稿本來就是x2的，我們直接量就可以了，那么對于字體該如何處理那？
對于字體的縮放問題，設計師原本的要求是在任何手機屏幕上字體大小都要統一，所以我們針對不同的dpr直接使用px就可以了。
font-size ： 16px;
[ data-dpr = '2' ] input {
? ? ? ?font-size : 32px;
}
字體不可以使用rem，誤差太大，且不能滿足任何屏幕下文字大小相同。
手淘手機適配參考文章：http://blog.csdn.net/liujie19901217/article/details/51982403
