vue移动端的适配

最新推荐文章于 2024-07-31 20:17:07 发布

zy991315

最新推荐文章于 2024-07-31 20:17:07 发布

阅读量393

点赞数 11

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/zy991315/article/details/136474385

版权

1.新建一个font-size.js

'use strict'
// 针对设计稿宽度去设计 调整baseSize  我这里是用的750设计稿
export default (baseSize = 750, comparison = document.documentElement) => {
  const EVENT = 'orientationchange' in window ? 'orientationchange' : 'resize'
  window.fsr = 0

  const setRem = () => {
    let clientWidth = comparison.clientWidth
    let fontSize = '100px'

    // 获取不到屏幕宽度，不再向下执行
    if (!clientWidth) return

    if (clientWidth < baseSize) {
      // 当屏幕宽度小于对比宽度时，
      window.fsr = clientWidth / baseSize

      fontSize = (100 * window.fsr).toFixed(2) + 'px'
    }

    // 设置根元素字体大小
    document.documentElement.style.fontSize = fontSize

  }

  // 事件綁定
  window.addEventListener(EVENT, setRem, false)

  // 初始化调用
  setRem()
}

2. 在main.js中引入

import "utils/font-size";

ps:可以直接使用设计稿是多少px 就直接写多少px 到页面就可以直接转换了