数据可视化大屏，屏幕多分辨率适配方案，且在任意屏幕下保持16:9的比例等比缩放

背景

数据大屏项目，需要适配不同屏幕，且在任意屏幕下保持16:9的比例，保持显示效果一致，屏幕比例不一致两边留黑即可

分析

不同屏幕宽高比例(和设计稿16:9)相比会有两种情况：

1、更宽：(window.innerWidth / window.innerHeight) > 16/9 ,以高度为基准，去适配宽度

2、更高：(window.innerWidth / window.innerHeight) < 16/9 ,以宽度为基准，去适配高度

选择方案：

计算需要缩放的比例，利用transform的scale属性缩放即可

为什么不用px->rem或媒体查询？

因为用rem起来太麻烦了；媒体查询代码大量书写比较繁琐；而且echarts里面的东西不好适配

使用transform可以完全按照设计稿的尺寸去开发，缩放的是整个页面

效果预览-更高

效果预览-更宽

实现代码

新建resizeMixin.js

// * 默认缩放值
const scale = {width: '1',height: '1',
};// * 设计稿尺寸（px）
const baseWidth = 1920;
const baseHeight = 1080;// * 需保持的比例（默认16:9）
const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5));export default {data() {return {drawTiming: null,};},mounted() {this.calcRate();window.addEventListener('resize', this.resize);},beforeDestroy() {window.removeEventListener('resize', this.resize);},methods: {calcRate() {const appRef = this.$refs['appRef'];if (!appRef) return;// 当前宽高比const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5));if (appRef) {if (currentRate > baseProportion) {// 表示更宽scale.width = ((window.innerHeight * baseProportion) /baseWidth).toFixed(5);scale.height = (window.innerHeight / baseHeight).toFixed(5);appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;} else {// 表示更高scale.height = (window.innerWidth /baseProportion /baseHeight).toFixed(5);scale.width = (window.innerWidth / baseWidth).toFixed(5);appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;}}},resize() {clearTimeout(this.drawTiming);this.drawTiming = setTimeout(() => {this.calcRate();}, 200);},},
};

App.vue，body背景设置成黑色即可

<template><div id="app" ref="app"><router-view /></div>
</template><script>
export default {};
</script>
<style lang="scss" scoped>
#app {width: 100vw;height: 100vh;background-color: #020308;overflow: hidden;
}
</style>

Layout.vue引入resizeMixin

<template><div id="index" ref="appRef"><router-view /></div>
</template><script>
import resizeMixin from '@/utils/resizeMixin ';export default {mixins: [resizeMixin]
}</script><style lang="scss" scoped>
#index {// 设计稿宽高width: 1920px;  height: 1080px;// 盒子水平垂直居中position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);& > div {height: 100%;width: 100%;}
}
</style>

数据可视化大屏，屏幕多分辨率适配方案，且在任意屏幕下保持16:9的比例等比缩放相关推荐

【可视化大屏】屏幕多分辨率适配方案
一.任意屏幕下保持16:9的比例等比缩放 https://blog.csdn.net/weixin_57756140/article/details/123681114 1.背景数据大屏项目,需要适 ...
Qt编写数据可视化大屏界面电子看板1-布局方案
一.前言布局方案在整个数据可视化大屏界面电子看板系统中,是除了基础功能以外的核心功能之一,只有具备了布局方案这个功能,才能让用户随意调整自己想要的布局,保存成自定义名称的布局配置文件,这样就大大增加 ...
elementui的tree组件页面显示不出数据_只要10分钟，教你配置出炫酷的数据可视化大屏...
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏.随着社会信息化的高速增长,数据可视 ...
怎么做数据可视化大屏？从设计到上线，一般用这3类工具
数据可视化大屏成为了这两年很火爆的一个需求. 一方面,不少甲方都想做这么酷炫的大屏,用于公司展厅.日常经营监控,还有些特殊行业如交通.运输.工厂制造,会做更高级的3D建模等. 另一方面,市面上可提供做 ...
如何制作高效率的数据可视化大屏
近段时间,"数据可视化"已经成了科技领域中非常热门的词汇,随着全国各地智慧园区的建设和崛起,数据可视化大屏的投放需求也变得越来越多.那么,企业应该如何制作高效率的数据可视化大屏呢? ...
YYDatav的数据可视化大屏《精彩案例汇总》（PythonEcharts源码）
一. 资源下载 [1-10]套Python+Echarts数据可视化大屏案例(共10套)-企业管理文档类资源-CSDN下载第1篇https://yydatav.blog.csdn.net/articl ...
27【源码】数据可视化大屏：基于 Echarts + Python Flask 实现的32-9超宽大屏范例 - 监控指挥中心
目录效果展示 1. 效果动图 2. 多种主题效果一. 确定需求方案 1. 屏幕分辨率 2. 部署方式二. 整体架构设计三. 编码实现 (基于篇幅及可读性考虑,此处展示部分关键代码) 1. 前端 ...
炫酷大屏demo_只要10分钟，教你配置出炫酷的数据可视化大屏
在电影<摩天营救>中,监控中心的全方位展示屏幕给人印象深刻.现在这种立体化大屏幕似乎成了好莱坞大片的标配.其实,这种逼格很高的镜头就是一个数据可视化大屏. 随着社会信息化的高速增长,数据可 ...
数据可视化大屏设计师，我不信你没有这些困惑!(上)
一.数据可视化大屏究竟是什么东西二.数据大屏设计效果如何落地三.调研不积极,改稿到窒息不知道大家做为数据大屏设计师,平时工作有没有一些困惑.在去年画了60多张大屏页面之后,我失去了青春和头发,化 ...
教你如何让设计好的数据可视化大屏进行个性化展示
天下熙熙,皆为利来:天下攘攘,皆为利往.在许许多多的公众场所,企业机构,政府大厅等,你是否注意到总会有一个格外显眼的大屏展示屏幕?这就是数据可视化大屏. 目前数据可视化大屏在金融.运输.媒体.制造.地 ...

数据可视化大屏，屏幕多分辨率适配方案，且在任意屏幕下保持16:9的比例等比缩放

背景

分析

效果预览-更高

效果预览-更宽

实现代码

数据可视化大屏，屏幕多分辨率适配方案，且在任意屏幕下保持16:9的比例等比缩放相关推荐

最新文章

热门文章