当前位置：首页 > web >正文

可视化数据大屏适配方案之Scale等比缩放

web 2025/7/21 20:05:08

朋友们，好久不见，最近手头负责项目比较多，也是好久没沉淀了，今天来给大家分享一下基于Scale等比缩放的可视化数据大屏适配方案，目前个人认为是开发效率最高的大屏适配方案，也得到了领导的一致认可，并且现在已经把我的这部分代码应用于多个项目的大屏中去使用了，反馈都挺不错。

话不多说，先看效果！！！

监控大屏

一、Scale方案的基本原理

Scale方案是一种基于CSS3的transform属性的适配方案，通过调整元素的缩放比例来实现大屏可视化的适配。具体来说，我们可以根据设计稿的尺寸和浏览器窗口的尺寸，计算出缩放比例，并将该比例应用到需要适配的元素上，从而实现大屏可视化的适配。

二、如何计算缩放比例

         计算缩放比例是Scale方案的核心步骤。首先，我们需要确定设计稿的尺寸，这里假设设计稿的尺寸为1920x1080。然后，我们需要获取浏览器窗口的尺寸，这可以通过JavaScript的window.innerWidth和window.innerHeight属性来获取。

        接下来，我们需要计算浏览器窗口和设计稿的宽高比。具体的计算公式如下：

                        缩放比例 = 浏览器窗口尺寸 / 设计稿尺寸

        比较宽度缩放比例和高度缩放比例，返回较小的值作为缩放比例

例如，如果浏览器窗口的宽度为2000px，高度为1500px，那么缩放比例就是2000/1920=1.04，1500/1080=1.39。我们应该以宽度为基准进行缩放，所以缩放比例应该是1.04。

三、应用缩放比例

计算出缩放比例后，将其应用到需要适配的元素上（整个页面），从而实现页面的缩放适配。

总结与关键代码实现：

1. 获取屏幕尺寸： 首先，通过JavaScript获取当前设备屏幕的宽度（或高度）。
2. 计算缩放比例： 然后，将获取到的屏幕尺寸与设计稿的基准尺寸进行比较，计算出缩放比例，返回较小的缩放比例，确保页面内容不会超出屏幕范围。
3. 应用缩放： 最后，将计算出的缩放比例应用到整个页面上，从而实现页面的缩放适配。

1. 核心方法：resize 和 getScale

resize 方法

功能：动态调整页面的缩放比例，使页面适配不同的屏幕分辨率。
实现：
监听浏览器窗口的 resize 事件。
调用 getScale 方法计算缩放比例。
更新页面容器的 transform 样式属性，设置缩放比例和居中位置。
const resize = () => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;}
};
getScale 方法

功能：根据浏览器窗口大小计算缩放比例。
实现：
获取浏览器窗口的宽度和高度 (window.innerWidth 和 window.innerHeight)。
与设计稿的宽度和高度（默认值为 1920px 和 1080px）进行比较，计算宽度和高度的缩放比例。
返回较小的缩放比例，确保页面内容不会超出屏幕范围。
const getScale = (width = 1920, height = 1080) => {let ww = window.innerWidth / width;let wh = window.innerHeight / height;return ww < wh ? ww : wh;
};
2. 页面初始化时的缩放

在 onMounted 生命周期钩子中，页面加载时会执行以下逻辑：

调用 getScale 方法计算初始缩放比例。
设置页面容器的宽度、高度和缩放样式。
onMounted(() => {if (dataScreenRef.value) {dataScreenRef.value.style.transform = `scale(${getScale()}) translate(-50%, -50%)`;dataScreenRef.value.style.width = `1920px`;dataScreenRef.value.style.height = `1080px`;}window.addEventListener("resize", resize);
});
3. 监听窗口大小变化

使用 window.addEventListener("resize", resize) 监听浏览器窗口大小变化。
当窗口大小发生变化时，自动调用 resize 方法，重新计算缩放比例并更新页面样式

4. 页面卸载时清理事件

在 onBeforeUnmount 生命周期钩子中，移除 resize 事件监听器，避免内存泄漏。
onBeforeUnmount(() => {window.removeEventListener("resize", resize);
});
5. 样式调整

页面容器的样式通过以下属性实现居中和缩放：

transform：设置缩放比例和居中位置。
width 和 height：固定页面容器的宽度和高度为设计稿尺寸（1920px × 1080px）。

6. 效果总结

页面内容根据浏览器窗口大小自动缩放，确保在不同分辨率下都能完整显示。
页面始终居中显示，避免内容偏移或超出屏幕范围。
响应式布局通过监听窗口变化实现动态调整，提升用户体验。