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

步骤

1.安装依赖（"postcss-pxtorem": "^5.1.1", "lib-flexible": "^0.3.2"）

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

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

const pxtorem = require('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版本实测有效，效果图如下：


©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容