移动端布局，为了适应大屏手机，最好的方案是采用相对 单位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.可以适配多个屏幕尺寸
