[發明專利]一種基于grid的移動端H5頁面網格布局方法

在審

• 申請號: 202011375117.X
• 申請日: 2020-11-30
• 公開（公告）號: CN112464122A
• 公開（公告）日: 2021-03-09
• 發明（設計）人: 代潤
• 申請（專利權）人: 北京首汽智行科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958
• 代理公司: 北京世譽鑫誠專利代理有限公司 11368
• 代理人: 李世端

本發明公開的基于grid的移動端H5頁面網格布局方法，涉及網頁布局領域，利用grid布局方法，將H5頁面中填充的內容劃分為多個格子，設置H5頁面的布局方式，根據H5頁面的對齊屬性，設置H5頁面的對齊方式，減少了代碼量，降低了冗余度。

技術領域

本發明涉及網頁布局領域，具體涉及一種基于grid的移動端H5 頁面網格布局方法。

背景技術

在編寫移動端H5頁面時，通常采用純css浮動或者flex布局的方式且只是橫向一維布局，對于移動端書寫的css樣式，增加了代碼量且冗余度較高。

發明內容

為解決現有技術的不足，本發明實施例提供了一種基于grid的移動端H5頁面網格布局方法，該方法包括以下步驟：

利用grid布局方法，將H5頁面中填充的內容劃分為多個格子；

設置H5頁面的布局方式；

根據H5頁面的對齊屬性，設置H5頁面的對齊方式。

優選地，利用grid布局方法，將H5頁面中填充的內容劃分為多個格子包括：

將H5頁面中根節點元素的顯示屬性display設置為gird。

優選地，設置H5頁面的布局方式包括：

將H5頁面的布局方式設置為橫/豎向。

優選地，根據H5頁面的對齊屬性，設置H5頁面的對齊方式包括：

通過對H5頁面中根節點元素的對齊屬性justify-items或justify-self賦予具體的參數，將H5頁面的對齊方式設置為行對齊方式。

優選地，根據H5頁面的對齊屬性，設置H5頁面的對齊方式包括：

通過對H5頁面中根節點元素的對齊屬性align-items或align-self 賦予具體的參數，將H5頁面的對齊方式設置為列對齊方式。

優選地，所述方法還包括：

通過對H5頁面中根節點元素的屬性grid-template-columns賦予具體的參數，設置H5頁面中網格的列數。

優選地，所述方法還包括：

通過對H5頁面中子節點元素的grid-row屬性賦予具體的參數，對子節點元素執行跨行操作。

優選地，所述方法還包括：

通過對H5頁面中子節點元素的grid-column屬性賦予具體的參數，對子節點元素執行跨列操作。

本發明實施例提供的基于grid的移動端H5頁面網格布局方法，具有以下有益效果：

(1)能夠對H5頁面進行二維布局，更方便、直觀；

(2)減少了代碼量，降低了冗余度。

附圖說明

圖1為本發明實施例提供的基于grid的移動端H5頁面網格布局方法流程示意圖；

圖2為本發明實施例提供的將H5頁面中填充的內容劃分的多個格子示意圖。

具體實施方式

以下結合具體實施例對本發明作具體的介紹。

本發明提供的實施例提供的基于grid的移動端H5頁面網格布局方法包括以下步驟：

S101，利用grid布局方法，將H5頁面中填充的內容劃分為多個格子。