react怎么实现移动端适配?

react实现移动端适配

React中可以淘宝弹性布局方案lib-flexiblepostcss-px2rem来实现移动端项目的适配方案。

下面是详细实现:

第一步

我们把两个包下载下来

yarn add  lib-flexible postcss-px2rem

第二步

在项目入口文件index.js引入lib-flexible

import 'lib-flexible';

图:

1.jpg

第三步

在webpack中配置postcss-px2rem

webpack.config.js

const px2rem = require('postcss-px2rem')
{
    loader: require.resolve('postcss-loader'),
    options: {
         plugins: () => [
             //在postcss-loader的插件中加入这个插件
             //px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62
             px2rem({ remUnit: 75 })
         ]
    }
}

2.jpg

// px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的,如果是620 的就写 62

第四步

注释掉模板index.html内的

 <!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->

create-react-app 的模板index.html在public下

图:

3.jpg

最后调整设计稿大小 输入750px

4.jpg

实际效果 页面按钮样式:

.button{
        width:665px;
        height:88px;
        background:rgba(255,156,0,1);
        border-radius:6px 6px 6px 6px;
        margin-left: 42px;
        padding-top: 30px;
        box-sizing: border-box;
        margin-bottom: 32px;
        .button-title{
            margin: 0 auto;
            width:150px;
            height:30px;
            font-size:31px;
            font-family:PingFang SC;
            font-weight:400;
            color:rgba(255,255,255,1);
            line-height:30px;
        }
    }

在 iphone6/7/8plus下 所有px自动转为适配的rem

5.jpg

在iphone 5/SE下 又转为对应rem 整体效果完全不变

6.jpg

更新一下 最近发现一个问题

这样进行移动端适配后 自己写的样式虽然完全没有问题,但是如果使用Ant Design Mobile进行开发的话,蚂蚁金服的样式会出问题导致无法使用。

解决方案:

配置webpack的postcss-px2rem,让它不去检查/node_modules/,也就是不作用antd等引入的库。但是我去设置postcss-px2rem的exclude选项发现并没有起作用,翻博客发现,postcss-px2rem无法设置exclude排除项,然后有个人修改postcss-px2rem的源码,做了一个postcss-px2rem-exclude可以设置排除项(亲测有用)。

yarn remove postcss-px2rem
yarn add postcss-px2rem-exclude

修改webpack.config.js

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

7.jpg

想要了解更多相关知识,可访问 前端学习网站!!

以上就是react怎么实现移动端适配?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏