移动端rem适配

引言

如果是做PC端的网页，无需做rem适配，但是做手机H5开发，你将面对千奇百怪的机型，所以我们需要引入rem做适配

准备

Vant官方也为我们提供了方案

postcss-pxtorem是一款postcss插件，用于将单位转化为rem

lib-flexible用于设置rem基准值

安装

npm install lib-flexible -S

npm install postcss-pxtorem -D

引入

//main.js
import "lib-flexible/flexible"

配置

//vite.config.js 新增内容
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig({
  plugins: [
    .....
  ],
  css: {
    postcss: {
      plugins: [
        postCssPxToRem({
          rootValue: 37.5, //1rem的大小
          propList: ["*"], //需要转换的属性，这里现在全部都进行转换
          selectorBlackList: [".norem"], //过渡掉.norem-开头的class,不进行rem转换
        }),
      ],
    },
  },
});