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}),
想要了解更多相关知识,可访问 前端学习网站!!
© 著作权归作者所有
发表评论