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