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'

 

posted @   福超  阅读(90)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
点击右上角即可分享
微信分享提示