layui移动端适配_React移动端适配解决方案

最近拿到新公司移动端的项目，是一个react app项目。我检查代码和公司蓝湖的设计图发现整个项目并没有搭配任何移动端适配方案，并且每个页面没有采用像素级还原，而是用一些百分比和flex来达到一些简单的适配。

这样开发一是实现效果很差，设置在一些区别比较大的手机上会出现显示上的bug，比如iphone5的小屏幕和iphone10的大屏上。二是开发上很麻烦，本来产品画好的产品图，把参数复制写进去就行了，但是现在开发使用产品图的参数就完全开发不了。

这时我想到了我开发小程序时使用的rpx，微信端设定好的适配方案，全部按宽750px来实现，微信会在不同的设备下为我们自动调整。按照这个思路我找到了淘宝弹性布局方案lib-flexible和postcss-px2rem来实现React移动端项目750px的适配方案。

下面是详细实现:

第一步

我们把两个包下载下来

yarn 

第二步

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

import 

图:

第三步

在webpack中配置postcss-px2rem

webpack.config.js

const 

图

第四步

注释掉模板index.html内的

<!-- 

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

图：

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

实际效果 页面按钮样式：

.button

在 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 

修改webpack.config.js

const px2rem = require('postcss-px2rem-exclude');

 px2rem({ remUnit: 75 ,exclude:/node_modules/i}),