web 端 vite 配置 px 转 rem

vite 配置 px 转 rem"/>

web 端 vite 配置 px 转 rem

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'
  

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