在 Material Design 中响应式布局可以适应任何尺寸的屏幕。这个 UI 指南包括一个灵活的栅格系统，它可以在跨平台的同时让布局保持一致性，breakpoint（断点） 的细节是在与内容如何在不同屏幕尺寸上来回流动，以及一个应用程序如何从小到大的屏幕进行扩展的描述。

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.

断点

Breakpoints

为了获得最佳的用户体验，Material Design 的用户界面应该针对以下断点宽度调整布局：480, 600, 840, 960, 1280, 1440 和 1600dp。

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

1.布局中的摘要和详细信息的视图内容

• 宽度低于600dp的布局可以使用单级内容层次结构（摘要或详细内容，但不能同时出现在一级）填充屏幕。
• 宽度超过600dp的布局可以在屏幕上显示两个级别的内容层次结构（包括摘要和详细内容）。

• 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).

2. 最大屏幕宽

宽度超过 1600dp 宽度的布局可以让布局一直增长到符合它的最大宽度。此时，栅格系统可以执行以下内容：

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

断点系统

Breakpoint system

这些 breakpoint（断点）描述了不同屏幕，设备和排列方向的宽度规格。

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.

1. 当设备的最小宽度小于 600dp 时 gutter（间隙）使用 16dp
2. 以下表格列出的桌面设备 breakpoint（断点）为16dp，是为了适用 chrome 浏览器

1. 16dp when the smallest width of the device is <600

2. Desktop breakpoints are 16dp below the listed values to accommodate variations in browser chrome.

Grid

Material design 的响应式 UI 的布局是基于 12-column（12栏）栅格。这种栅格在不同尺寸下的布局能够保持视觉的一致性，同时也可以在设计中增加灵活性。栅格的数量是基于 breakpoint（断点）系统实现的。

Material design’s responsive UI is based on a 12-column grid layout. This grid creates visual consistency between layouts, while allowing flexibility across a wide variety of designs. The number of grid columns varies based on the breakpoint system.

此动画显示 surface（表面）和panel（面板）如何对齐来影响12-column（12栏）栅格系统。

This animation shows how surfaces and panels can align to influence the 12-column grid.

Margins and Gutters

响应式栅格相较于 column （列）宽 更注重于一致的 margin （边距）和 gutter （沟槽）宽度。 Material Design 的 margin 和 column 遵循边长为 8dp 的正方形基线网格。Margin 和 gutter 可以为 8，16，24或者40。

The responsive grid focuses on consistent margin and gutter widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Margins and gutters can be 8, 16, 24, or 40dp wide.

Margin 和 gutter 不需要相等。例如，可以在同一部剧中使用 40dp 的margin 和 24dp 的 gutter。

Margins and gutters don’t need to be equal. For example, it’s acceptable to use 40dp margins and 24dp gutters in the same layout.

以下动画显示出 margin 和 gutter 宽度变化的相互影响：

This animation shows interactions of the following margin and gutter width variations:

• 8dp margins and gutters
• 16dp margins and gutters
• 24dp margins and gutters
• 40dp margins and gutters
• 40dp margins and 24dp gutters

Full-width vs Centered

Full-width（整宽） ：栅格使用流动的 column 和 breakpoint 来确定布局何时需要更改。

Full-width grids use fluid columns and breakpoints to determine when a layout needs to change.

Centered grides（居中栅格）：当所有 column（加上设置的 margin）不再适合屏幕时，则使用固定列和回流布局。

Centered grids use fixed columns and reflow the layout when all columns (plus a defined margin) no longer fit on screen.

• Full-width grids
• Centered grids

Panel Influence on the Grid

如在 Navigation patterns （导航模式） 中说明的一样，side nav（侧边导航）可以常驻或暂时性的。这些原则是应用于任何的 panel（面板），不仅仅适用于 side nav。

As defined in Navigation patterns, the side nav may be permanent, persistent, or temporary. These behaviors apply to any panel, not just a side nav.

常驻

Permanent

常驻的 panel（面板）是存在于 responsive grid（响应式栅格）之外的。面板是从定义的 breakpoint （断点）处出现（当屏幕可容纳面板时可挤压内容）。 并且没有控件可以控制 panel 显示或隐藏。

A permanent panel exists outside of the responsive grid. The panel appears at a defined breakpoint (when the screen can accommodate the panel) and squeezes content. There are no controls to show/hide the panel.

常驻 panel 对 responsive grid（响应式栅格）的影响

The effects of a permanent panel on the responsive grid

Side panel （侧边面板）对 grid（栅格）的作用

Side panel effects on the grid

此动画分为两个情况：

• 出现一个持久的 side panel（侧面板），挤压内容和栅格。 在面板保持可见的同时可以访问内容。 点击 panel 控件后恢复。
• 出现一个临时 side panel，将网格内容推出屏幕。 触摸 panel 外部或面板内的项目会隐藏面板。

This animation happens in two phases:

• A persistent side panel appears, squeezing both content and the grid. Content is accessible while the panel remains visible. The panel hides upon toggling.

• A temporary side panel appears, pushing grid content off-screen. Touching either outside the panel, or an item inside the panel, hides the panel.

持续面板对响应栅格的影响

The effects of a persistent panel on the responsive grid

临时叠加层

Temporary overlay

临时 panel（面板）在屏幕外不会影响 grid（栅格）或内容。 当切换为可见时，可以通过触摸面板之外的任何位置或面板中的项目再次隐藏。

A temporary panel does not affect the grid or content when off-screen. When toggled to be visible, it can be hidden again by touching anywhere outside the panel or an item inside the panel.

临时 panel（面板）对 responsive grid（响应式栅格）的影响

The effects of a temporary panel on the responsive grid

表面行为

Surface behaviors

当屏幕大小改变时，UI 使用以下 surface-specific（表面特定）行为来适应。

When a screen size changes, the UI adapts using the following surface-specific behaviors.

可见度

Visibility

Width

Descriptors

模式

Patterns

随着屏幕空间增加，可以使用以下响应模式：

As screen space increases, the following responsive patterns may be applied:

• Reveal
• Transform
• Divide
• Reflow
• Expand
• Position

显示

Reveal

较小屏幕下隐藏的 UI 可能会随着可用空间的增加而 Reveal（显示）出现。

UI hidden by smaller screens may be revealed with increased available space.

元素，类似 side nav（侧边导航栏）随着屏幕尺寸增大变为可见

Elements, such as a side nav, may become visible.

一个简单的 UI 可能会显示出更强大或复杂的选项。

A simple UI may reveal more powerful or complex options.

在较小屏幕上的内容只有在点击元素后才会出现，默认情况下会显示更多空间。

Content on a small screen that only appears after tapping an element may be revealed by default when more space is available.

变形

Transform

UI 元素可以从一种格式变换到另一种格式。

A UI element may transform from one format to another.

侧边导航栏可以转换变成标签

Side navigation may transform into tabs.

一个列表可以转换变成栅格列表

A list may transform into a grid list.

menu（菜单）的工具可以转换变成 icon

Menu items may transform into icons in a toolbar.

划分

Divide

分层的 UI 可以划分为新的可用空间。

A layered UI may be divided into newly available space.

Side navigation，列表内容和详细内容从新划分以填充单个视图

Side navigation, list content, and detailed content divide to fill a single view.

随着空间的增加，left panel，列表内容和右面板在单个视图中进行新划分。

A left panel, list content, and a right panel divide within a single view as space increases.

标签的同级内容划分在同一视图中。

Tabbed sibling content is divided within the same view.

回流

Reflow

UI 可以回流到可用空间。

A UI may reflow into available space.

单列格式的元素可以回流以各种组合填充内容区域。

Elements from a single-column format may reflow to fill the content area in various combinations.

水平标签栏可以回流到垂直列表中。

Horizontal tabs may reflow into a vertical list.

元素可以基于新的屏幕比率或设备取向在组件内回流。

Elements may reflow within a component based on a new screen ratio or device orientation.

扩展

Expand

UI 可能会扩展到更多的空间。

The UI may expand across more space.

Content card（内容卡）可能会扩展以填充新空间。

Content cards may expand to fill the new space.

对话框可能会与内容或特定增量成比例地扩展。

Dialogs may expand proportionally with content or in specific increments.

位置

Position

UI 组件的位置可以改变到更合适的位置。

The position of UI components may change to more appropriate locations.

小屏幕上的底部薄片可能会重新定位为菜单。

A bottom sheet on a small screen may reposition itself as a menu.

浮动操作按钮（FAB）可能移动到相对于其它 UI 元素更显眼的位置。

A floating action button (FAB) may move to a more visible location relative to other UI elements.