【大屏数据可视化——屏幕适配方案(多分辨率）】

前言

基于目前所做的大屏数据可视化项目,提供的一个参考方案;按照设计稿的宽高比,适配不同的设备,进行放大和缩小.

简单概念

1.常见的大屏设备分辨率
1366 * 768 ： 普通液晶显示器
1920 * 1080： 高清液晶显示器+笔记本
2560 * 1440： 2K高清显示器
4096 * 2160： 4K高清显示器

2.涉及的参数
视口宽度,高度:即所视网页的宽高(不包含地址栏,tab栏,导航栏等)

常见问题

1.通常数据大屏的设计稿是按照1920*1080的比例去设计,宽高比近似于16:9,所以为了保持这个宽高比,会将所视窗口的页面按照16:9去适配
2.视口宽高比不是16:9,左右或者上下会出现白边

解决方案

首先是App.vue 宽高设为所见视口宽高.

 <template>
  <div id="app">
    <nav>
      <router-view></router-view>
    </nav>
  </div>
</template>

<style lang="less" scoped>
#app{
  width: 100vw;
  height: 100vh;
  background-color: rgba(11, 21, 34);  // 取大屏的背景色,不设置会出现白边
  overflow: hidden;
  display: flex;    //使用弹性布局,将页面居中显示
  justify-content: center;
  align-items: center;
}
</style>

新建resize.js文件—用来做大屏页面的适配
获取当前视口宽高 window.innerWidth window.innerHeight

// 初始比例
const scale = {
  width: 1,
  height: 1
}
// 设计稿尺寸(只取数值,不带单位)
const baseWidth = 1920
const baseheight = 1080
// 屏幕宽高的比例 16：9
const baseProportion = parseFloat(baseWidth / baseheight).toFixed(5)
console.log(scale, baseWidth, baseheight, baseProportion)

export default {
  data () {
    return {
      drawTiming: null
    }
  },
  mounted () {
    this.scaleRate()
    window.addEventListener('resize', this.resize)
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize)
  },
  methods: {
    scaleRate () {
      const appRef = this.$refs.appRef
      // 当前视口的宽高
      const currentWidth = window.innerWidth
      const currentHeight = window.innerHeight
      // 当前视口的比例
      const currentProportion = parseFloat(currentWidth / currentHeight).toFixed(5)
      console.log(currentProportion)
      if (appRef) {
        // 当前视口的宽高比和标准的宽高比进行比较
        if (currentProportion >= baseProportion) { // 表示过宽,则需要调节宽度，保留当前高度
          scale.height = parseFloat(currentHeight / baseheight).toFixed(3) // 即当前高度和标准高度1080的比值
          appRef.style.transform = `scale(${scale.height},${scale.height})`
        } else { // 表示过高，则需要调节当前高度，保留当前宽度
          scale.width = parseFloat(currentWidth / baseWidth).toFixed(3) // 即当前高度和标准高度1080的比值
          appRef.style.transform = `scale(${scale.width},${scale.width})`
        }
      }
    },
    resize () {
      clearTimeout(this.drawTiming)
      this.drawTiming = setTimeout(() => {
        this.scaleRate()
      }, 100)
    }
  }
}

在layout中引入即可

import resize from '../../utils/resize'
export default 
  name: 'myLayout',
  mixins: [resize],
  data () {
    return {
    }
  },

引入之后就正常的写模块就好了,大屏的模块都宽高都使用 px 为单位; 按照设计稿的尺寸复原.