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

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

前言

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

简单概念

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 = 1920const baseheight = 1080// 屏幕宽高的比例 16：9const 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.innerWidthconst 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 为单位; 按照设计稿的尺寸复原.