移動端布局，為了適應大屏手機，最好的方案是采用相對 單位rem
基于rem的原理，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態的改變根節點html的font-size大小(基準值)。
提取公式：rem = document.documentElement.clientWidth * dpr / 10（便于字體放大縮小吧）此時rem值為物理像素大小，其中clientWidth＝手機分辨率／(dpr＊initial-scale)
則rem ＝ 手機分辨率/initial-scale
瀏覽器默認字體大小為16px；
設置不同分辨率屏幕保持高清的方法：關鍵詞rem initial-scale
第一步：根據手機分辨率，根節點字體大小，讓字體大小和手機的分辨率匹配：
rem = document.documentElement.clientWidth * dpr / 10（此時rem值為手機物理像素大小除以10）
第二步：利用縮放，使手機的邏輯像素和物理像素比例為1:1；
設置方法：
｀｀｀
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
scale = 1 / dpr;
dpr = win.devicePixelRatio || 1;
rem = docEl.clientWidth * dpr / 10;
// 設置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;
｀｀｀
視覺稿還原方法
對于視覺塊的處理：
原高度通過 rem = px / 基準值;
其中基準值的計算就是上面所提到的方法
通過預編譯器如less寫一個轉換函數
.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
這樣對于視覺稿中固定寬度的塊我們可以通過預編譯函數進行轉換
對于400*300的塊我們可以這樣定義
.px2rem(width, 400);
.px2rem(height, 300);
轉換后
width: 5.33.rem; // ->400px
height: 4rem; // -> 300px
字體大小自適配
通過設置的data-dpr去hack字體，讀取data-dpr，通過data-ptr的值利用預編譯器設置字體大小
.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;
}
}
這樣做的好處：
1.可以實現1px寬度定義
2.高清圖片獲取，邏輯尺寸和實際尺寸一致，獲取圖片更準確
3.方便修改尺寸
4.可以適配多個屏幕尺寸
