react配置postcss-pxtorem适配

适配移动端操作如下：

安装 postcss-pxtorem 、amfe-flexible

npm i postcss-pxtorem
npm i amfe-flexible

amfe-flexible(可以安装，可以自己写），如下是我通过 amfe-flexible 修改的flexible 文件：

(function flexible(window, document) {
    var docEl = document.documentElement;
    var dpr = window.devicePixelRatio || 1;

    // adjust body font size
    function setBodyFontSize () {
        if (document.body) {
            document.body.style.fontSize = 12 * dpr + 'px';
        } else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize);
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        let rem =
            Math.floor(
                (docEl.clientHeight > docEl.clientWidth
                    ? docEl.clientWidth / 10
                    : (docEl.clientHeight / 10) * 0.7) * 100
            ) / 100;
        docEl.style.fontSize = rem + 'px';
    }

    setRemUnit();

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit);
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            setRemUnit();
        }
    });

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement('body');
        var testElement = document.createElement('div');
        testElement.style.border = '.5px solid transparent';
        fakeBody.appendChild(testElement);
        docEl.appendChild(fakeBody);
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines');
        }
        docEl.removeChild(fakeBody);
    }
})(window, document);

在index.js 中引入当前amfe-flexible.js

如果你使用的 craco 进行配置，配置如下

module.exports = {
  style: {
        postcss: {
            mode: 'extends',
            loaderOptions: (postcssLoaderOptions, { env, paths }) => {
                postcssLoaderOptions.postcssOptions.plugins = [
                    ...postcssLoaderOptions.postcssOptions.plugins,
                    [
                        'autoprefixer',
                        {
                            overrideBrowserslist: [
                                'last 2 version',
                                '>1%',
                                'Android >= 4.0',
                                'iOS >= 7'
                            ]
                        }
                    ],
                    [
                        'postcss-pxtorem',
                        {
                            rootValue ({ file }) {
                                // return file.indexOf('antd-mobile') > -1 ? 37.5 : 75;
                                return 37.5;
                            },
                            unitPrecision: 2, //只转换到两位小数
                            propList: ['*']
                        }
                    ]
                ];
                return postcssLoaderOptions;
            }
        }
    },  
}

使用 npm eject 配置webpack

{
                loader: require.resolve('postcss-loader'),
                options: {
                    postcssOptions: {
                        ident: 'postcss',
                        config: false,
                        plugins: !useTailwind
                            ? [
                                'postcss-flexbugs-fixes',
                                [
                                    'postcss-preset-env',
                                    {
                                        autoprefixer: {
                                            flexbox: 'no-2009'
                                        },
                                        stage: 3
                                    }
                                ],
                                'postcss-normalize',
                                [
                                    'postcss-pxtorem',
                                    {
                                        rootValue: 37.5,
                                        propList: ['*']
                                    }
                                ]
                            ]
                            : [
                                'tailwindcss',
                                'postcss-flexbugs-fixes',
                                [
                                    'postcss-preset-env',
                                    {
                                        autoprefixer: {
                                            flexbox: 'no-2009'
                                        },
                                        stage: 3
                                    }
                                ]
                            ]
                    },
                    sourceMap: isEnvProduction ? shouldUseSourceMap : isEnvDevelopment
                }
            }