vue3 引入 postcss-px2rem

简介： 用插件postcss-px2rem结合动态更新根节点的font-size 的js代码共同完成，实现在不同的屏幕等比例放大或缩小页面

1. 应用 npm 进行插件的安装： npm i postcss-px2rem --save（尽量不要用yarn安装此插件，可能会有问题）
2. 初始化设置页面缩放及字体缩放大小

   1. 可在src下面新建一个config文件夹如图所示

      

      // 基准大小
      const baseSize = 14;
      
      // 设置 rem 函数
      function setRem() {
        // 当前页面宽度相对于1920宽的缩放比例，基准宽度可根据自己ui设计图修改。
        const scale = document.documentElement.clientWidth / 375;
        // 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）
        document.documentElement.style.fontSize =
          baseSize * Math.min(scale, 1.2) + "px";
      }
      
      // 初始化
      setRem();
      //监听窗口变化 改变窗口大小时重新设置 rem
      window.onresize = function() {
        setRem();
      }
      

   2. 在main.js中引入初始化函数 import "./config/rem";

   3. 在vue.config.js文件中配置

      

      

const px2rem = require("postcss-px2rem");
// 配置基本大小
const postcss = px2rem({
  // 基准大小 baseSize，需要和rem.js中相同
  remUnit: 14
});

//配置路rem适配
postcss: {
  plugins: [autoprefixer(), postcss]
}
```
```