（作者）：響應式 UI能(neng)夠使我們設計(ji)的元素(su)在任何大(da)小屏幕尺寸(cun)能(neng)夠靈活適配，保證布局和體(ti)驗的一致性(xing)。

毫(hao)無疑問，響(xiang)應 UI 設計對于(yu)現(xian)今碎片化的屏幕(mu)是(shi)非常(chang)重(zhong)要的，它(ta)能(neng)使我們(men)在最小(xiao)的資源的情況下(xia)完成設計適(shi)配，它(ta)的工作原理通(tong)過斷點(dian)(dian)系統來判斷讀取布局方式(shi)，斷點(dian)(dian)其(qi)實就(jiu)是(shi)媒(mei)體(ti)查詢值。

 比如我們平時做的(de) Phone 和 Pad 的(de)適配就(jiu)是通過設定斷點來讓程(cheng)序讀取對(dui)應的(de)布(bu)局(ju)（斷點設定可以根據屏幕(mu)分辨率(lv)或者屏幕(mu)尺寸），今天就(jiu)和大家聊聊一些常用的(de)響應式(shi) UI 模式(shi)

常用的(de)布局模式(shi)

• 流線(xian)布局

• 等比縮放

• 拓展布局

• 分欄布局

• 流動布(bu)局(ju)

• 重復(fu)布局

• 固定布局

流(liu)線布局

流線布局(ju) 指在(zai)界面中的內容元素控件在(zai)屏(ping)幕顯(xian)示區域內進(jin)行相(xiang)對拉(la)伸，以達到布局(ju)完整的目的，比如 Pad&Phone 橫豎屏(ping)切換。

下面截圖的(de) 3 個(ge)產品都是(shi)屬于(yu)流線布局(ju)，這(zhe)種布局(ju)一般開發比較簡單，成本低，下面青芒閱(yue)讀的(de)布局(ju)相對不(bu)錯，在 PAD 豎屏左右邊(bian)距留(liu)白是(shi)單獨設定(ding)規則的(de)，橫屏情(qing)況下面左右各空出 2 個(ge)網格（界面分為 12 網格），這(zhe)樣橫屏內容顯示不(bu)會過長。

等比(bi)縮放(fang)

定義是指在(zai)(zai)界(jie)(jie)面中元素在(zai)(zai)相對位置進(jin)行等(deng)比縮放(fang)，從(cong)而達到解決橫豎屏顯示(shi)相對較好的(de)UI界(jie)(jie)面,這種布局不會對界(jie)(jie)面造成布局重構影響，開發成本低，適(shi)配簡單，一般使用于音樂、視頻、電商、雜志期刊App等(deng)領域帶有圖片宮(gong)格(ge)布局，界(jie)(jie)面等(deng)比放(fang)大(da)(da)后這種大(da)(da)圖顯示(shi)效(xiao)果比較有視覺沖擊(ji)力(li)前提(ti)是需要足夠(gou)高清的(de)資源支(zhi)撐。