web 端 vite 配置 px 转 rem

• 下载插件 postcss-pxtorem

  npm install postcss-pxtorem -D

• 在 vite.config.ts 中配置

  const postCssPxToRem = require("postcss-pxtorem");
  
  export default defineConfig({
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            // 换算基数，
            rootValue: 16,
            //允许REM单位增长到的十进制数字,小数点后保留的位数
            unitPrecision: 5,
            propList: ['*'],
            //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            exclude: /(node_module)/,
            //（布尔值）允许在媒体查询中转换px。
            mediaQuery: false,
            //要忽略并保留为px的选择器，本项目我是用的vant ui框架，所以忽略他
            selectorBlackList: ['.van'],
            //设置要替换的最小像素值
            minPixelValue: 1,
          }),
        ],
      },
    }
  })
  

• 根据设计稿编写自适应脚本

  /******** src/utils/rem.js ********/
  
  const baseSize = 16;
  // 设置 rem 函数
  
  function setRem() {
    // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / 704;
    // 设置页面根节点字体大小
  
    document.documentElement.style.fontSize =
    baseSize * Math.min(scale, 2) + 'px';
  }
  // 初始化
  setRem();
  // 改变窗口大小时重新设置 rem
  window.onresize = function () {
    setRem();
  };
  

• 在 .vue 文件中引入 rem.js 文件

  import '@/utils/rem.js'
  

• 在浏览器控制台中查看是否转换成功