1 ：安装
postcss-px2rem
2
在webpack.config.js 中添加
引入
const px2rem = require('postcss-px2rem');
找到：
loader: require.resolve('postcss-loader'),
修改
{
// Options for PostCSS as we reference these options twice
// Adds vendor prefixing based on your specified browser support in
// package.json
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebook/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
require('postcss-preset-env')({
autoprefixer: {
flexbox: 'no-2009',
},
stage: 3,
}),
----------------使用的是antd-mobile 保证转为rem字体大小不变 使用18 个人感觉还可以的---------------------------
px2rem({
remUnit: 18
})
-------------------------------------------
],
sourceMap: isEnvProduction && shouldUseSourceMap,
},
}
3：public/index.html
添加
<script>
// 基准大小(750px)
const baseSize = 32
// 设置 rem 函数
function setRem() {
// 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
const scale = document.documentElement.clientWidth / 750
// 设置页面根节点字体大小
document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
setRem()
}
</script>
效果：