vue-cli3.0中大屏使用rem做响应式(引入rem.js)

因为目前有px转换rem的插件但是我不想用感觉费劲

首先我们先找一段rem.js引入到vue的index.html中

上代码:

<script type="text/javascript">
      /*
      * @ pwidth 设计稿的宽度
      * @ prem 你要1rem比多少px  我的是1rem比100px
      * */
      (function (doc, win, pwidth, prem) {
        var docEl = doc.documentElement,
                resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                recalc = function () {
                  var clientWidth = docEl.clientWidth;
                  if (!clientWidth) return;
                  docEl.style.fontSize = clientWidth / pwidth * prem + 'px';
                };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
      })(document, window, 1920, 100);

    </script>

传值就不用我说了吧   在1920,和100那动粗就行了

这是index.html中的截图

 注意了  在写css的时候单位要都用rem  剩下的不用我说了吧   

希望能帮到需要帮助的人,有更好的办法请留下你的宝贵评论!