[發(fā)明專利]一種構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法及設(shè)備、介質(zhì)

在審

• 申請(qǐng)?zhí)枺?/td>: 202111151557.1
• 申請(qǐng)日: 2021-09-29
• 公開(kāi)（公告）號(hào): CN113836470A
• 公開(kāi)（公告）日: 2021-12-24
• 發(fā)明（設(shè)計(jì)）人: 殷師哲;羅超;郭亞琨;王康;趙海興;李照川
• 申請(qǐng)（專利權(quán)）人: 浪潮卓數(shù)大數(shù)據(jù)產(chǎn)業(yè)發(fā)展有限公司
• 主分類(lèi)號(hào): G06F16/958
• 分類(lèi)號(hào): G06F16/958;G06F40/189
• 代理公司: 北京君慧知識(shí)產(chǎn)權(quán)代理事務(wù)所(普通合伙) 11716
• 代理人: 趙德豐

1.一種構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于，所述方法包括：

獲取所述數(shù)據(jù)展示頁(yè)面的設(shè)計(jì)尺寸，以及用以打開(kāi)所述數(shù)據(jù)展示頁(yè)面的終端設(shè)備的屏幕尺寸，其中，所述設(shè)計(jì)尺寸至少包括所述數(shù)據(jù)展示頁(yè)面設(shè)計(jì)寬度的像素值與設(shè)計(jì)高度的像素值，所述屏幕尺寸至少包括所述終端設(shè)備屏幕寬度的像素值與屏幕高度的像素值；

根據(jù)所述設(shè)計(jì)尺寸計(jì)算得到所述數(shù)據(jù)展示頁(yè)面的設(shè)計(jì)寬高比，并根據(jù)所述屏幕尺寸計(jì)算得到所述終端設(shè)備的屏幕寬高比；

對(duì)所述設(shè)計(jì)寬高比與所述屏幕寬高比進(jìn)行比較得到比較結(jié)果，基于所述比較結(jié)果對(duì)所述數(shù)據(jù)展示頁(yè)面進(jìn)行設(shè)置得到響應(yīng)于所述終端設(shè)備屏幕尺寸的響應(yīng)式數(shù)據(jù)展示頁(yè)面。

2.如權(quán)利要求1所述的構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于，所述對(duì)所述設(shè)計(jì)寬高比與所述屏幕寬高比進(jìn)行比較得到比較結(jié)果，基于所述比較結(jié)果對(duì)所述數(shù)據(jù)展示頁(yè)面進(jìn)行設(shè)置得到響應(yīng)于所述終端設(shè)備屏幕尺寸的響應(yīng)式數(shù)據(jù)展示頁(yè)面，包括：

比較所述設(shè)計(jì)寬高比與所述屏幕寬高比，

若所述設(shè)計(jì)寬高比等于所述屏幕寬高比，則所述數(shù)據(jù)展示頁(yè)面在所述終端設(shè)備上打開(kāi)時(shí)不設(shè)置滾動(dòng)條；

若所述設(shè)計(jì)寬高比小于所述屏幕寬高比，則所述數(shù)據(jù)展示頁(yè)面在所述終端設(shè)備上打開(kāi)時(shí)，將所述數(shù)據(jù)展示頁(yè)面的寬度縮放至與所述終端設(shè)備的屏幕寬度一致，并在高度方向上設(shè)置滾動(dòng)條；

若所述設(shè)計(jì)寬高比大于所述屏幕寬高比，則所述數(shù)據(jù)展示頁(yè)面在所述終端設(shè)備上打開(kāi)時(shí)，將所述數(shù)據(jù)展示頁(yè)面的高度縮放至與所述終端設(shè)備的屏幕高度一致，并在寬度方向上設(shè)置滾動(dòng)條。

3.如權(quán)利要求1所述的構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于，所述數(shù)據(jù)展示頁(yè)面包括多個(gè)數(shù)據(jù)展示板塊，所述方法還包括：

采用基于網(wǎng)格(CSS Grid)的二維布局技術(shù)，在所述響應(yīng)式數(shù)據(jù)展示頁(yè)面上對(duì)所述多個(gè)數(shù)據(jù)展示板塊進(jìn)行排版。

4.如權(quán)利要求3所述的構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于，所述采用基于網(wǎng)格(CSS Grid)的二維布局技術(shù)，在所述響應(yīng)式數(shù)據(jù)展示頁(yè)面上對(duì)所述多個(gè)數(shù)據(jù)展示板塊進(jìn)行排版，包括：

將構(gòu)成所述數(shù)據(jù)展示板塊的元素按照層級(jí)結(jié)構(gòu)進(jìn)行劃分；

采用基于網(wǎng)格的二維布局技術(shù)，將所述響應(yīng)式數(shù)據(jù)頁(yè)面本體設(shè)定為一級(jí)網(wǎng)格容器，將每個(gè)所述數(shù)據(jù)展示模塊設(shè)定為一級(jí)網(wǎng)格元素，并將每個(gè)所述一級(jí)網(wǎng)格元素設(shè)定為二級(jí)網(wǎng)格容器，將每個(gè)所述數(shù)據(jù)展示模塊的下一級(jí)元素設(shè)定為二級(jí)網(wǎng)格元素；

根據(jù)所述響應(yīng)式數(shù)據(jù)展示頁(yè)面的尺寸，為每個(gè)所述數(shù)據(jù)展示模塊分配其在所述響應(yīng)式數(shù)據(jù)展示頁(yè)面上的位置及尺寸，根據(jù)每個(gè)所述數(shù)據(jù)展示模塊分配得到的位置及尺寸，調(diào)整其下一級(jí)元素的位置及尺寸，以對(duì)多個(gè)所述數(shù)據(jù)展示板塊及其下一級(jí)元素進(jìn)行排版。

5.如權(quán)利要求3所述的構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于，所述采用基于網(wǎng)格(CSS Grid)的二維布局技術(shù)，在所述響應(yīng)式數(shù)據(jù)展示頁(yè)面上對(duì)所述多個(gè)數(shù)據(jù)展示板塊進(jìn)行排版，包括：

將構(gòu)成所述數(shù)據(jù)展示板塊的元素按照層級(jí)結(jié)構(gòu)進(jìn)行劃分；

采用基于網(wǎng)格的二維布局技術(shù)，將所述元素按照自上而下的層級(jí)順序設(shè)定為多個(gè)網(wǎng)格容器層，每個(gè)網(wǎng)格容器層包括一個(gè)或多個(gè)網(wǎng)格容器，并設(shè)定每個(gè)網(wǎng)格容器對(duì)應(yīng)的網(wǎng)格元素，上一層的網(wǎng)格元素即為下一層的網(wǎng)格容器；

根據(jù)所述響應(yīng)式數(shù)據(jù)展示頁(yè)面的尺寸按照自上而下的層級(jí)順序?yàn)槊總€(gè)網(wǎng)格容器層中的網(wǎng)格容器分配位置及尺寸，根據(jù)每個(gè)網(wǎng)格容器分配得到的位置及尺寸，調(diào)整與所述網(wǎng)格容器對(duì)應(yīng)的網(wǎng)格元素的位置及尺寸，形成層層嵌套的單向尺寸約束，以對(duì)所述多個(gè)數(shù)據(jù)展示板塊進(jìn)行排版。

6.如權(quán)利要求1或權(quán)利要求3所述的構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于，所述方法還包括：

采用PostCSS技術(shù)轉(zhuǎn)換層疊樣式表(CSS)的度量單位，將像素轉(zhuǎn)換為響應(yīng)式度量單位。

7.如權(quán)利要求6所述的構(gòu)建響應(yīng)式數(shù)據(jù)展示頁(yè)面的方法，其特征在于：

所述響應(yīng)式度量單位為根元素字寬(rem)。