关于rem
这种技术需要一个参考点，一般都是以<body>的“font-size”为基准。
比如我们设置body，html的字体大小为10px；那么1rem就是10px,
这样一来，我们设置字体大小相当于“14px”时，只需要将其值设置为“1.4em”。
1.手机淘宝一直用的方法：思路是通过js动态的获取 设备的DPR（设备像素比），根据dpr来改变标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>
中的属性值；
代码如下
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;}‘;
window.dpr = dpr;
window.rem = rem;
此时 在dpr=2时1rem=75px;
所以如果我们要设置div的宽度为750px;(注：750px,为设计稿中div的宽度)就要写为：width：750/75*1rem;
最后因为dpr为2，页面scale了0.5，所以在手机屏幕上显示的真实宽高应该是375px，就刚刚好。
如果设置的值不是好算的数字，比如123px,那就很蛋疼了
为了减少计算，在less中可以定义以下函数
.change_val(@name, @px){
@{name}: @px / 75 * 1rem;
}
这样在less中就可以写为
.container{
.change_val (width,123); //123是设计稿原值
.unchanged_val(font-size,100)
}
另：在设计中我们一般希望font-size一直固定不变对此：
.unchanged_val(@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 /*3 / 2) * 1px
}
[data-dpr="3.5"] & {
@{name}: round(@px * 3.5 / 2) * 1px;
}
// for 三星note4
[data-dpr="4"] & {
@{name}: @px * 2px;
}
}
2.我们可以以iphone6（375*667）设计稿为原型：
设置css
html {
font-size: calc(100vw/3.75);
}
这个意思就是设置 html的font-size为100px;
因为这样写比较方便，比如在写一个div宽度为75px时，直接定义width：0.75rem;就可以了
为了避免calc()的兼容性问题，可以加上如下js；
document.documentElement.style.fontSize = window.innerWidth/3.75 + ‘px‘;
