文章目录
React移动端适配解决方案lib-flexible和postcss-px2rem第一步第二步第三步第四步第五步 问题分割线====================一、淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro的解决方法二、node.getIterator is not a function 报错React移动端适配解决方案lib-flexible和postcss-px2rem
第一步
我们把两个包下载下来
npm install lib-flexible postcss-px2rem
第二步
在项目入口文件index.js引入lib-flexible
import 'lib-flexible';
第三步
# 使用npmnpm run eject# 使用yarnyarn run eject#使用yarn时也可以不加runyarn eject
在webpack中配置postcss-px2rem
webpack.config.js
引入模板
添加配置 : px2rem({ remUnit: 37.5 }) 这里是375px宽，750 就用75
//在postcss-loader的插件中加入这个插件//px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62px2rem({remUnit: 75 })
第四步
注释掉模板index.html内的
<!-- <meta name="viewport" content="width=device-width, initial-scale=1" /> -->
第五步
直接使用px
问题分割线====================
一、淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro的解决方法
<script>/(iPhone|iPad|iPhone OS|Phone|iPod|iOS)/i.test(navigator.userAgent)&&(head=document.getElementsByTagName('head'),viewport=document.createElement('meta'),viewport.name='viewport',viewport.content='target-densitydpi=device-dpi, width=480px, user-scalable=no',head.length>0&&head[head.length-1].appendChild(viewport));</script>
二、node.getIterator is not a function 报错
最近使用react18配置时会报错
原因：用了postcss-px2rem与postcss-px2rem-exclude导致的问题，
解决方案：卸载后postcss-px2rem， 安装使用postcss-pxtorem。
在webpack.config.js设置如下代码，可以自行更改设置，解决问题。
npm 删除模块【npm uninstall xxx】删除xxx模块；【npm uninstall -g xxx】删除全局模块xxx；
require('postcss-pxtorem')({rootValue: 37.5,selectorBlackList: [], //过滤propList: ['*'],exclude: /node_modules/i // 过滤掉node_modules 文件夹下面的样式}),
效果
React移动端适配解决方案lib-flexible和postcss-px2rem node.getIterator is not a function 报错使用postcss-pxtorem
如果觉得《React移动端适配解决方案lib-flexible和postcss-px2rem node.getIterator is not 》对你有帮助，请点赞、收藏，并留下你的观点哦！
