JS部分
var dpr, rem, scale;
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
dpr = window.devicePixelRatio || 1;
console.log(dpr);
rem = docEl.clientWidth * dpr / 16;
scale = 1 / dpr;
// 設(shè)置viewport，進(jìn)行縮放废累，達(dá)到高清效果
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);
// 動(dòng)態(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;
========================================================
Less部分
//這里主要是rem字體大小有變化,這里主要是兼容手機(jī)端
.px2px(@name, @px){
@{name}: round(@px / 2) * 1px;
[data-dpr="1"] & {
@{name}: @px * 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;
}
}
