React配置Rem自适应手机宽度比

首先我配置这个rem之前，这尼玛难！！！人家几分钟搞定的事情我弄了几个小时，在网上找资料查信息，我最先看到的是

https://www.cnblogs.com/shine1234/p/13265261.html   此方案地址你们要是有人有用的地方拿去用。

也就是这个人发出来的配置rem的  我欣喜若狂的一顿操作猛如虎，最后虎虎生威么  不是蔫了最后，我不知道我错在哪里哈 反正是他让写的这个配置啥的都配置上去了  但是说啥也不行，就是不行 ，然后报了这一对错误  

在我npm start的时候  说实话我完全不知道错在了哪里 都是按照一步步敲下来的  

后来我查资料整理我终于配置上了rem适配  现在把我弄得给大家看看  

首先呢  下载依赖包  这个是必须的  不能省略的：

啊  还得提一句在下载依赖包之前你一定要把webpack里面的webpack.config.js这个文件给他显示出来 这个是webpack之所以隐藏起来 ，因为里面有很多重要的配置文件 万一哪一天给展示出来并且瞎乱动的话那就完犊子了，react为了不让你在最关键的时候动这个就给他隐藏了起来，现在我们要做的就是把他给展示出来

第一：npm run eject 这个是展示出来webpack.config.js

第二：安装依赖包

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

第三：在index.html里面添加这段script

<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>

第四：到config/webpack.config.js里面把你刚才下载的东西写到里面去

const px2rem = require('postcss-px2rem-exclude');  //引入

标题

然后把

px2rem({remUnit:75,exclude: /node_modules/i}),这段话放到图片里面的位置  切记图片里是没有这段话的。

第五：在index.js文件里面引入

import 'lib-flexible';

第六：修改index.HTML

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

最后：你看到了你想看到的

 终于出来了 ，看资料说出现了这个就是成功配置了。

手工！！！结束！！！