React移动端适配解决方案lib-flexible和postcss-px2rem、node.getIterator is not a function 报错使用postcss-pxtorem

React移动端适配解决方案lib-flexible和postcss-px2rem

第一步

我们把两个包下载下来

npm install lib-flexible postcss-px2rem

第二步

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

import 'lib-flexible';

第三步

# 使用npm
npm run eject
 
# 使用yarn
yarn run eject
 
#使用yarn时也可以不加run
yarn eject

在webpack中配置postcss-px2rem

webpack.config.js

1. 引入模板
   

2. 添加配置 : px2rem({ remUnit: 37.5 }) 这里是375px宽，750 就用75

//在postcss-loader的插件中加入这个插件
//px2rem({ remUnit: 75 }) 的意思就是1rem = 75px 这个是根据750px设计稿来的，如果是620 的就写 62
px2rem({ 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 文件夹下面的样式
                }),

效果