pc端适配
1.首先pc端适配所用的包
npm i postcss-pxtorem amfe-flexible
2.然后在config中找到 webpack.config.js 在 webpack.config.js 中添加以下代码
require("postcss-pxtorem")({
rootValue: 192,//设置根元素的字体大小,此值将作为rem的基准。
unitPrecision: 3,//设置转换后的rem单位的小数点精度。
propList: ['*'],//指定需要转换的CSS属性列表,'*'表示转换所有属性。
mediaQuery: false,//是否在媒体查询中转换像素单位。
exclude: /(node_modules)/,//正则表达式,用于排除不需要转换的文件夹,如node_modules。
minPixelValue: 1,//设置最小的像素值,小于这个值的像素不会被转换
})
代码添加完的效果
2.1 如果没有config文件夹在终端输出以下代码
npm run eject
2.2在终端 npm run eiect 如果报错
分析报错:
这通常意味着你正在尝试执行一个 Git 操作(如切换分支、拉取或推送),但是你的工作目录中有未跟踪的文件(即 Git 不知道这些文件应该被跟踪还是忽略)或者你有未提交的更改。
解决方法:
a. 初始化 Git 仓库
git init
b.添加文件到暂存区
git add . # 这会添加所有文件到暂存区,或者你可以使用 git add <filename> 来添加特定文件
c.提交更改:
git commit -m 'Saving before ejecting'
d.完成这些步骤后,你就可以安全地运行 npm run eject
命令了,因为你已经保存了当前的更改。
3.最后在index.js / index.tsx里引入amfe-flexible
import "amfe-flexible";
移动端
1..首先下移动端适配所用的包
npm i postcss-px2rem lib-flexible
2.然后在config中找到 webpack.config.js 在 webpack.config.js 中添加以下代码
先引入
var px2rem = require('postcss-px2rem')
再配置
px2rem({ remUnit: 192 })
代码添加完的效果
3.最后在index.js / index.tsx里引入lib-flexible
import "lib-flexible"