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

最新推荐文章于 2024-08-07 10:15:00 发布

王耐存

最新推荐文章于 2024-08-07 10:15:00 发布

阅读量1.7k

点赞数 5

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_43512623/article/details/123352887

本文作者详细描述了配置rem单位遇到的困扰，从查找解决方案到逐步调试，最终成功实现网页响应式布局的过程。重点介绍了如何显示webpack配置、安装依赖、HTML脚本添加、webpack配置调整和引入flexible库等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我配置这个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" />

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

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

手工！！！结束！！！