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

如果需要使用 rem 单位进行适配，推荐使用以下两个工具:

• postcss-pxtorem 是一款 PostCSS 插件，用于将 px 单位转化为 rem 单位
• lib-flexible 用于设置 rem 基准值

步骤

1.安装依赖 (“postcss-pxtorem”:“5.1.1”，“lib-flexible”:“^0.3.2”)

npm instal 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,
	      propList:[
	        "*",
	        "!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版本实测有效，效果图如下