CN117472493A - 数据可视化大屏展示页面自适应方法 - Google Patents

Abstract

本发明涉及页面显示技术领域，具体为数据可视化大屏展示页面自适应方法，包括如下步骤：获取当前设备屏幕的宽高像素数；计算缩放比例；对整个视图进行缩放；有益效果为：本发明提出的数据可视化大屏展示页面自适应方法，无需特定编写rem单位：使用Scale属性无需特定编写rem单位，避免了手动计算单位的问题；使用Scale属性无需特定编写rem单位，避免了手动计算单位的问题；使用Scale属性的自适应方案可以大幅减少代码量，简化开发流程；不需要考虑单位使用失误导致适配不完全。

Description

数据可视化大屏展示页面自适应方法

技术领域

本发明涉及页面显示技术领域，具体为数据可视化大屏展示页面自适应方法。

背景技术

通常情况下，PC端的页面并不需要像移动端那样对分辨率及屏幕大小有着非常严格的要求。

现有技术中，对于数据大屏这种展示型网页来说，我们需要考虑适配的问题，以保证能够在大部分主流显示器上正常展示。

但是，传统的基于rem的缩放方案中，元素长度单位需要转换为rem。在展示过程中，即使进行放大展示，图表也不会失真。但是，当缩小至根元素fontsize<12px(字体大小12像素)时，由于浏览器展示的最小字号是12px，文字不能被再缩小，会出现比例不协调的情况。

发明内容

本发明的目的在于提供数据可视化大屏展示页面自适应方法，以解决上述背景技术中提出的问题，并保证数据大屏能够在各种分辨率电脑上正常展示。

为实现上述目的，本发明提供如下技术方案：数据可视化大屏展示页面自适应方法，所述方法包括如下步骤：

获取当前设备屏幕的宽高像素数；

计算缩放比例；

对整个视图进行缩放。

优选的，获取当前设备屏幕的宽高像素数的具体操作包括：

通过JavaScript获取当前设备屏幕的宽高像素数，通过使用window.innerWidth和window.innerHeight来实现。

优选的，使用window.innerWidth获取当前窗口的宽度，并存储在变量中，使用window.innerHeight获取当前窗口的高度，并存储在另一个变量中。

优选的，计算缩放比例的具体操作包括：

将获取到的屏幕宽、高像素数与设计稿的宽、高像素数进行比较；

如果设计稿的宽度小于或等于屏幕宽度，则缩放比例应该为1；

否则，计算出需要缩放的比例。

优选的，将屏幕宽度除以设计稿的宽度，然后将结果四舍五入保留两位小数，即得到需要缩放的比例；按照相同的方法计算出需要缩放的高度比例。

优选的，对整个视图进行缩放的具体操作包括：

在CSS中使用Scale属性，在主要容器元素上设置Scale属性，并设置为计算出的缩放比例，整个页面中的所有内容被等比例地缩放，从而适应不同大小的屏幕。

优选的，使用栅格化系统来对页面进行布局排版，以便更好地适应各种屏幕大小。

与现有技术相比，本发明的有益效果是：

本发明提出的数据可视化大屏展示页面自适应方法，无需特定编写rem单位：使用Scale属性无需特定编写rem单位，避免了手动计算单位的问题；使用Scale属性无需特定编写rem单位，避免了手动计算单位的问题；使用Scale属性的自适应方案可以大幅减少代码量，简化开发流程；不需要考虑单位使用失误导致适配不完全：由于使用了相对宽度单位，无需考虑单位使用失误导致适配不完全的情况；不需要对单位进行转换，在使用第三方库时也不需要考虑单位转换问题：使用Scale属性实现自适应，避免了在使用第三方库时需要进行单位转换的问题；无论屏幕如何变化，屏幕的内容都是等比缩放展示，不会出现元素变形和错位。当屏幕的比例和设计稿比例一致，会呈现出最佳效果；使用scale适配大屏，实现数据大屏在任何分辨率的电脑上均可安然运作。无需特定编写rem单位，也不需要考虑单位使用失误导致适配不完全；不需要对单位进行转换，在使用第三方库时，不需要考虑单位转换问题。

附图说明

图1为本发明基于Scale属性进行大屏幕自适应的详细流程图；

图2为本发明获取当前设备屏幕的宽高像素数流程图；

图3为本发明计算缩放比例流程图。

具体实施方式

为了使本发明的目的、技术方案进行清楚、完整地描述，及优点更加清楚明白，以下结合附图对本发明实施例进行进一步详细说明。应当理解，此处所描述的具体实施例是本发明一部分实施例，而不是全部的实施例，仅仅用以解释本发明实施例，并不用于限定本发明实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1至图3，本发明提供一种技术方案：数据可视化大屏展示页面自适应方法，所述方法包括如下步骤：

1)我们需要通过JavaScript获取当前设备屏幕的宽高像素数。这可以通过使用window.innerWidth和window.innerHeight来实现。具体来说，我们需要使用window.innerWidth获取当前窗口的宽度，并将其存储在变量中。同样地，我们也需要使用window.innerHeight获取当前窗口的高度，并将其存储在另一个变量中。

2)接下来我们需要计算缩放比例。在这个步骤中，我们需要将获取到的屏幕宽、高像素数与设计稿的宽、高像素数进行比较。如果设计稿的宽度小于或等于屏幕宽度，则缩放比例应该为1；否则，我们需要计算出需要缩放的比例。具体来说，我们可以将屏幕宽度除以设计稿的宽度，然后将结果四舍五入保留两位小数，即可得到需要缩放的比例。同样地，我们也可以按照相同的方法计算出需要缩放的高度比例。

3)我们需要对整个视图进行缩放。为了实现缩放功能，我们可以在CSS中使用Scale属性。具体来说，我们需要在主要容器元素上设置Scale属性，并将其值设置为我们在第二步中计算出的缩放比例即可。这样一来，整个页面中的所有内容都会被等比例地缩放，从而适应不同大小的屏幕。

4)为了进一步优化效果，我们可以使用一些辅助手段，如响应式设计、栅格化系统等。通过这些手段，我们可以更好地适配不同大小的屏幕，并且让页面看起来更加美观。例如，我们可以使用媒体查询来设置不同屏幕尺寸下的CSS样式，或者使用栅格化系统来对页面进行布局排版，以便更好地适应各种屏幕大小。

5)使用Scale属性的优点是代码量少，适配简单。我们不需要在各个图表中再去单独适配，文字、图片等大小均能自动适配。此外，Scale属性还支持动画效果，可以使得页面适配更加流畅。因此，我们可以将其作为一种简单易用的适配方法，广泛应用于各种大屏幕应用场景中。

首先，我们需要明白什么是大屏幕自适应。在不同的设备上，屏幕的大小和分辨率可能会有很大的差异，因此如果我们只是简单地按照一个固定的尺寸来设计页面，那么就很难保证在不同的设备上都能够完美地显示。而大屏幕自适应则是指，通过一些技术手段，使得页面可以根据设备的不同，自动进行缩放和适配，从而让页面在不同的设备上都能够看起来非常美观。

具体来说，本技术方案采用了CSS Scale属性来实现自适应。Scale属性可以让我们对元素进行等比例缩放，并且可以保持其他样式不变。比如，假设我们有一个元素的宽度为100px，高度为50px，如果我们将它的Scale设置为2，那么它的宽度就会变成200px，高度变成100px，但是其他样式(如颜色、字体等)都不会发生改变。这样，我们就可以通过Scale属性，实现对整个页面的等比例缩放，从而让页面在不同的设备上都能够完美地适配。

术语解释

1)前端大屏项目：指在Web前端技术基础上，使用适配大屏幕的设计理念，完成针对特定场景展示数据的页面。通常应用于物流、金融、医疗、能源等行业。

2)Scale属性：指CSS3中的一种属性，用于控制元素的缩放比例。可以通过设置transform:scale(x,y)来对元素进行缩放，并且不会影响其他元素的布局和尺寸。

3)rem单位：指相对于根元素(html元素)字体大小的单位。在移动端适配中通常使用rem单位进行长度和宽度的设置，比较灵活。

4)vw单位：指相对于视口宽度的单位。在响应式设计中可以使用vw单位进行元素的尺寸设置，以适应不同的屏幕尺寸。

5)栅格化系统：指将页面划分为若干列和行，并且按照固定的比例进行布局的一种技术。通常应用于响应式设计和移动端适配中，可以使得页面在不同屏幕尺寸下保持一致的展示效果。

6)响应式设计：指一种Web设计方法，通过调整页面布局和元素尺寸来适应不同的屏幕尺寸。通常使用CSS3媒体查询技术进行实现。

7)数据可视化：指将数据以图表、地图、仪表盘等形式进行展示，以便于用户直观地理解数据信息的一种技术。通常应用于商业智能、大数据分析等领域。

8)设计稿：指用于Web页面或移动端界面设计的原始文件，通常包含页面结构、元素尺寸、配色方案、字体样式等设计要素。

尽管已经示出和描述了本发明的实施例，对于本领域的普通技术人员而言，可以理解在不脱离本发明的原理和精神的情况下可以对这些实施例进行多种变化、修改、替换和变型，本发明的范围由所附权利要求及其等同物限定。

Claims (7)

1.数据可视化大屏展示页面自适应方法，其特征在于：所述方法包括如下步骤：

获取当前设备屏幕的宽高像素数；

计算缩放比例；

对整个视图进行缩放。

2.根据权利要求1所述的数据可视化大屏展示页面自适应方法，其特征在于：获取当前设备屏幕的宽高像素数的具体操作包括：

通过JavaScript获取当前设备屏幕的宽高像素数，通过使用window.innerWidth和window.innerHeight来实现。

3.根据权利要求2所述的数据可视化大屏展示页面自适应方法，其特征在于：使用window.innerWidth获取当前窗口的宽度，并存储在变量中，使用window.innerHeight获取当前窗口的高度，并存储在另一个变量中。

4.根据权利要求1所述的数据可视化大屏展示页面自适应方法，其特征在于：计算缩放比例的具体操作包括：

将获取到的屏幕宽、高像素数与设计稿的宽、高像素数进行比较；

如果设计稿的宽度小于或等于屏幕宽度，则缩放比例应该为1；

否则，计算出需要缩放的比例。

5.根据权利要求4所述的数据可视化大屏展示页面自适应方法，其特征在于：将屏幕宽度除以设计稿的宽度，然后将结果四舍五入保留两位小数，即得到需要缩放的比例；按照相同的方法计算出需要缩放的高度比例。

6.根据权利要求1所述的数据可视化大屏展示页面自适应方法，其特征在于：对整个视图进行缩放的具体操作包括：

在CSS中使用Scale属性，在主要容器元素上设置Scale属性，并设置为计算出的缩放比例，整个页面中的所有内容被等比例地缩放，从而适应不同大小的屏幕。

7.根据权利要求1所述的数据可视化大屏展示页面自适应方法，其特征在于：使用栅格化系统来对页面进行布局排版，以便更好地适应各种屏幕大小。