如何在vue-cli3中使用postcss-px2rem

1. 安装postcss-px2rem

cnpm install postcss-px2rem -D

2. 使用

2.1  方法1

在vue.config.js 中

REM是根据根结点来计算各个子节点的值，所以根结点也要做响应式变化。定义一个utils/setRem.js

1. export default function setRem(baseWidth = 750) {

2. const dpr = window.devicePixelRatio;

3. const currentWidth = document.documentElement.clientWidth;

4. let remSize = 0;

5. let scale = 0;

6. scale = currentWidth / baseWidth;

7. remSize = baseWidth / 10;

8. remSize = remSize * scale;

9. document.documentElement.style.fontSize = remSize + 'px';

10. document.documentElement.setAttribute('data-dpr', `${dpr}`);

11. }

在main.js中引入即可  (ui图 通常是2倍图  所以 ui图 多少px 直接定义多少px 即可)

import setRem from './utils/setRem'

setRem(）

2.2 方法2（）

在src目录下创建 viewport.js

文件下载：https://github.com/imochen/hotcss/tree/master/src

这个JS是用来在页面打开的时候给HTML根加上适配的字体大小

然后在main.js下添加：

import './viewport.js'

这里强调下为什么不使用lib-flexible插件

个人在使用lib-flexible插件时，感觉没hotcss友好，

lib-flexible在页面打开的时候，内容渲染完了才在HTML根上添加适配，这样页面会重新渲染一次，导致内容从大变小，或从小变大这样的BUG。

而hotcss就没这个问题。

接下来要安装换算PX换算REM插件

cnpm install postcss-px2rem --save

然后在 vue.config.js加入：

module.exports = {
    lintOnSave: false,//关闭eslint
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({remUnit: 75}), // 换算的基数
                ]
            }
        }
    }
}

最后重启

内容参考：https://blog.csdn.net/u010214074/article/details/84841496

还有 一种 简单  方法（1rem=100px）

<script>

    //author:caibaojian

    //website:http://caibaojian.com

    //weibo:http:weibo.com/kujian

    //兼容UC竖屏转横屏出现的BUG

    //自定义设计稿的宽度：designWidth

    //最大宽度:maxWidth

    //这段js的最后面有两个参数记得要设置，一个为设计稿实际宽度，一个为制作稿最大宽度，例如设计稿为750，最大宽度为750，则为(750,750)

    ; (function (designWidth, maxWidth) {

      var doc = document,

        win = window,

        docEl = doc.documentElement,

        remStyle = document.createElement("style"),

        tid;

      function refreshRem() {

        var width = docEl.getBoundingClientRect().width;

        maxWidth = maxWidth || 540;

        width > maxWidth && (width = maxWidth);

        var rem = width * 100 / designWidth;

        remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

      }

      if (docEl.firstElementChild) {

        docEl.firstElementChild.appendChild(remStyle);

      } else {

        var wrap = doc.createElement("div");

        wrap.appendChild(remStyle);

        doc.write(wrap.innerHTML);

        wrap = null;

      }

      //要等 wiewport 设置好后才能执行 refreshRem，不然 refreshRem 会执行2次；

      refreshRem();

      win.addEventListener("resize", function () {

        clearTimeout(tid); //防止执行两次

        tid = setTimeout(refreshRem, 300);

      }, false);

      win.addEventListener("pageshow", function (e) {

        if (e.persisted) { // 浏览器后退的时候重新计算

          clearTimeout(tid);

          tid = setTimeout(refreshRem, 300);

        }

      }, false);

      if (doc.readyState === "complete") {

        doc.body.style.fontSize = "16px";

      } else {

        doc.addEventListener("DOMContentLoaded", function (e) {

          doc.body.style.fontSize = "16px";

        }, false);

      }

    })(750, 750);

  </script>

或者

<script type="text/javascript">

  $(function () {

    document.documentElement.style.fontSize = innerWidth / 10.8 + 'px';

    window.onresize = function () {

      document.documentElement.style.fontSize = innerWidth / 10.8 + 'px';

    }

  })

</script>