PostCSS-px2rem 是一个 PostCSS 插件，用于将px 单位转换为 rem 单位。它通过在 CSS 代码中查找所有的像素值（px），并将其转换为 rem 单位来实现这一目的。

使用方法：

1. 安装postcss-pxtorem

   npm i postcss-pxtorem@5.1.1 -D
   

2. vue.config.js里面配置postcss-pxtorem

    css: {
        loaderOptions: {
        postcss: {
            plugins: [
            require('postcss-pxtorem')({
                rootValue : 16, // 浏览器默认值字体大小为16
                selectorBlackList  : [], 
                propList   : ['*'],
            }),
            ]
        }
        },
    }
   

3. 创建rem.js文件

    function setRem() {
        // 以1920分辨率为基准，将视口分为120份，每一份为16px，即1rem=16px
        const screenWidth = 1920
        const scale = screenWidth / 16
        const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
        const htmlDom = document.getElementsByTagName('html')[0]
        // 设置根元素字体大小
        htmlDom.style.fontSize = htmlWidth / scale + 'px'
    }
    // 初始化
    setRem()
    // 改变窗口大小时重新设置 rem
    window.onresize = function() {
        setRem()
    }
   

4. 在main.js中引入rem.js

   import '@/util/rem'
   

5. 重启+执行