移动端自适应rem布局 postcss-pxtorem

适用于Vue3、React Umi3等 

1.安装依赖 (postcss-pxtorem@5.1.1；lib-flexible)

npm install postcss-pxtorem@5.1.1 --save-dev
npm install lib-flexible --save

2.添加配置

（1）Vue3项目中，在根目录下自己添加 postcss.config.cjs文件夹

// postcss.config.js
module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: [
        '*',
        '!border',
        '!border-top',
        '!border-right',
        '!border-bottom',
        '!border-left',
        '!border-width',
      ],
      selectorBlackList: ['html'],
    }
  }
}

（2）umi项目中

① 在umirc.ts中添加几行代码

import { defineConfig } from 'umi';
import pxtorem from 'postcss-pxtorem'

export default defineConfig({
  // ...
  fastRefresh: {},
  extraPostCSSPlugins: [
    pxtorem({
      rootValue: 37.5, // UI设计图宽为375
      propList: [
        '*',
        '!border',
        '!border-top',
        '!border-right',
        '!border-bottom',
        '!border-left',
        '!border-width',
      ],
      selectorBlackList: ['html'],
    }),
  ],
  // ...
});

②在src/app.js中添加一行代码，若没有app.js则新建一个

import 'lib-flexible'

3.postcss-pxtorem会自动将px转换为rem，效果图如下

欢迎小伙伴评论，互相学习哟！