Responsive UI

Responsive layouts in material design adapt to any possible screen size. This UI guidance includes a flexible grid that ensures consistency across layouts, breakpoint details about how content reflows on different screens, and a description of how an app can scale from small to extra-large screens.

MD中的響應式布局適應任何屏幕尺寸。這份UI指南包括了三方面,保證布局一致的固定網(wǎng)格,在不同的屏幕上保證內(nèi)容重排的臨界點,以及一款APP從小屏幕放大至大屏幕的說明。

Breakpoints(臨界點)

For optimal user experience, material design user interfaces should adapt layouts for the following breakpoint widths: 480, 600, 840, 960, 1280, 1440, and 1600dp.

為了最佳的用戶體驗,MD用戶界面采用了以下寬度的臨界點來適應布局設計: 480, 600, 840, 960, 1280, 1440, and 1600dp。

1. Summary and detail view content in layouts(布局中的概要和詳情)

Layouts under 600dp wide may fill the screen with a single level of content hierarchy (either summary or detail content, but not both).

Layouts over 600dp wide may place two levels of content hierarchy on the screen (both summary and detail content).

600dp以下寬度只能填充單列內(nèi)容層級(概要和詳情二選一)

600dp以上寬度可以放置兩列內(nèi)容層級(概要或詳情皆可)

下面是對比圖

2. Max screen widths(最大屏幕尺寸)

Layouts over 1600dp wide may let the layout grow until it hits a max width. At this point, the grid may do one of the following:

? Become center aligned with increased margins

? Remain left aligned while the right margin grows

? Continue to grow while revealing additional content

超過1600dp寬度可以讓布局一直增長至最大寬度。網(wǎng)格可以采取以下操作

? 居中對齊,邊距增加。

? 左對齊,右邊距增加。

? 保持增長,讓額外的內(nèi)容重現(xiàn)。


? Breakpoint system

These breakpoints describe column and width specifications for different screens, devices, and orientations.

臨界點描述了不同屏幕,設備和方向上的分欄和寬度規(guī)格。

For some measurements, the values remain the same even if a device is rotated. For that reason the smallest width in either orientation is the defining value.

在有些情況下,設備旋轉(zhuǎn)了,值還是保持一致,因為即使旋轉(zhuǎn)了,規(guī)定值還是最小值。

* 16dp when the smallest width of the device is <600(設備最小寬度小于600dp時,采用16dp)

** Desktop breakpoints are 16dp below the listed values to accommodate variations in browser chrome.(? 為了適應chrome 瀏覽器的變更,桌面臨界點比列出值小16dp。)

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容