“你開發的界面為啥在我的螢幕裡這麼小啊？”
“這個界面為啥在我這裡會出現橫向滾動條啊？”
大家在進行前端界面開發時，有沒有遇到這些類似的問題呢？又是如何解決的呢？
頁面響應式
在進行項目傳遞的場景中，常常會存在項目系統在不同裝置，不同螢幕尺寸下使用和展示。是以在開發過程中需要針對此場景做針對性處理。一般來說，在處理這樣的問題時，我們需要開發和提供不同的布局，通過檢測視口的分辨率，判斷目前通路裝置的種類，請求不同的頁面布局進而提供尺寸較為合适的展示場景。而不同的布局，可以選擇提前開發完成，或者采用判斷視窗大小的方式動态地調整最終頁面來實作效果，業内稱之為頁面的響應式布局。
（不同尺寸下的響應式頁面布局）
那麼，在低代碼領域，對于提前設計好的頁面元素，是如何實作頁面的響應式變化呢？讓我們來看一看低代碼開發平台活字格是如何實踐的！
活字格的實踐
對于頁面的響應式能力，活字格一直在持續的增強。在版本的早期，活字格提供了頁面拉伸的模式幫助使用者将頁面布局更好的适應螢幕的尺寸。而在後續的疊代中，活字格加入了粒度精确到行列的模式設定，通過對行列性質的修改，保證頁面可以動态且精确的填充至整個展示螢幕中。
頁面拉伸模式
在活字格中，可對全局或單個頁面設定頁面拉伸模式。單個頁面設定隻在本頁面生效，而全局的生效範圍擴充到了整個應用。活字格為使用者提供了五種拉伸模式，友善使用者在不同的場景下進行選擇：
● 無拉伸：頁面在浏覽器中不會進行拉伸，與設計原型保持一緻。
● 水準拉伸：頁面在不同浏覽器中随着浏覽器尺寸進行水準方向上的拉伸。
● 垂直拉伸：頁面在不同浏覽器中随着浏覽器尺寸進行垂直方向上的拉伸。
● 雙向拉伸：頁面在不同浏覽器中随着浏覽器尺寸進行水準和垂直方向上的拉伸，使得在充滿不同分辨率的浏覽器時都具有較好的視覺效果。
● 等比拉伸（填滿寬度）：頁面将填滿浏覽器的寬度，再等比對高度進行拉伸。
頁面拉伸的特性優點在于設定簡單，易用；同時也會有些弊端，由于頁面拉伸是頁面整體元素進行拉伸，那麼如果想要實作部分固定部分拉伸的效果就很困難，是以，這個特性在對頁面精度強需求的場景就不是很合适了。活字格針對這樣的場景，提供了行列模式設定。
行列模式設定
行列模式為活字格的布局設計注入了全新的活力與可能。在了解行列模式之前，我們需要對一個布局有個直接的了解，這就是活字格所采用的網格（Grid）布局。
網格（Grid）布局
網格布局（Grid）是CSS（層疊樣式表，為網頁添加頁面樣式的一種計算機語言）布局方案的一種，也是泛用性最廣泛的一種。其原理是将網頁劃分成一個個網格，通過任意組合不同的網格，做出各種各樣的布局。
（Grid布局示意圖）
由于網格屬于标準的二維布局，是以網格布局将頁面劃分為“行”與“列”，産生單元格，對單元格的設定與組合，最終形成頁面最終的效果。活字格的設計器是類excel風格，是以天生就是一個适應Grid布局的高手。活字格為使用者提供了3種設定模式，分别是固定模式、自适應模式和範圍模式，通過設定行高、列寬的調節模式為自适應模式或範圍模式，可使頁面呈現流式布局，使頁面的布局更加靈活。
固定模式
固定模式下，行高、列寬為固定的大小，機關為像素，不會随着展示螢幕的變化而變化，如果頁面所有被設定了固定模式的行列總像素已經大于了浏覽器的寬度/高度，那浏覽器中就會出現橫向/縱向滾動條。
自适應模式
在活字格中，自适應代表的不是頁面自适應，而是元件的自适應。活字格的頁面設計是所見即所得的，每一個元件都是通過單元格的組合而形成。當對某個元件設定了自适應之後，元件會根據内部的内容動态的變化自己的高度或寬度，比如文本框，會根據輸入的文字内容來動态調節自己的框體大小，附件單元格會按照資料的多少來擴充高度。
範圍模式
範圍模式的主要作用是充滿整個浏覽器螢幕，也是想要實作流式布局最為推薦的做法。
在活字格中，範圍模式提供了按照像素與占比兩種方式來設定範圍。
（活字格的範圍模式設定界面）
上圖中的最大值占比，代表的是當且設定的列，在整個頁面占據的比例為1份，也就是說，如果整個頁面，隻有目前列被設定了占比為1，那麼隻有這一列會填充整個頁面。而如果頁面中有兩列都設定了占比為1，這兩列在整個頁面中會按照各自占據1/2的範圍來填充，如果有一列設定了1份，另一列設定了2份，那麼最終的填充效果為設定為1的列占據了1/3，而另外一列占據2/3。
（行列自動擴充）
活字格的每個行列，都可以設定以上3種模式，而占用多行區域的單元格，設定一行或者一列時，這個容器區域内部會自動擴充。比如：表格、圖文清單、資料透視表、頁面容器單元格、标簽頁、頁籤等。
（多行區域的單元格範圍設定）
通過設定範圍模式達到内容自動填充頁面的效果：
（尺寸變化展示）
總結
通過對頁面拉伸和行列設定靈活運用，活字格所涉及的應用可以靈活的适應不同尺寸下的展示終端，此外，活字格還提供了移動端的界面，友善使用者在移動端下，設計出更為美觀靈活的界面。