Material Design 中的響應(yīng)式布局可以適配任何尺寸的屏幕。這個 UI 指南包括：用于確保布局一致性的彈性網(wǎng)格，在不同的屏幕上內(nèi)容的斷點細節(jié)，以及應(yīng)用從小屏幕到大屏幕如何縮放的說明。
斷點
為了獲得最佳用戶體驗，Material Design 應(yīng)該為以下斷點適配布局：480、600、840、960、1280、1440、以及 1600dp。
- 布局中的摘要和詳細信息視圖
- 布局寬度小于 600dp 時，可以使用單級的內(nèi)容層次（可以是摘要或詳細信息，但兩者不能同時顯示）填滿屏幕。
- 布局寬度超過 600dp 時，可以同時放置兩級內(nèi)容層次（可以同時顯示摘要和詳細信息）。
- 最大屏幕寬度
布局寬度超過 1600dp 時，可以讓布局寬度一直增加，直到達到最大寬度。此時，網(wǎng)格可以執(zhí)行以下的某一項：
- 變成居中對齊，在內(nèi)容區(qū)域兩側(cè)增加外邊距
- 保持左對齊，同時不斷增加內(nèi)容右側(cè)外邊距
- 內(nèi)容寬度繼續(xù)增加，同時展示出更多額外的內(nèi)容
斷點系統(tǒng)
不同屏幕、設(shè)備和方向下，列和寬度的規(guī)范
界面行為
當屏幕大小改變時，UI 會使用下列特定的行為來適配屏幕。
可見性
寬度
模式
出現(xiàn)
- 在小屏幕中隱藏的 UI元素，隨著屏幕可用空間的增加，可能會出現(xiàn)；
- 側(cè)邊欄這樣的元素可能會變得可見；
- 一個簡單的 UI 可能會出現(xiàn)更多強大或復(fù)雜的選項；
- 在小屏幕上，只有點擊某個元素才會出現(xiàn)的內(nèi)容，當屏幕上有更多可用空間時，可能會默認顯示。
變形
-一個 UI 元素可以從一種格式變形成另一種格式；
-側(cè)邊欄導(dǎo)航可能變形成 Tab 選項卡；
-列表可能變形成網(wǎng)格列表；
-菜單可能變形成工具欄中的圖標。
重排
-UI 可以重排到可用空間中;
-來自單列格式的元素可以重新排列成多種組合來填滿內(nèi)容區(qū);
-水平 Tab 選項卡可以重排成垂直列表;
-元素可以基于新屏幕的比例或設(shè)備方向在組件內(nèi)部重排。
擴展
-UI 可能擴展成更大的區(qū)域；
-內(nèi)容卡片可以擴展來填充新的空間；
-對話框可以根據(jù)內(nèi)容或特定的增量按比例擴展。
位移
-UI 組件可能會移動到更合適的位置；
-小屏幕上的底部卡片可能會作為菜單重新定位；
-浮動操作按鈕（FAB）可以移動到相對其他元素更顯眼的位置。
本文摘選于：
https://www.mdui.org/design/layout/responsive-ui.html
