vue项目中使用自动转换px->rem的工具

在我们的日常工作中，特别是在使用vue等构建移动端项目的时候会遇到单位的问题，所以需要找到一个可以自动转换成为rem的工具。

javascript代码：

var docEl = document.documentElement;
var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
var recalc = function recalc() {
    var clientWidth = docEl.clientWidth
    if (clientWidth > 1125) {
        docEl.style.fontSize = 60 + 'px';
        return;
    };
    if (clientWidth < 375) {
        docEl.style.fontSize = 20 + 'px';
        return;
    };
    docEl.style.fontSize = 20 * clientWidth / 375 + 'px';
};

window.onload = function() {
    recalc();
    window.addEventListener(resizeEvt, recalc, false);
}

在预编译器中引入上述工具

styl文件中：

rem($number){
    unit(($number / 40), 'rem')
}

页面中使用

1、引入上边的styl文件：

@import '~@/assets/style/common.styl'

2、可以正常使用：

 .wrap {
        width:100%;
        height rem(600)
        background:url('~@/assets/images/teacher-indexBg-bak.png') no-repeat;
    }

这个例子需要在vue中引入stylus，代码如下：

npm install stylus stylus-loader style-loader --save-dev