在项目中经常会遇到需要适配移动端的情况，而适配移动端有许多解决方案，如百分比、em、rem、vw、弹性布局等等，这里介绍的是使用 rem 方案，rem 是一个相对单位，相对的是 html 根元素 font-size 的大小。简单来说就是我们给 html 根元素设置一个 font-size，这个值是多少，那就相当于 1rem 等于多少。这就涉及到频繁的换算，将设计稿的 px 转换成 rem，那么如何实现自动转换呢？就是我们直接按设计稿来写，然后会自动将之转换为 rem，无需手动去计算。答案当然是有的，这里使用了插件 postcss-pxtorem

1、安装 postcss-pxtorem

npm install postcss-pxtorem --save-dev

2、在 craco.config.js 配置文件中添加如下配置：

module.exports = {
	......
    style: {
        postcss: {
            mode: 'extends',
            loaderOptions: {
                postcssOptions: {
                    ident: 'postcss',
                    plugins: [
                        require('postcss-pxtorem')({
                        	/*
                        		设置html根元素font-size的大小，
                        		通常设置为设计稿宽度/10（设计稿尺寸通常为375或750）
                        	 */
                            rootValue: 16, 
                            unitPrecision: 5, // 转换后的小数保留位数
                            replace: true, // 是否替换，默认为true
                            propList: ['*'], // 需要转换的属性，这里选择转换所有属性
                            selectorBlackList: ['.ignore'], // 忽略转换的选择器
                            exclude: /node_modules/i, // 排除node_modules文件夹下的文件
                            mediaQuery: false, // 是否转换媒体查询中的px
                            minPixelValue: 2, // 大于或等于2px的才转换
                        }),
                    ],
                },
            },
        },
    },
}

由于更改了配置文件，所以需要重启项目，现在我们在项目中写的样式文件中的 px（.ignore 选择器除外）会自动转换为 rem 单位，还没完，这里因为我们写死了 html 根元素 font-size 的大小，所以不管在什么尺寸的设备上，元素的大小都是一样的，无法做到移动端适配，因此我们需要想办法来动态设置 HTML 元素 font-size 的大小来达到目的。

3、在 src 文件夹下建立 utils 目录，该目录下建立 rem.js 文件，代码如下

// 基准大小，一定要跟上面craco.config.js中rootValue值保持一样
const baseSize = 16
// 设置 rem 函数
function setRem () {
    // 当前页面宽度相对于 375 宽的缩放比例，可根据自己需要修改，设计稿是多少就是多少。
    const scale = document.documentElement.clientWidth / 375
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
    setRem()
}

4、在项目入口文件 index.js 或 index.tsx 中引入 rem 文件

import "./utils/rem"

至此，相关配置均已完成，重启项目，就可以愉快地玩耍了