H5 px 适配
1.下载
npm i amfe-flexible
npm i postcss-pxtorem
2.根目录加 postcss.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | module.exports = { plugins: { // postcss-pxtorem 插件的版本需要 >= 5.0.0 'postcss-pxtorem' : { rootValue ({ file }) { // 判断是否是vant的文件 如果是就使用 37.5为根节点字体大小 // 否则使用75 因为vant使用的设计标准为375 但是市场现在的主流设置尺寸是750 return file.indexOf( 'vant' ) !== -1 ? 37.5 : 75 }, // 配置哪些文件中的尺寸需要转化为rem *表示所有的都要转化 // *表示所有,所有的都参与计算 // '!font-size'字号 propList: [ '*' , '!font-size' , '!border' ] } } } |
3.在 main.ts 引入
import 'amfe-flexible'
4. 把 amfe-flexible.js 移除 到utils 也行

重写 setRemUnit 方法
1 2 3 4 5 6 7 8 9 10 11 | function setRemUnit () { let clientWidth = docEl.clientWidth if (clientWidth >= 475) { clientWidth = 475 } if (clientWidth <= 320) { clientWidth = 320 } const rem = clientWidth / 10 docEl.style.fontSize = rem + 'px' } |
同时main.ts 重新引入 amfe-flexible
import '@/utils/amfe-flexible'
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!