项目中使用rem的可用方案

兼容性

ie9+

javascript:

<pre>
<code>
//重置font-size
var _w = document.documentElement.offsetWidth;
var htmlDOM = document.getElementsByTagName('html')[0];
if (_w >= 640) {
    _w = 640;
}
htmlDOM.style.fontSize = 100 / 750 * _w + "px";
window.addEventListener('resize', function() {
    var _w = document.documentElement.offsetWidth;

    if (_w >= 640) {
        _w = 640;
    }
    htmlDOM.style.fontSize = 100 / 750 * _w + "px";
});
</code>
</pre>

解释：

该方案把屏幕划分为1/10=1rem计算；
UI提供的psd设计稿需要调整为：宽=320px；
然后再进行测量取值；
使用：测量值/320px/10/1rem=使用的rem

例子：

<pre>
<code>
    //less
    @divide:10;
    @pswWidth:320;
    @ppr:320px/@divide/1rem;
    li{
        // width:测量值/@ppr;
        width:200px/@ppr;
      }
</code>
</pre>

注意点：

要考虑环境占用的位置。（如：微信浏览器的头部导航占用的位置）