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指南包括了三方面，保证布局一致的固定网格，在不同的屏幕上保证内容重排的临界点，以及一款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以下宽度只能填充单列内容层级（概要和详情二选一）

600dp以上宽度可以放置两列内容层级（概要或详情皆可）

下面是对比图

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宽度可以让布局一直增长至最大宽度。网格可以采取以下操作

• 居中对齐，边距增加。

• 左对齐，右边距增加。

• 保持增长，让额外的内容重现。

• Breakpoint system

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

临界点描述了不同屏幕，设备和方向上的分栏和宽度规格。

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.

在有些情况下，设备旋转了，值还是保持一致，因为即使旋转了，规定值还是最小值。

* 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。）