1、 計算 js

在index.html中添加以下js

<script>
        !(function(win, doc) {
            function setFontSize() {
                var baseFontSize = 100;
                var baseWidth = 320;
                var clientWidth = document.documentElement.clientWidth ||         window.innerWidth;
                var innerWidth = Math.max(Math.min(clientWidth, 480), 320);
                var rem = 100;
                if (innerWidth > 362 && innerWidth <= 375) {
                    rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.9);
                }
                if (innerWidth > 375) {
                    rem = Math.floor(innerWidth / baseWidth * baseFontSize * 0.84);
                }
                window.__baseREM = rem;
                document.querySelector('html').style.fontSize = rem + 'px';
            }
            var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
            var timer = null;
            win.addEventListener(evt, function() {
                clearTimeout(timer);
                timer = setTimeout(setFontSize, 300);
            }, false);
            win.addEventListener("pageshow", function(e) {
                if (e.persisted) {
                    clearTimeout(timer);
                    timer = setTimeout(setFontSize, 300);
                }
            }, false);
            setFontSize();
        }(window, document));
    </script>

2、配置webpack.config.js

由于react默認隱藏webpack配置需要手動顯示。首先執行命令顯示webpack配置

npm run eject
//Are you sure you want to eject? This action is permanent. (y/N) 
y
安裝以下包：lib-flexible sass-loader node-sass postcss-px2rem-exclude

npm i lib-flexible sass-loader node-sass postcss-px2rem-exclude --save

修改webpack.config.js ，首先引入：

const px2rem = require('postcss-px2rem-exclude');
//加入
 px2rem({remUnit:75,exclude: /node_modules/i})

然后找到處理postcss-loader的地方：

image.png

在我們的入口文件index.js 中引入lib-flexible

import "lib-flexible"

最后一步修改index.html

<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport" />