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,
        }),
      ],
    },
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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

/******** 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();
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

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

import '@/utils/rem.js'
1

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