大屏适配

1.创建文件

export const echartsSize = function (size, defalteWidth = 1920) {
  const docEl = document.documentElement
  const clientWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  if (!clientWidth) return
  const fontSize = (clientWidth / defalteWidth)
  return Number((size * fontSize).toFixed(3))
}

// 设置系统缩放比，适配各分辨率
export function refreshScale () {
  const baseWidth = document.documentElement.clientWidth
  const baseHeight = document.documentElement.clientHeight
  const appStyle = document.getElementById('app').style
  const bodyStyle = document.getElementsByTagName('body')[0].style
  const realRatio = baseWidth / baseHeight
  const designRatio = 16 / 9
  let scaleRate = baseWidth / 1920
  if (realRatio > designRatio) {
    scaleRate = baseHeight / 1080
  }

  /**/
  appStyle.transformOrigin = 'left top'
  appStyle.transform = `scale(${scaleRate})`
  appStyle.width = `${baseWidth / scaleRate}px`
  appStyle.height = `auto`  //设置高度
  /*bodyStyle.background = `radial-gradient(#152B65, #122659 ,#030D32)`*/
  bodyStyle.background = `url('https://qiniu.dev.haiwojiamei.com/upload/meijia/20210728/cc9c326b15391925efa780367501f82e.png') no-repeat`
  bodyStyle.backgroundPosition ='center center'
  bodyStyle.backgroundSize = '100% 100%'
}
2.在文件中引入

import {refreshScale} from '@/utils/util'
3.初始化和窗口变化时执行

mounted() {

  refreshScale();
  window.onresize=function(){
    refreshScale()
  }

},

3.设置

body #app{
  width: 1920px;

height: 1080px;

}

标签：const,适配,clientWidth,bodyStyle,大屏,document,appStyle,refreshScale
来源： https://www.cnblogs.com/lixiaosong/p/15378412.html