1、安装 lib-flexible 以及 postcss-px2rem

yarn add lib-flexible --save-dev

yarn add postcss-px2rem --save-dev

2、引入 lib-flexible 以及 postcss-px2rem

2.1 在src/app.js中通过引入lib-flexible

import 'lib-flexible'

2.2 在config/config.js或者.umirc.js中配置postcss-px2rem

// config/config.js
import pxtorem from 'postcss-px2rem';
export default defineConfig({
  extraPostCSSPlugins: [
      pxtorem({ 
        remUnit: 192, // 设计稿宽度 / 10
        propList: ['*'] 
      }),
    ]
  });
});

// umirc.js
import pxtorem from 'postcss-px2rem';
export default {
  extraPostCSSPlugins: [
    pxtorem({
      remUnit: 192, // 设计稿宽度 / 10
      propList: ['*'],
    }),
  ],
}

3、如果出现页面根html标签font-size属性无法根据当前页面宽度变化时

打开./node_modules/lib-flexible/flexible.js，找到如下源码片段：

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {
            width = 540 * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

将其改为

    function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }

即可

4、重新启动项目

当node_modules重新npm install或者yarn以后，项目依赖还是需要重新修改一遍的，千万别忘。 如果不想每次修改，就把flexible.js文件从node_modules中剥离出来，修改引用路径即可