React umi3 移动端自适应rem布局

1.下载

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

npm install lib-flexible --save

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

import pxtorem from 'postcss-pxtorem';

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

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

import 'lib-flexible';

4.postcss-pxtorem会自动将px转换为rem，5.x版本实测有效