react 配置 rem（px转rem适配手机端）

最新推荐文章于 2024-09-11 09:00:22 发布

呼呼哥

最新推荐文章于 2024-09-11 09:00:22 发布

阅读量1.3w

点赞数

分类专栏： ReactNative

本文链接：https://blog.csdn.net/huhu_study/article/details/88220201

版权

ReactNative 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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的地方：

在我们的入口文件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" />

配置完毕执行：

npm  install 
npm  start