react实现移动端适配

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

下面是详细实现:

第一步

我们把两个包下载下来

yarn add  lib-flexible postcss-px2rem

第二步

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

import 'lib-flexible';

图:

第三步

在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 })
         ]
    }
}

图

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

图：

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

实际效果 页面按钮样式：

.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

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

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

这样进行移动端适配后 自己写的样式虽然完全没有问题，但是如果使用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}),

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