CN115827136A - 多屏幕页面响应式布局方法、装置及存储介质 - Google Patents

Abstract

本申请公开了一种多屏幕页面响应式布局方法，涉及商业智能技术领域，解决了现有技术中，解决了现有技术中页面在不同的大屏上不适配的问题，该方法包括：创建仪表板画布页面；计算显示设备实际物理尺寸，并确定页面响应方式；对大屏字体进行适配；实现了响应式布局方式，等比例缩放，全屏幕适配，宽度以及高度适配，支持用户多样话的需求，真正做到一套设计，多端适配。

Description

多屏幕页面响应式布局方法、装置及存储介质

技术领域

本申请涉及商业智能技术领域，尤其涉及一种多屏幕页面响应式布局方法、装置及存储介质。

背景技术

商业智能指用现代仓库技术、线上分析处理技术、数据挖掘和数据展现技术进行数据分析以实现商业价值。商业智能数据的分析成果往往是需要通过数据大屏来展示。

数据大屏需要支持PC、平板、手机和电视等多种终端，每一种终端具有不同的显示分辨率，为了在不同的显示分辨率的终端上提供一致的用户体验，在嵌入式商业智能上，大屏可能会被嵌入到分辨率不同、大小不同的容器中，如何进行多种屏幕进行适配，是一个亟需解决的问题。

发明内容

本申请实施例通过提供一种多屏幕页面响应式布局方法、装置及存储介质，解决了现有技术中页面在不同的大屏上不适配的问题，实现了响应式布局方式，等比例缩放，全屏幕适配，宽度以及高度适配，支持用户多样话的需求，真正做到一套设计，多端适配。

第一方面，本发明实施例提供了一种多屏幕页面响应式布局方法，该方法包括：

创建仪表板画布页面；

计算显示设备实际物理尺寸，对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度，在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染，并确定页面响应方式；

对大屏字体进行适配。

结合第一方面，在一种可能的实现方式中，所述创建仪表板画布页面，包括：定义多个可视化组件的位置、大小、外边距以及在屏幕垂直方向的堆叠层级说明。

结合第一方面，在一种可能的实现方式中，所述页面响应方式包括：等比例适配、全屏幕适配、屏幕跨度适配以及屏幕高度适配。

结合第一方面，在一种可能的实现方式中，所述计算显示设备实际物理尺寸，包括：计算横向比例和竖向比例；

所述横向比例＝实际画布宽度/原始设计宽度；

所述竖向比例＝实际画布宽度/原始设计高度。

结合第一方面，在一种可能的实现方式中，所述对大屏字体进行适配，包括：所述大屏字体的调整依赖于所述实际物理尺寸。

第二方面，本发明实施例提供了一种多屏幕页面响应式布局装置，该装置包括：

初始化模块，用于创建仪表板画布页面；

响应模块，用于计算显示设备实际物理尺寸，对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度，在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染，并确定页面响应方式；

适配模块，用于对大屏字体进行适配。

结合第二方面，在一种可能的实现方式中，所述初始化模块包括：定义多个可视化组件的位置、大小、外边距以及在屏幕垂直方向的堆叠层级说明。包括：等比例适配、全屏幕适配、屏幕跨度适配以及屏幕高度适配。

结合第二方面，在一种可能的实现方式中，所述响应模块包括：计算横向比例和竖向比例；

所述横向比例＝实际画布宽度/原始设计宽度；

所述竖向比例＝实际画布宽度/原始设计高度。

结合第二方面，在一种可能的实现方式中，所述适配模块包括：所述大屏字体的调整依赖于所述实际物理尺寸。

结合第二方面，在一种可能的实现方式中，所述响应模块包括：对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：

组件宽度比＝绝对组件宽度/绝对组合容器宽度；

组件长度比＝绝对组件长度/绝对组合容器宽度；

在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：

相对组件宽度＝相对组合容器宽度*组件宽度比；

相对组件长度＝相对组合容器长度*组件长度比；

得到组件的长和宽，进行渲染。

第三方面，本发明实施例提供了一种多屏幕页面响应式布局服务器，包括存储器和处理器；

所述存储器用于存储计算机可执行指令；

所述处理器用于执行所述计算机可执行指令，以实现一种多屏幕页面响应式布局方法和一种多屏幕页面响应式布局方法的任一项所述的方法。

第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机可读存储介质存储有可执行指令，计算机执行所述可执行指令时能够实现实现一种多屏幕页面响应式布局方法和一种多屏幕页面响应式布局方法的任一项所述的方法。

本发明实施例中提供的一个或多个技术方案，至少具有如下技术效果或优点：

本发明实施例通过采用了一种多屏幕页面响应式布局方法、装置及存储介质，该方法包括：创建仪表板画布页面；计算显示设备实际物理尺寸，对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度，在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染，并确定页面响应方式；对大屏字体进行适配；使得商业智能大屏的一套设计支持多种设备屏幕，始终保持原有布局与屏幕尺寸相适配，在嵌入式商业智能上，大屏可能会被嵌入到分辨率不同，大小不同的容器中去，本专利提供的技术可以使得嵌入式商业智能大屏保持其原来的设计布局，解决了现有技术中页面在不同的大屏上不适配的问题，实现了响应式布局方式，等比例缩放，全屏幕适配，宽度以及高度适配，支持用户多样话的需求，真正做到一套设计，多端适配。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对本发明实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请实施例提供的多屏幕页面响应式布局方法步骤流程图；

图2为本申请实施例提供的可视化组件的布局信息图；

图3为本申请实施例提供的页面设计呈现的效果图；

图4为本申请实施例提供的实际大小与画布呈现大小区别示意图；

图5为本申请实施例提供的多屏幕页面响应式布局装置示意图；

图6为本申请实施例提供的多屏幕页面响应式布局服务器示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述。显然，所描述的实施例是本发明的一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

数据大屏需要支持PC、平板、电视和手机等多种终端显示，每一种终端具有不用显示分辨率，一种能够使用多种屏幕的响应式布局方法显得尤为重要，本文提出的商业智能大屏响应式布局方法，通过根据屏幕代销自动调节内部可视化组件内容，位置以及大小，保持大屏内容与屏幕相适配，不会因为屏幕比例的变化使得大屏整体排版错乱。

本发明实施例提供了一种多屏幕页面响应式布局方法，如图1所示该方法包括以下步骤S101至S103。

S101，创建仪表板画布页面。包括：定义多个可视化组件的位置、大小、外边距以及在屏幕垂直方向的堆叠层级说明。商业能大屏包含了页面定义，以及页面内部可视化组件的定义，每一个可视化组件包含了其位置，大小，外边距以及在屏幕垂直方向的堆叠层级说明。例如一个可视化组件的布局信息如图2所示。页面对此设计呈现的效果如图3所示。每一个可视化组件关联的布局数据是一种相对大小，在渲染的时候才会根据屏幕的像素和大小进行换算，确定布局。

页面是包裹可视化组件的容器，页面的大小由其内部的可视化组件决定，可视化组件在声明创建的时候，会关联且仅关联一个页面。

S102，计算显示设备实际物理尺寸，对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度，在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染，并确定页面响应方式。计算显示设备实际物理尺寸，包括：计算横向比例和竖向比例；横向比例＝实际画布宽度/原始设计宽度；竖向比例＝实际画布宽度/原始设计高度。商业智能大屏的外层容器是仪表板页面，页面包含了多个可视化组件，页面的逻辑大小由可视化组件的大小以及外边距决定。仪表板页面定义了两个可视化组件，柱状图组件位置为(上：0，左：0，宽度：400，高度300)，线条图组件位置为(上：0，左：440，宽度：400，高度300)。整个页面的逻辑大小为：宽度为线条图的左侧加宽度440+400＝840，高度为300。

在实际呈现仪表板页面的时候，从显示设备可以获取到实际的显示尺寸，这个尺寸是实际的物理尺寸，实际的物理尺寸与原始的设计大小会有差异，如图4所示。

在本申请提供的一个具体的实施例中，商业智能大屏包含了丰富的可视化组件类型，不同类型的组件有着不同的内容结构，因此，针对不同的组件类型在屏幕适配方面需要进行不同的优化处理。常用的可视化组件类型包括基本图形类型组件、表格类型组件和文本类型组件等，下面就不同的组件类型的适配方法进行详细的介绍。

一个典型的图形类型可视化组件，以柱状图为例，由标题、内容区域、坐标轴、图例、数据标签等组成，在屏幕分辨率、屏幕尺寸或者页面大小发生变化时，为了提供更好的用户体验，并不能使用绝对高度或宽度进行组件的渲染，而是通过相应的计算转换方法来动态的对以上内容进行相应的渲染和适配。

首先，在具体渲染组件之前，需要得到组件外部容器的相对宽度和相对高度，因此，需要计算出组件之于页面的宽高比，即：

宽度比＝绝对组件宽度/绝对页面宽度

高度比＝绝对组件高度/绝对页面高度

在页面尺寸发生变化时，使用当前页面尺寸及宽高比来实时进行组件宽高的计算与渲染，即：

相对宽度＝当前页面宽度*宽度比；

相对高度＝当前页面高度*高度比；

在得到相对高度与相对宽度后，得确定了组件外部容器的尺寸大小。将标题、内容区域、图例和数据标签等内容重新按比例进行渲染。

标题的渲染比较简单，采用定高的方式进行渲染，比较复杂的是图形内容区域，还是以柱形图举例，在数据内容非常多的情况下，柱形的数量会非常多，往往因为柱形的宽度太窄而影响观感。为了支持不同数据量下的组件渲染，本技术中包含了两种不同的渲染模式，分别为shrink模式和expand模式。shrink模式是将整个图表的内容完全显示在整个容器中，当数据内容非常多时，图形将变得不清晰；而expand模式则不同，它将图表完全展开，多出的部分则显示滚动条，通过在组件容器中拖动滚动条来查看组件的内容。

还有一种需要适配的因素是屏幕的缩放比例。本技术支持在不同的缩放比例下一致的观感和用户体验。为了支持屏幕缩放，将页面在100％大小时的缩放比例定义为1，在屏幕缩放比例变化时，获取新的缩放比例值，例如将屏幕放大到150％，这时屏幕的缩放比例由原来的1变为了1.5，从而达到将页面及组件放大1.5倍的效果。

与基本图表类型组件相比，表格类型组件由行和列组成，在针对行和列的宽度适配需要更多的设计与考虑。为了提供一致的观感和更好的用户体验，在不同尺寸，不同分辨率的屏幕上，用户设置的行宽与列宽比例应保持一致。同时，在表格组件展示的过程中，过滤、排序或者其他操作都应该保持列宽与相应数据的一致性。因此，表格的行宽与列宽并没有使用绝对尺寸来进行渲染。拿列宽适配来举例，首先通过计算绝对列宽与表格绝对宽度的比值得到列宽比，即列宽比＝绝对列宽/绝对表格宽度；再计算表格绝对宽度与整个页面宽度的比值得到表格宽度比，即表格宽度比＝绝对表格宽度/页面宽度。

在表格实时渲染时，通过获取此时页面的宽度来计算出该列的相对宽度，即：相对宽度＝当前页面宽度*表格宽度比*列宽比。

在得到真正的列宽后再进行渲染。同时，列宽与相应的数据严格绑定，不会因为数据经过排序或者其他操作而将列宽应用到另一个数据列上。

自动调整行宽和列宽也是一个需要考虑的问题，当用户没有手动设过行宽或列宽，那么在加载表格组件需要保证行宽和列宽能够展示单元格的内容。单元格中可以包含文字、超链接甚至是图片。因此，自动计算行宽或列宽也是自动布局需要考虑的因素。

这里仍然以列宽进行举例，自动调整需要对每一个单元格的文字长度或图片宽度进行计算，计算完成之后得到一个最小的宽度值来作为整列的宽度值。在计算单元格宽度时，本技术支持两种不同的计算模式，开启文字折叠和关闭文字折叠。当开始文字折叠时，会允许文字换行，这对于单元格中包含长文本非常有用。

富文本组件通常只包含文字内容，通过对文字的编辑和格式化来展示内容。因此重点对于该类组件，重点需要针对文字进行适配。

多个单独的可视化组件可以通过组合、嵌入容器或嵌入标签容器等方式来组成复合类型组件。从整个页面角度仍然可以将一个复合容器组件看成一个单个组件，它仍然适合单个可视化组件的布局方法。但在复合类型组件内部，可以将其类比为一个小型页面，它由多个不同的组件构成，这些组件又支持以不同的方式进行布局。

组合是将多个可视化组件组合在一起形成一个组件组的操作，用以支持统一放大、缩小、移动、拷贝粘贴和删除操作。组合中每个组件的大小变化依赖于整个组合容器大小的变化，在创建组合时会记录组件与组合容器的长宽比，在根据比例动态计算出组件的实际渲染长度和宽度，即：

组件宽度比＝绝对组件宽度/绝对组合容器宽度；

组件长度比＝绝对组件长度/绝对组合容器宽度。

在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：

相对组件宽度＝相对组合容器宽度*组件宽度比；

相对组件长度＝相对组合容器长度*组件长度比；

得到组件的长和宽，进行渲染。

容器是一种布局辅助组件，运行将多个可视化组件组合成一个复合类型组件。其布局方式与组合基本相同，区别在于容器的标题栏是一个定值，并不参与组件宽度比的计算。

商业智能大屏除了在PC端和电视终端上的广泛应用，手机端也有非常多的使用场景。本技术支持在不同屏幕分辨率移动端设备的响应式布局适配。

首先，不同于PC端，手机端的可视化组件采用统一的纵向布局，组件长度完全相等，在新增组件时，会将组件置于整个页面队列的末尾。通过拖动或修改组件高度的方式来自定义组件布局。

可以看出，移动端的布局会比在PC上的布局简单一些，以组件宽度为例，在匹配不同分辨率和屏幕的移动端设备时，通过组件所占的逻辑单元格的宽度来实时计算方法组件的渲染的宽度公式如下：

相对组件宽度＝(实际单元格宽度–10/360)*逻辑单元格数量

通过这个公式来动态计算出组件的宽度并进行渲染。

页面响应方式包括：等比例适配、全屏幕适配、屏幕跨度适配以及屏幕高度适配。

等比例适配：保持原始设计的高宽比例，使用上面横向比例和竖向比例中较小的一个来拉伸或者缩放仪表板页面去填充画布，画布上有一个方向可能会出现留白，整个画布没有滚动条。

全屏幕适配:将仪表板页面充满整个画布。这种情况下仪表板页面会被拉伸或者缩放到整个画面，使用横向比例和竖向比例调整内部所有的可视化组件，将每一个子组件适配到合适尺寸，这个画布没有滚动条。

屏幕宽度适配：将仪表板页面宽度上铺满画布，高度按横向比例适配。这个时候统一使用横向比例调整内部所有可视化组件，使得每一个组件适配新尺寸。仪表板页面在竖向上可能出现上下留白，或者滚动条。

屏幕高度适配：将仪表板页面高度上铺满画布，宽度竖向比例适配。这个时候统一使用竖向比例调整内部所有可视化组件，使得每一个组件适配新尺寸。仪表板页面在横向上可能出现上下留白，或者滚动条。

S103，对大屏字体进行适配，包括：大屏字体的调整依赖于实际物理尺寸。

在商业智能大屏上确保文本能够很好的显示，很容易的阅读非常重要。在原始设计仪表板页面的时候，可视化组件上字体大小的设定是一个倍数，而不是实际的字体大小。

一倍的字体大小对应着13px的实际字体大小，随着屏幕尺寸的变化，或者显示容器的变化，我们会调整显示字体的大小。

字体大小的调整依赖于上文中横向比例，竖向比例的最小值，使用这个比例乘以原始设计的字体大小，再乘以一倍字体对应的实际字体大小，会得到最终的显示大小。

实际显示字体大小＝原始字体大小倍数X(横向比例，竖向比例)的最小值X一倍字体对应大小。

在本申请中，还提出了一种用户交互组件的适配，除了支持在不同屏幕上可视化组件布局的适配。同时也对可视化组件交互过程的组件进行了适配。例如工具提示框、弹出框等等组件的位置、大小进行了一些列的适配。具体包括：工具提示和弹出框。

商业智能大屏布局设计的辅助方法，为了给提供更好的布局设计，提出并实现了一种栅格化设计器，通过栅格化设计可以更好的完成组件的布局。包括：栅格化设计。栅格化设计是一种辅助设计方法，在打开屏幕设计器后，页面上会布满大小为100x100个像素的大格子，每个大格子又可以细分为25个20x20的小格子，每个组件的顶点必须位于格子的顶点，这样设计有助于对齐以及更好的布局。再新增一个组件时，默认为横向4个大格子，纵向3个大格子，即400x300个像素。

在上述的方法中，在涉及嵌入式商业智能是哪个，大屏可能会嵌入到分辨率不同、大小都各不相同的容器中去，根据本申请提供的方法，通过根据屏幕大小自动调节内部可视化组件的内容、位置以及大小。保持大屏内容与屏幕适配，不会因为屏幕比例的变化而使得大屏整体排版错乱。

本发明实施例提供了一种多屏幕页面响应式布局装置500，如图5所示该装置包括：

初始化模块501，用于创建仪表板画布页面；包括：定义多个可视化组件的位置、大小、外边距以及在屏幕垂直方向的堆叠层级说明。包括：等比例适配、全屏幕适配、屏幕跨度适配以及屏幕高度适配。

响应模块502，用于计算显示设备实际物理尺寸，并确定页面响应方式；计算横向比例和竖向比例；横向比例＝实际画布宽度/原始设计宽度；竖向比例＝实际画布宽度/原始设计高度。包括：对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度；在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染。

适配模块503，用于对大屏字体进行适配。大屏字体的调整依赖于实际物理尺寸。

上述实施例阐明的装置或模块，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。为了描述的方便，描述以上装置时以功能分为各种模块分别描述。在实施本申请时可以把各模块的功能在同一个或多个软件和/或硬件中实现。当然，也可以将实现某功能的模块由多个子模块或子单元组合实现。

本申请中所述的方法、装置或模块可以以计算机可读程序代码方式实现控制器按任何适当的方式实现，例如，控制器可以采取例如微处理器或处理器以及存储可由该(微)处理器执行的计算机可读程序代码(例如软件或固件)的计算机可读介质、逻辑门、开关、专用集成电路(英文：ApplicationSpecific IntegratedCircuit；简称：ASIC)、可编程逻辑控制器和嵌入微控制器的形式，控制器的例子包括但不限于以下微控制器：ARC625D、AtmelAT91SAM、MicrochipPIC18F26K20以及SiliconeLabsC8051F320，存储器控制器还可以被实现为存储器的控制逻辑的一部分。本领域技术人员也知道，除了以纯计算机可读程序代码方式实现控制器以外，完全可以通过将方法步骤进行逻辑编程来使得控制器以逻辑门、开关、专用集成电路、可编程逻辑控制器和嵌入微控制器等的形式来实现相同功能。因此这种控制器可以被认为是一种硬件部件，而对其内部包括的用于实现各种功能的装置也可以视为硬件部件内的结构。或者甚至，可以将用于实现各种功能的装置视为既可以是实现方法的软件模块又可以是硬件部件内的结构。

本申请所述装置中的部分模块可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构、类等。也可以在分布式计算环境中实践本申请，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。

本发明实施例提供了一种多屏幕页面响应式布局服务器600，如图6所示，包括存储器601和处理器601；存储器601用于存储计算机可执行指令；处理器602用于执行计算机可执行指令，以实现一种多屏幕页面响应式布局方法和一种多屏幕页面响应式布局方法的任一项的方法。

本发明实施例提供了一种计算机可读存储介质，计算机可读存储介质存储有可执行指令，计算机执行可执行指令时能够实现实现一种多屏幕页面响应式布局方法和一种多屏幕页面响应式布局方法的任一项的方法。

上述存储介质包括但不限于随机存取存储器(英文：RandomAccess Memory；简称：RAM)、只读存储器(英文：Read-OnlyMemory；简称：ROM)、缓存(英文：Cache)、硬盘(英文：HardDiskDrive；简称：HDD)或者存储卡(英文：MemoryCard)。所述存储器可以用于存储计算机程序指令。

虽然本申请提供了如实施例或流程图所述的方法操作步骤，但基于常规或者无创造性的劳动可以包括更多或者更少的操作步骤。本实施例中列举的步骤顺序仅仅为众多步骤执行顺序中的一种方式，不代表唯一的执行顺序。在实际中的装置或客户端产品执行时，可以按照本实施例或者附图所示的方法顺序执行或者并行执行(例如并行处理器或者多线程处理的环境)。

通过以上的实施方式的描述可知，本领域的技术人员可以清楚地了解到本申请可借助软件加必需的硬件的方式来实现。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，也可以通过数据迁移的实施过程中体现出来。该计算机软件产品可以存储在存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，移动终端，服务器，或者网络设备等)执行本申请各个实施例或者实施例的某些部分所述的方法。

本说明书中的各个实施方式采用递进的方式描述，各个实施方式之间相同或相似的部分互相参见即可，每个实施方式重点说明的都是与其他实施方式的不同之处。本申请的全部或者部分可用于众多通用或专用的计算机系统环境或配置中。例如：个人计算机、服务器计算机、手持设备或便携式设备、平板型设备、移动通信终端、多处理器系统、基于微处理器的系统、可编程的电子设备、网络PC、小型计算机、大型计算机、包括以上任何系统或设备的分布式计算环境等等。

以上实施例仅用以说明本申请的技术方案，而非对本申请限制；尽管参照前述实施例对本申请进行了详细的说明，本领域普通技术人员应当理解：其依然可以对前述实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请技术方案的范围。

Claims (8)

1.一种多屏幕页面响应式布局方法，其特征在于，包括：

创建仪表板画布页面；

计算显示设备实际物理尺寸，对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度，在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染，并确定页面响应方式；

对大屏字体进行适配。

2.根据权利要求1所述的方法，其特征在于，所述创建仪表板画布页面，包括：定义多个可视化组件的位置、大小、外边距以及在屏幕垂直方向的堆叠层级说明。

3.根据权利要求1所述的方法，其特征在于，所述页面响应方式包括：等比例适配、全屏幕适配、屏幕跨度适配以及屏幕高度适配。

4.根据权利要求1所述的方法，其特征在于，所述计算显示设备实际物理尺寸，包括：计算横向比例和竖向比例；

所述横向比例＝实际画布宽度/原始设计宽度；

所述竖向比例＝实际画布宽度/原始设计高度。

5.根据权利要求1所述的方法，其特征在于，所述对大屏字体进行适配，包括：所述大屏字体的调整依赖于所述实际物理尺寸。

6.一种多屏幕页面响应式布局装置，其特征在于，包括：

初始化模块，用于创建仪表板画布页面；

响应模块，用于计算显示设备实际物理尺寸，对多个组合组件的适配，记录组件的与组合容器的长宽比，根据比例动态计算出组件的实际渲染长度和宽度，即：组件宽度比＝绝对组件宽度/绝对组合容器宽度；组件长度比＝绝对组件长度/绝对组合容器宽度，在页面发生变化时，组合容器大小依据单个组件的长宽的计算规则，得到相对长宽，然后依据公式：相对组件宽度＝相对组合容器宽度*组件宽度比；相对组件长度＝相对组合容器长度*组件长度比；得到组件的长和宽，进行渲染，并确定页面响应方式；

适配模块，用于对大屏字体进行适配。

7.一种多屏幕页面响应式布局服务器，其特征在于，包括存储器和处理器；

所述存储器用于存储计算机可执行指令；

所述处理器用于执行所述计算机可执行指令，以实现权利要求1-5任一项所述的方法。

8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有可执行指令，计算机执行所述可执行指令时能够实现如权利要求1-5任一项所述的方法。

Images