【可视化大屏】屏幕多分辨率适配方案

一、任意屏幕下保持16:9的比例等比缩放

https://blog.csdn.net/weixin_57756140/article/details/123681114

1.背景

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

2.分析

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

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

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

选择方案：

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

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

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

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

3.效果预览

更高

更宽

4.实现代码

新建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的比例,保持显示效果一致,屏幕比例不一致两边留黑即可分析不同屏幕宽高比例(和设计稿16:9)相比会有两种情况: 1.更宽:(wind ...
大数据前端可视化大屏--前端开发之路
从2016年开始接触可视化方向,一直想写一篇文章回顾一下这几年踩过的坑,接下来的这段时间里我会不定时的给大家分享一些可视化方面的经验和感悟,发出来跟大家一块分享一下.一起讨论讨论.共同学习进步. 前言 ...
可视化大屏的几种屏幕适配方案，总有一种是你需要的
假设我们正在开发一个可视化拖拽的搭建平台,可以拖拽生成工作台或可视化大屏,或者直接就是开发一个大屏,首先必须要考虑的一个问题就是页面如何适应屏幕,因为我们在搭建或开发时一般都会基于一个固定的宽高,但是 ...
可视化大屏的几种适配方案
对于可视化大屏项目而言,我们主要需要考虑下面两个问题: 首先是div元素的适配,需要保持每个div元素在不同分辨率的屏幕下依然会显示正常的比例,不会因为不同分辨率的屏幕而变得拉伸变形: 第二个要考虑的 ...
Vue 可视化大屏适配方案
最近在做可视化大屏的适配,要求大屏页面能够在大屏和电脑自适应,查阅了一些资料,大体上有 3 种方案: 1.使用 transform 2.将 px 转化为 rem 3.使用 zoom 查看当前浏览器尺寸 ...
使用VUE实现可视化大屏的适配思路总结（文末送vue版可视化大屏源码）
页面布局在拿到设计图后,通常会先通过设计图的布局来思考代码的设计,这也是开始着手写代码前必须要进行的一步,在项目中,我曾遇到,在一张大屏图开发到一半的时候介入,和另一个前端一起进行开发,结果由于她将 ...
Qt编写可视化大屏电子看板系统1-布局方案
一.前言布局方案在整个数据可视化大屏界面电子看板系统中,是除了基础功能以外的核心功能之一,只有具备了布局方案这个功能,才能让用户随意调整自己想要的布局,保存成自定义名称的布局配置文件,这样就大大增加 ...
整理全网最全大屏，可视化大屏，可视化方案，可视化参考，报表，大屏设计，大屏资源，大屏学习，高保真大屏
整理全网最全大屏设计资源,包括各类智慧大屏,axure高保真大屏原型,大屏设计参考思路,大屏设计可视化图片,如何学习设计大屏等. Gitee仓库地址:https://gitee.com/AiShiYu ...
Qt编写数据可视化大屏界面电子看板1-布局方案
一.前言布局方案在整个数据可视化大屏界面电子看板系统中,是除了基础功能以外的核心功能之一,只有具备了布局方案这个功能,才能让用户随意调整自己想要的布局,保存成自定义名称的布局配置文件,这样就大大增加 ...