相比于PC端,DataV的移動端可視化界面有許多新功能,例如,可滾動的流式布局、按比例響應式的內容縮放、組件和數據的懶加載功能等。本文為您介紹移動端編輯器的元素概念和單位說明,有助于您后續了解使用移動端編輯器。
概念定義
移動端編輯器中有三個元素概念需要區分,分別為容器、格子和組件。
元素概念 | 說明 |
容器 | 容器是用于組織移動端內容,控制流式畫布中內容布局的元素,目前移動端畫布編輯中提供的容器有以下三種。(從左至右分別為:普通容器、多列容器、多行容器)
|
格子 | 格子區域用于支持拖入組件或者容器,如下圖容器內部的灰色及藍色實線框所示。 |
組件 | 可視化應用中內容的載體,與DataV的PC端畫布編輯器的組件一樣,是可視化應用用于進行視覺傳達的元素。 |
單位說明
在移動端編輯器中將使用到兩種單位:vw和%。
單位 | 說明 |
vw | vw表示當前容器寬高相對于當前頁面寬度的大小。例如,設置60的高度表示容器真實高度是頁面寬度的60%,您在寬度像素為375px的手機上會渲染出225px高度的內容。該單位主要用于定義最外層容器的高度、容器和格子的內外邊距等。 |
% | %表示當前寬高相對于父元素的大小。例如,某格子的布局占比為40%,則意味著它占父容器的寬或者高的40%,具體是寬度還是高度,取決于父容器的類型。該單位主要用于格子布局占比的程度。 |
文檔內容是否對您有幫助?