移動端布局诈铛，為了適應(yīng)大屏手機蔚润，最好的方案是采用相對 單位rem
基于rem的原理裸弦，我們要做的就是: 針對不同手機屏幕尺寸和dpr動態(tài)的改變根節(jié)點html的font-size大小(基準(zhǔn)值)。
提取公式：rem = document.documentElement.clientWidth * dpr / 10（便于字體放大縮小吧）此時rem值為物理像素大小域庇，其中clientWidth＝手機分辨率／(dpr＊initial-scale)
則rem ＝ 手機分辨率/initial-scale
瀏覽器默認字體大小為16px携兵；
設(shè)置不同分辨率屏幕保持高清的方法：關(guān)鍵詞rem initial-scale
第一步：根據(jù)手機分辨率疾掰，根節(jié)點字體大小，讓字體大小和手機的分辨率匹配：
rem = document.documentElement.clientWidth * dpr / 10（此時rem值為手機物理像素大小除以10）
第二步：利用縮放徐紧，使手機的邏輯像素和物理像素比例為1:1静檬；
設(shè)置方法：
｀｀｀
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;
// 設(shè)置viewport，進行縮放并级，達到高清效果
metaEl.setAttribute('content', 'width=' + dpr * docEl.clientWidth + ',
initial-scale=' + scale + ',maximum-scale=' + scale + ',
minimum-scale=' + scale + ',user-scalable=no');
// 設(shè)置data-dpr屬性拂檩，留作的css hack之用，適配字體大小
docEl.setAttribute('data-dpr', dpr);
// 動態(tài)寫入樣式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + rem + 'px!important;}';
// 給js調(diào)用的嘲碧，某一dpr下rem和px之間的轉(zhuǎn)換函數(shù)
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 / 基準(zhǔn)值;
其中基準(zhǔn)值的計算就是上面所提到的方法
通過預(yù)編譯器如less寫一個轉(zhuǎn)換函數(shù)
.px2rem(@name, @px){
@{name}: @px / 75 * 1rem;
}
這樣對于視覺稿中固定寬度的塊我們可以通過預(yù)編譯函數(shù)進行轉(zhuǎn)換
對于400*300的塊我們可以這樣定義
.px2rem(width, 400);
.px2rem(height, 300);
轉(zhuǎn)換后
width: 5.33.rem; // ->400px
height: 4rem; // -> 300px
字體大小自適配
通過設(shè)置的data-dpr去hack字體稻励，讀取data-dpr，通過data-ptr的值利用預(yù)編譯器設(shè)置字體大小
.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.可以實現(xiàn)1px寬度定義
2.高清圖片獲取，邏輯尺寸和實際尺寸一致望抽，獲取圖片更準(zhǔn)確
3.方便修改尺寸
4.可以適配多個屏幕尺寸
