大屏可视化rem自适应布局

mounted直接调用就行,当前宽度大于1920使用宽度比,小于使用高度

 suofang() {
      (function (doc, win) {
        const uiWidth = 1920 // 设计稿宽度
        const uiHeight = 1080
        const docEl = doc.documentElement
        // 检测屏幕翻转
        const resizeEvt =
          'orientationchange' in window ? 'orientationchange' : 'resize'
        const recalc = function () {
          //                      clientWidth = width+左右padding
          let clientWidth = docEl.clientWidth
          const clientHeight = docEl.clientHeight
          if (!clientWidth) {
            return
          }
          if (clientWidth >= uiWidth) {
            clientWidth = uiWidth
            docEl.style.fontSize = 1 * (clientWidth / uiWidth) + 'px'
          } else {
            clientWidth = clientHeight
            docEl.style.fontSize = 1 * (clientWidth / uiHeight) + 'px'
          }
          // 全部宽度 / 设计稿宽度 赋值html
        }
        if (!doc.addEventListener) {
          return
        }
        // 注册事件-不冒泡
        win.addEventListener(resizeEvt, recalc, false)
        // 脚本解析完毕,html未解析完触发-不冒泡
        doc.addEventListener('DOMContentLoaded', recalc, false)
        recalc()
      })(document, window)
    },

作者：拜无忧
链接：https://juejin.cn/post/7051788746726834184
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。