大屏适配

Posted 2021-10-08 Lake-李笑吅

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;

}