摘要：最近看了好多移動適配的資料，整理了一下以作后續開發少出哈哈移動端布局，為了適配各種大屏手機，目前最好用的方案莫過于使用相對單位。

最近看了好多移動適配的資料，整理了一下
以作后續開發少出bug（哈哈~）
移動端布局，為了適配各種大屏手機，目前最好用的方案莫過于使用相對單位rem。
基于rem的原理，我們要做的就是:
針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。
這里我們提取了一個公式(rem表示基準值)
rem = document.documentElement.clientWidth * dpr / 10

如何轉換成rem單位呢？
公式如下：
rem = px / 基準值;

首先，先說一個常識，瀏覽器的默認字體高都是16px。
使用%單位方便使用
css中的body中先全局聲明font-size=62.5%，這里的%的算法和rem一樣。
因為100%=16px，1px=6.25%，所以10px=62.5%，
這是的1rem=10px，所以12px=1.2rem。px與rem的轉換通過10就可以得來，很方便了吧！
使用方法
注意，rem是只相對于根元素htm的font-size，即只需要設置根元素的font-size，其它元素使用rem單位設置成相應的百分比即可；
例子：

一般情況下，是這樣子使用的

移動端做適配的時候，可以使用這樣的方法

首先得讓文字和標簽的大小隨著屏幕的尺寸做變化 等比縮放，然后在把計算出的值賦給html

這樣當前窗口的字體就能獲取到了，然后我們再設置窗口大小改變的情況，其實也就是加一個窗口改變的監聽事件onresize。發生了onresize，就重新計算該窗口下根目錄字體的大小。

上文也提到了dpr那么什么是dpr呢 通俗點講就是
花了200px的長寬來渲染CSS里面定義的100px的長寬
而樣式pixels和設備pixels的比值，就是dpr，即Device Pixel Ratio

為了防止全局變量污染或者覆蓋他人的變量，可封裝成模塊再使用。

lib-flexible是一個制作H5適配的開源庫
你可以直接使用阿里CDN

將代碼中的{{version}}換成對應的版本號0.3.4。
詳情：https://github.com/amfe/artic...

方案五：
與方案三有一曲同工之妙，寫得比較全
javascript方式，通過上面的公式，計算出基準值rem，然后寫入樣式，大概如下

var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement("style");
var metaEl = document.querySelector("meta[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!important;}";

// 給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;

既然上面的方案會使得頁面縮放(scale)，
對于字體縮放問題，設計師原本的要求是這樣的：任何手機屏幕上字體大小都要統一，所以我們針對不同的分辨率(dpr不同)，會做如下處理：
font-size: 16px;
[data-dpr="2"] input {
font-size: 32px;
}
(注意，字體不可以用rem，誤差太大了，且不能滿足任何屏幕下字體大小相同)
為了方便，我們也會用less寫一個mixin：

.px2px(@name, @px){
@{name}: round(@px / 2) * 1px;
[data-dpr="2"] & {
@{name}: @px * 1px;
}
// for mx3
[data-dpr="2.5"] & {
@{name}: round(@px 2.5 / 2) 1px;
}
// for 小米note
[data-dpr="2.75"] & {
@{name}: round(@px 2.75 / 2) 1px;
}
[data-dpr="3"] & {
@{name}: round(@px / 2 3) 1px
}
// for 三星note4
[data-dpr="4"] & {
@{name}: @px * 2px;
}
}