CN113836470A - 一种构建响应式数据展示页面的方法及设备、介质 - Google Patents

Abstract

本申请公开了一种构建响应式数据展示页面的方法及设备、介质。上述方法包括获取数据展示页面的设计尺寸，以及用以打开数据展示页面的终端设备的屏幕尺寸，根据设计尺寸计算得到数据展示页面的设计宽高比，并根据屏幕尺寸计算得到终端设备的屏幕宽高比；对设计宽高比与屏幕宽高比进行比较得到比较结果，基于比较结果对数据展示页面进行设置得到响应于终端设备屏幕尺寸的响应式数据展示页面。本申请公开的构建响应式数据展示页面的方法，能够确保用户使用任何设备访问打开数据展示页面时，设备屏幕与页面之间不会留下空白，数据展示板块能够响应式排布，不会出现页面排版混乱，既提升了数据展示页面的开发效率，又提升了用户的体验度。

Description

一种构建响应式数据展示页面的方法及设备、介质

技术领域

本申请涉及数据展示技术领域，尤其涉及一种构建响应式数据展示页面的方法及设备、介质。

背景技术

随着大数据技术对各行各业渗透，用户提出了越来越多的数据统计及展示需求。由于互联网的便利，使用Web技术对数据进行统计与展示，成为主流的选择。Web(WorldWide Web)即全球广域网,也称为万维网,是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息***。

目前，普遍采用数据展示屏幕对统计后的数据进行展示。现有数据展示屏幕多采取固定布局设计，无法根据不同尺寸的终端设备对展示页面进行排版及缩放。随着终端设备尺寸的多样化，现有的技术无法使数据展示页面满足在多样化终端设备上进行数据展示的需求。

在现有技术的实现框架下，如果设备的尺寸超过数据展示页面的设计尺寸，则使用该设备打开页面时，如图1所示，设备屏幕与数据展示页面之间将出现空白；如果设备尺寸小于数据展示页面的设计尺寸，则使用该设备打开页面时，如图2所示，数据展示页面将溢出设备屏幕，需要在一个或两个方向上出现滚动条；如果设备尺寸比例与数据展示页面的设计尺寸比例不同，则在展示时，容易出现排版混乱。

上述问题不利于数据展示屏幕跨设备使用，使用户体验度降低。因此，现在迫切需要开发一种新型的构建响应式数据展示页面的方法及设备、介质，利用响应式数据展示屏幕，确保用户使用任何设备访问数据展示页面时，设备屏幕与页面之间不会留下空白，数据展示板块能够响应式排布，不会出现排版混乱，既提升数据展示页面的开发效率，又提升用户的体验度。

发明内容

本说明书实施例提供了一种构建响应式数据展示页面的方法及设备、介质，用于解决现有技术中的如下技术问题：在现有技术的实现框架下，由于数据展示页面的设计布局固定，难以满足在多样化终端设备上进行数据展示的需求。

本说明书实施例采用下述技术方案：

一种构建响应式数据展示页面的方法，其中，所述方法包括：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

进一步地，所述对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面，包括：

比较所述设计宽高比与所述屏幕宽高比，

若所述设计宽高比等于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时不设置滚动条；

若所述设计宽高比小于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时，将所述数据展示页面的宽度缩放至与所述终端设备的屏幕宽度一致，并在高度方向上设置滚动条；

若所述设计宽高比大于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时，将所述数据展示页面的高度缩放至与所述终端设备的屏幕高度一致，并在宽度方向上设置滚动条。

在一种优选的实施方式中，所述数据展示页面包括多个数据展示板块，所述构建响应式数据展示页面的方法还包括：

采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版。

进一步地，所述采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版，包括：

将构成所述数据展示板块的元素按照层级结构进行划分；

采用基于网格的二维布局技术，将所述响应式数据页面本体设定为一级网格容器，将每个所述数据展示模块设定为一级网格元素，并将每个所述一级网格元素设定为二级网格容器，将每个所述数据展示模块的下一级元素设定为二级网格元素；

根据所述响应式数据展示页面的尺寸，为每个所述数据展示模块分配其在所述响应式数据展示页面上的位置及尺寸，根据每个所述数据展示模块分配得到的位置及尺寸，调整其下一级元素的位置及尺寸，以对多个所述数据展示板块及其下一级元素进行排版。

进一步地，所述采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版，包括：

将构成所述数据展示板块的元素按照层级结构进行划分；

采用基于网格的二维布局技术，将所述元素按照自上而下的层级顺序设定为多个网格容器层，每个网格容器层包括一个或多个网格容器，并设定每个网格容器对应的网格元素，上一层的网格元素即为下一层的网格容器；

根据所述响应式数据展示页面的尺寸按照自上而下的层级顺序为每个网格容器层中的网格容器分配位置及尺寸，根据每个网格容器分配得到的位置及尺寸，调整与所述网格容器对应的网格元素的位置及尺寸，形成层层嵌套的单向尺寸约束，以对所述多个数据展示板块进行排版。

在一种优选的实施方式中，所述构建响应式数据展示页面的方法还包括：

采用PostCSS技术转换层叠样式表(CSS)的度量单位，将像素转换为响应式度量单位。

进一步地，所述响应式度量单位为根元素字宽(rem)。

进一步地，在对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果之后，所述构建响应式数据展示页面的方法还包括：

计算所述终端设备的根元素字宽(rem)基准，

其中，所述根元素字宽(rem)基准的计算公式如下：

所述屏幕宽度的像素值÷所述页面设计宽度的像素值÷浏览器中1rem所代表的像素值；或

所述屏幕高度的像素值÷所述页面设计高度的像素值÷浏览器中1rem所代表的像素值。

一种构建响应式数据展示页面的设备，其中，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

一种构建响应式数据展示页面的非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

本说明书实施例采用的上述至少一个技术方案能够达到以下有益效果：

(1)本说明书实施例示例的构建响应式数据展示页面的方法，通过比较数据展示页面的设计宽高比与终端设备的屏幕宽高比，对数据展示页面进行调整，使其能够响应于终端设备的屏幕尺寸。从而使用户在使用任何终端设备访问数据展示页面时，数据展示页面在整体呈现层面，不会留下空白，至多在一个方向上设置滚动条，提升了数据展示页面的开发效率，使用户可以看到页面的完整宽度或完整高度，提升了用户的体验度。

(2)本说明书实施例示例的构建响应式数据展示页面的方法，在设计宽高比不变的情况下，通过缩放数据展示页面的宽度或高度，使其能够在多种终端设备的屏幕上打开，从而使得非静态定位的页面元素不脱离排版。

(3)本说明书实施例示例的构建响应式数据展示页面的方法，通过采用基于网格(CSS Grid)的二维布局技术，运用网格容器单向约束网格元素，在排版层面上，有效地解决了元素溢出的问题，使数据展示页面在任何尺寸的终端设备上打开都不会出现排版混乱的情况。

(4)本说明书实施例示例的构建响应式数据展示页面的方法，通过页面度量单位转换及响应式单位基准计算的密切配合，在组件层面上既实现了响应式设计，又实现了对开发者的友好；既符合直觉、便于维护，又能实现响应式效果，在提升开发效率的同时，保证了响应式的用户体验。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1为本说明书背景技术中设备屏幕与数据展示页面之间出现空白的一种示意图；

图2为本说明书背景技术中数据展示页面溢出设备屏幕的一种示意图；

图3为本说明书实施例提供的构建响应式数据展示页面的方法对多个数据展示板块进行排版的一种示意图；

图4为本说明书实施例提供的构建响应式数据展示页面的方法的一种流程示意图。

具体实施方式

为使本说明书的目的、技术方案和优点更加清楚，下面将结合本说明书具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

以下结合附图，详细说明本申请各实施例提供的技术方案。图4为本说明书实施例提供的构建响应式数据展示页面的方法的一种流程示意图。

如图4所述，一种构建响应式数据展示页面的方法，其中，包括：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

本实施例示例的构建响应式数据展示页面的方法，通过比较数据展示页面的设计宽高比与终端设备的屏幕宽高比，对数据展示页面进行调整，使其能够响应于终端设备的屏幕尺寸。从而使用户在使用任何终端设备访问数据展示页面时，数据展示页面在整体呈现层面，不会留下空白，既提升了数据展示页面的开发效率，又提升了用户的体验度。

在本实施例中，所述对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面，包括：

比较所述设计宽高比与所述屏幕宽高比，

若所述设计宽高比等于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时不设置滚动条；

若所述设计宽高比小于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时，将所述数据展示页面的宽度缩放至与所述终端设备的屏幕宽度一致，并在高度方向上设置滚动条；

若所述设计宽高比大于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时，将所述数据展示页面的高度缩放至与所述终端设备的屏幕高度一致，并在宽度方向上设置滚动条。

在数据展示页面整体呈现层面，通过对比数据展示页面的设计宽高比与终端设备的屏幕宽高比，设定滚动条所在的位置，能够在设备尺寸比例与数据展示页面的设计尺寸比例不同的情况下，在设备上打开数据展示页面时不会出现排版混乱的情况，而且无论使用何种尺寸及比例的设备打开页面，都能看到页面的全貌。

同时，在设计宽高比不变的情况下，通过缩放数据展示页面的宽度或高度，使其能够在多种终端设备的屏幕上打开，从而使得非静态变量定位的页面元素不脱离排版。

在本实施例中，所述数据展示页面包括多个数据展示板块，所述构建响应式数据展示页面的方法还包括：

采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版。

进一步地，所述采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版，包括：

将构成所述数据展示板块的元素按照层级结构进行划分；

采用基于网格的二维布局技术，将所述响应式数据页面本体设定为一级网格容器，将每个所述数据展示模块设定为一级网格元素，并将每个所述一级网格元素设定为二级网格容器，将每个所述数据展示模块的下一级元素设定为二级网格元素；

根据所述响应式数据展示页面的尺寸，为每个所述数据展示模块分配其在所述响应式数据展示页面上的位置及尺寸，根据每个所述数据展示模块分配得到的位置及尺寸，调整其下一级元素的位置及尺寸，以对多个所述数据展示板块及其下一级元素进行排版。

进一步地，所述采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版，包括：

采用基于网格的二维布局技术，将所述元素按照自上而下的层级顺序设定为多个网格容器层，每个网格容器层包括一个或多个网格容器，并设定每个网格容器对应的网格元素，上一层的网格元素即为下一层的网格容器；

根据所述响应式数据展示页面的尺寸按照自上而下的层级顺序为每个网格容器层中的网格容器分配位置及尺寸，根据每个网格容器分配得到的位置及尺寸，调整与所述网格容器对应的网格元素的位置及尺寸，形成层层嵌套的单向尺寸约束，以对所述多个数据展示板块进行排版。

本实施例示例的构建响应式数据展示页面的方法，通过采用基于网格(CSS Grid)的二维布局技术，运用网格容器单向约束网格元素，在排版层面上，有效地解决了元素溢出的问题，使数据展示页面在任何尺寸的终端设备上打开都不会出现排版混乱的情况。

在本实施例中，所述构建响应式数据展示页面的方法还包括：

采用PostCSS技术转换层叠样式表(CSS)的度量单位，将像素转换为响应式度量单位。

进一步地，所述响应式度量单位为根元素字宽(rem)。

进一步地，在对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果之后，所述构建响应式数据展示页面的方法还包括：

计算所述终端设备的根元素字宽(rem)基准，

其中，所述根元素字宽(rem)基准的计算公式如下：

所述屏幕宽度的像素值÷所述页面设计宽度的像素值÷浏览器中1rem所代表的像素值；或

所述屏幕高度的像素值÷所述页面设计高度的像素值÷浏览器中1rem所代表的像素值。

本实施例示例的构建响应式数据展示页面的方法，通过页面度量单位转换及响应式单位基准计算的密切配合，在组件层面上既实现了响应式设计，又实现了对开发者的友好；既符合直觉、便于维护，又能实现响应式效果，在提升开发效率的同时，保证了响应式的用户体验。

为便于对本发明的理解，下面对上述构建响应式数据展示页面的方法的具体内容做进一步的描述：

一、整体呈现层面

本实施例示例的构建响应式数据展示页面的方法在开发程序时，在程序内部声明常量，存储数据展示页面的设计宽度和高度的像素值，并计算出宽高比。例如，一款数据展示页面的设计宽度为1920像素，设计高度为1080像素，其设计宽高比应为1920/1080。用户使用终端设备访问页面时，程序先获取用户设备的屏幕宽度和高度的像素值，并计算出设备屏幕的宽高比。如果设备屏幕的宽高比等于页面设计的宽高比，则代表比例一致，不设置滚动条；如果设备屏幕宽高比大于页面设计宽高比，则代表设备屏幕宽度有余而高度不足，页面应纵向滚动。如果设备屏幕宽高比小于页面设计宽高比，则代表设备屏幕高度有余而宽度不足，页面应横向滚动。

当用户使用其他设备打开页面时，检测到设备屏幕尺寸发生变化，则重新获取设备屏幕宽度及高度的像素值，重新计算设备屏幕宽高比，重新比较设备屏幕宽高比与页面设计宽高比，并重新设置滚动条位置。

二、排版层面

本实施例示例的构建响应式数据展示页面的方法，使用基于网格的二维布局技术(CSS Grid技术)对数据展示页面中的多个数据展示板块进行布局，实现所有网格元素(子元素)完全由网格容器(父元素)控制，形成单向的尺寸约束，避免了数据展示页面的元素溢出，及排版混乱。

对于数据展示页面而言，采用CSS Grid技术布局的优势主要有：

1.CSS Grid是二维方向上的布局方式，可以精细的控制横轴和纵轴上的元素的大小和对齐等。与之类似但更早期的flex布局只能对主轴实现精细控制，对交叉轴的控制不足。

2.CSS Grid拥有特殊的度量单位fr，用以表示剩余空间总量，使用fr能方便地按比例分配剩余空间。

3.CSS Grid通过设置父元素样式，实现网格容器空间的分配。与之类似的flex布局只能在父元素上设置对齐方式，分配容器空间的任务依然由子元素控制。也就是说，CSSGrid是父元素“指派”空间给子元素，而flex则是子元素“瓜分”父元素空间。

综上，CSS Grid布局以其精细控制两个方向、直观的剩余空间表示、父元素控制子元素的特性，是实现响应式数据展示页面单向尺寸约束的关键技术。

如图3所示，遇到排版需要时，避免了设置子元素的宽度和高度，而是将其父元素转为CSS Grid布局容器，根据业务需求分配给父元素空间，从而调整子元素的位置和大小。从最上层需要排版的DOM元素开始，即开始使用CSS Grid布局，最终形成层层嵌套的单向尺寸约束。同理，若要修改某个子元素的位置和大小，也通过调整父元素空间分配实现。

三、组件层面

在页面组件层面，利用PostCSS自定义CSS代码编译器的特性，实现如下效果：开发人员可以使用更符合直觉的像素px为单位编写样式代码，由编译器自动编译为响应式单位。

在Web标准中，有像素(px)、根元素字宽(rem)、百分之一视窗宽度(vw)及百分之一视窗高度(vh)等多种度量单位。其中，较为常用的是像素(px)，其优点是符合直觉，设计师、开发者通常的交流和表述也使用该单位，但像素(px)不具备响应式特性，如果在编写代码时也使用像素(px)作为单位，则页面也将不具备响应式效果。Web标准中常用的响应式度量单位有根元素字宽(rem)、百分之一视窗宽度(vw)及百分之一视窗高度(vh)等，以这些单位编写的页面，将具备响应式效果。

但是，在设计数据展示页面时，通常以像素(px)作为度量单位。这意味着，编写代码时，若想赋予页面响应式效果，需要将像素转换为响应式单位，而这带来了如下问题：

1.需要对所有CSS语句进行单位换算，而转换过程是繁琐的。如设计尺寸1980px宽度的数据展示大屏，其上有一个255px宽度的元素，那么它对应的vw值为255/1980＝0.1328125vw。

2.一旦设计尺寸发生变动，先前转换的结果将全部失效，需要重新转换。

3.浏览器在处理4位及以上小数点的长度值时，常出现意料之外的结果。

4.响应式单位不符合直觉，以响应式单位书写的样式代码，维护难度巨大。

本实施例示例的构建响应式数据展示页面的方法，通过引入PostCSS这一开源工具，编译样式代码，自动化地实现输入像素(px)、输出响应式单位，并取两位小数近似值。

本实施例示例的构建响应式数据展示页面的方法，选用rem作为响应式单位，不选用vw或vh。因为vw或vh是基于视窗宽度或高度的，而本方法在“整体呈现层面”的处理方式，使得尺寸计算基准是通过比较页面设计宽高比与设备屏幕宽高比得到的，根据设备屏幕尺寸而异，因此尺寸的计算基准有可能是屏幕宽度，也有可能是屏幕高度。这意味着编译后的响应式单位有可能是vw，有可能是vh，并且需要在用户的终端设备上编译，使得编译器更复杂的同时，损耗终端设备性能，造成用户体验下降。而统一为rem则可以在打包时编译，在开发环节就排除问题，提高了终端设备的流畅度。

使用rem前，需要计算并设定它的基准，即1rem等于多少px，下称用户rem基准。

在浏览器的默认设置中，1rem＝16px，可将其视为设计rem基准。

在用户访问页面时，在比较设计尺寸宽高比和用户设备宽高比之后，计算出用户rem基准，其计算时机同“整体呈现层面”滚动条的计算时机。

此外，在前端工程中安装PostCSS及其插件postcss-pxtorem，创建配置文件，对所有CSS属性执行px到rem的换算。

应用上述方法后，代码中的px单位将被转化为rem单位，而rem的基准也会在用户访问页面时计算完成。例如CSS语句“width:255px”，将被转换为“width:15.94rem”。15.94rem在1920px宽度的设备上，等于255px，而在1366px宽度的设备上，则等于181.42px。但对于开发者而言，只需按照设计标准，在代码中写入“width:255px”即可，后续步骤均交由编译器和浏览器自动处理。

本实施例示例的构建响应式数据展示页面的方法从整体呈现、排版、组件三个层面用不同方式实现响应式效果，搭配使用，三个层面从宏观到微观、相互结合，实现了整个数据展示页面在不同尺寸比例的终端设备上打开时，能够呈现出响应式视觉效果，不会出现空白或排版混乱的问题。

基于同样的思路，本申请的一些实施例还提供了上述方法对应的设备和非易失性计算机存储介质。

本申请的一些实施例提供的对应于图4的一种构建响应式数据展示页面的设备，所述设备包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

本申请的一些实施例提供的对应于图4的一种构建响应式数据展示页面的非易失性计算机存储介质，存储有计算机可执行指令，所述计算机可执行指令设置为：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于设备和介质实施例而言，由于其基本相似于方法实施例，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本申请实施例提供的设备和介质与方法是一一对应的，因此，设备和介质也具有与其对应的方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述设备和介质的有益技术效果。

本领域内的技术人员应明白，本发明的实施例可提供为方法、***、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

本发明是参照根据本发明实施例的方法、设备(***)、和计算机程序产

品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。

这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。

这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种构建响应式数据展示页面的方法，其特征在于，所述方法包括：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

2.如权利要求1所述的构建响应式数据展示页面的方法，其特征在于，所述对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面，包括：

比较所述设计宽高比与所述屏幕宽高比，

若所述设计宽高比等于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时不设置滚动条；

若所述设计宽高比小于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时，将所述数据展示页面的宽度缩放至与所述终端设备的屏幕宽度一致，并在高度方向上设置滚动条；

若所述设计宽高比大于所述屏幕宽高比，则所述数据展示页面在所述终端设备上打开时，将所述数据展示页面的高度缩放至与所述终端设备的屏幕高度一致，并在宽度方向上设置滚动条。

3.如权利要求1所述的构建响应式数据展示页面的方法，其特征在于，所述数据展示页面包括多个数据展示板块，所述方法还包括：

采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版。

4.如权利要求3所述的构建响应式数据展示页面的方法，其特征在于，所述采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版，包括：

将构成所述数据展示板块的元素按照层级结构进行划分；

采用基于网格的二维布局技术，将所述响应式数据页面本体设定为一级网格容器，将每个所述数据展示模块设定为一级网格元素，并将每个所述一级网格元素设定为二级网格容器，将每个所述数据展示模块的下一级元素设定为二级网格元素；

根据所述响应式数据展示页面的尺寸，为每个所述数据展示模块分配其在所述响应式数据展示页面上的位置及尺寸，根据每个所述数据展示模块分配得到的位置及尺寸，调整其下一级元素的位置及尺寸，以对多个所述数据展示板块及其下一级元素进行排版。

5.如权利要求3所述的构建响应式数据展示页面的方法，其特征在于，所述采用基于网格(CSS Grid)的二维布局技术，在所述响应式数据展示页面上对所述多个数据展示板块进行排版，包括：

将构成所述数据展示板块的元素按照层级结构进行划分；

采用基于网格的二维布局技术，将所述元素按照自上而下的层级顺序设定为多个网格容器层，每个网格容器层包括一个或多个网格容器，并设定每个网格容器对应的网格元素，上一层的网格元素即为下一层的网格容器；

根据所述响应式数据展示页面的尺寸按照自上而下的层级顺序为每个网格容器层中的网格容器分配位置及尺寸，根据每个网格容器分配得到的位置及尺寸，调整与所述网格容器对应的网格元素的位置及尺寸，形成层层嵌套的单向尺寸约束，以对所述多个数据展示板块进行排版。

6.如权利要求1或权利要求3所述的构建响应式数据展示页面的方法，其特征在于，所述方法还包括：

采用PostCSS技术转换层叠样式表(CSS)的度量单位，将像素转换为响应式度量单位。

7.如权利要求6所述的构建响应式数据展示页面的方法，其特征在于：

所述响应式度量单位为根元素字宽(rem)。

8.如权利要求7所述的构建响应式数据展示页面的方法，其特征在于，在对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果之后，所述方法还包括：

计算所述终端设备的根元素字宽(rem)基准，

其中，所述根元素字宽(rem)基准的计算公式如下：

所述屏幕宽度的像素值÷所述页面设计宽度的像素值÷浏览器中1rem所代表的像素值；或

所述屏幕高度的像素值÷所述页面设计高度的像素值÷浏览器中1rem所代表的像素值。

9.一种构建响应式数据展示页面的设备，其特征在于，包括：

至少一个处理器；以及，

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

10.一种构建响应式数据展示页面的非易失性计算机存储介质，存储有计算机可执行指令，其特征在于，所述计算机可执行指令设置为：

获取所述数据展示页面的设计尺寸，以及用以打开所述数据展示页面的终端设备的屏幕尺寸，其中，所述设计尺寸至少包括所述数据展示页面设计宽度的像素值与设计高度的像素值，所述屏幕尺寸至少包括所述终端设备屏幕宽度的像素值与屏幕高度的像素值；

根据所述设计尺寸计算得到所述数据展示页面的设计宽高比，并根据所述屏幕尺寸计算得到所述终端设备的屏幕宽高比；

对所述设计宽高比与所述屏幕宽高比进行比较得到比较结果，基于所述比较结果对所述数据展示页面进行设置得到响应于所述终端设备屏幕尺寸的响应式数据展示页面。

Images