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

引入模板
添加配置 : 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 文件夹下面的样式}),

效果

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

后台管理系统移动端适配解决方案
lib-flexible + postcss-pxtorem 1.安装 npm i lib-flexible npm i postcss-pxtorem 2.在main.js引入 // 移动端适配 i ...
webpack 报错 No PostCSS Config found 解决方案。
webpack 报错 No PostCSS Config found 解决方案. 参考文章: (1)webpack 报错 No PostCSS Config found 解决方案. (2)https: ...
vue移动端适配解决方案
手淘适配解决方案阿里巴巴淘宝团队出品的amfe-flexible是一个用于解决移动端不同机型适配的包.在其源码中,通过不同屏幕的像素比来设置scale值,保证当前窗口的device-width始终等 ...
pc端与移动端适配解决方案
一般网站实现pc端与移动端适配的需求,方案有两个: 1.一套页面,从设计时就考虑到跨设备适配,响应式的一步到位: 2.开发两套页面,根据设备尺寸加载加载不同的资源,目前已经不常见了: 一:响应式方案 ...
react移动端适配
create-react-app 1.下载插件 npm install postcss-px-to-viewport --save-dev 2.将config文件夹暴露显示在目录中 npm run e ...
React Native字体适配解决方案
源码已上传 Github: react-native-app-font "怎么又是字体,老常的话题现在还拿出来说.关于字体适配的解决方式网上一搜几十篇!".看到标题的烙铁心里一万个 ...
React开发（268）:debounce is not a function报错
重名错误
node的fs读取html文件报错,node.js使用fs读取文件出错的解决方案
今天配接口,使用fs模块读取json出现了错误'no such file or directory',然后经查终于解决,特此记录. 使用nodejs的fs模块读取文件时习惯用相对路径,但是运行的时候出 ...
关于移动端适配，你必须要知道的
关于移动端适配,你必须要知道的关于移动端适配,你必须要知道的分享一款前端实用的面试题小程序建议收藏,微信搜索 MST题宝库移动端适配,是我们在开发中经常会遇到的,这里面可能会遇 ...

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

文章目录

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

第一步

第二步

第三步

第四步

第五步

问题分割线====================

一、淘宝弹性布局方案lib-flexible不兼容ipad和ipad pro的解决方法

二、node.getIterator is not a function 报错

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

最新文章

热门文章