關於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';