数据大屏的解决方案

作者：狗尾巴花的尖
链接：juejin.cn/post/7372105071573663763

顺便吆喝一声，技术大厂，内推捞人，前/后端or测试←感兴趣
要求学历：全日制统招本科（非学院派即可）：
—加班偶尔较多，但周末加班两倍工资。
—15-35K，工资在一线城市属于一般，但二线城市很可以。

1. 使用缩放比例适配各种设备（适用16*9比例的屏幕分辨率）

（1）封装一个获取缩放比例的工具函数
`/**

• 大屏效果需要满足16:9的屏幕比例，才能达到完美的大屏适配效果
• 其他比例的大屏效果，不能铺满整个屏幕
• @param {*} w 设备宽度 默认 1920
• @param {*} h 设备高度 默认 1080
• @returns 返回值是缩放比例 */ export function getScale(w = 1920, h = 1080) { const ww = window.innerWidth / w const wh = window.innerHeight / h return ww < wh ? ww : wh } `

（2）在vue中使用方案如下
` .full-screen-container { width: 100vw; height: 100vh; display: flex; flex-direction: column; background-color: #131a2b; #screen { position: fixed; width: 1920px; height: 1080px; top: 0; transform-origin: left top; color: #fff; } } `

（3）mac设备上的屏幕分辨率，在适配的时候，可能不是那么完美，以短边缩放为准，所以宽度到达百分之百后，高度不会铺满

① 1432896 13寸mac本
② 25601600 4k屏幕

2. 使用第三方插件来实现数据大屏（mac设备会产生布局错落）

（1）建议在全屏容器内使用百分比搭配flex进行布局，以便于在不同的分辨率下得到较为一致的展示效果。

（2）使用前请注意将body的margin设为0，否则会引起计算误差，全屏后不能完全充满屏幕。

（3）使用方式
`1. npm install @jiaminghi/data-view

2. yarn add @jiaminghi/data-view // 在vue项目中的main.js入口文件，将自动注册所有组件为全局组件 import {fullScreenContainer} from '@jiaminghi/data-view' Vue.use(fullScreenContainer)

#dv-full-screen-container { width: 100vw; height: 100vh; display: flex; flex-direction: column; background-color: #131a2b; }

`

（4）插件地址http://datav.jiaminghi.com/guide/fullScreenContainer.html

3. 效果图