設置字體隨着瀏覽器的縮放而縮放


 /**
     * @description 設置字體大小
     */
    fontSize(res) {
      let clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
      if (!clientWidth) return
      let fontSize = 100 * (clientWidth / 1920)
      return res * fontSize
    },
 
/**
     * 根據屏幕大小設定font-size 適配rem
 * 方法寫在app.vue中 在 mounted 中調用
     */
    setFontSize() {
      const docEl = document.documentElement
      let resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'
      const scale = (1920 / 1080).toFixed(2)
      const recalc = function () {
        const clientWidth = docEl.clientWidth
        const clientHeight = docEl.clientHeight
        if (!clientHeight || !clientWidth) return
        const scaleCilent = (clientWidth / clientHeight).toFixed(2)
        let size = ''
        if (scale > scaleCilent) {
          size = 100 * (clientWidth / 1920)
        } else {
          size = 100 * (clientHeight / 1080)
        }
        docEl.style.fontSize = (size < 100 ? size : 100) + 'px'
      }
      if (!document.addEventListener) return
      window.addEventListener(resizeEvt, recalc, false)
      document.addEventListener('DOMContentLoaded', recalc, false)
    },
  },


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM