Responsive UI - 响应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.

【翻译】
材料设计中的响应布局适应任何可能的屏幕尺寸。 这个UI指南包括一个灵活的网格，确保跨布局的一致性，断点细节关于内容如何在不同的屏幕上回流，以及一个应用程序如何从小到大的屏幕扩展的描述。

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.

【翻译】
为了获得最佳的用户体验，材料设计用户界面应该适应以下断点宽度的布局：480,600,840,960,1280,1440和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).
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

【翻译】
1.布局中的摘要和详细信息视图内容
600dp以下的布局可以用单级内容层次结构（总结或详细内容，但不是两者）填充屏幕。
超过600dp的布局可以在屏幕上放置两级内容层次（包括概要和细节内容）。
2.最大屏幕宽度
布局超过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
• Desktop breakpoints are 16dp below the listed values to accommodate variations in browser chrome.

【翻译】
这些断点描述了不同屏幕，设备和方向的列和宽度规格。
对于某些测量，即使设备旋转，值也保持不变。 因此，任一方向上的最小宽度是定义值。
16dp，当设备的最小宽度<600
桌面断点比所列值低16dp，以适应浏览器chrome的变化。

Grid - 网格

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.

【翻译】
材质设计的响应式UI是基于12列网格布局。这种网格在布局之间创建视觉一致性，同时允许在各种设计之间的灵活性。网格列的数量因断点系统而异。

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

【翻译】
此动画显示表面和面板如何对齐以影响12列网格。

Margins and Gutters - 边距与间隔
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.
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.

【翻译】
适应性栏栅指的是具有恒定的外边距和间隔宽度，而不是列宽度。 Material design 中的外边距和列符合某一 8 dp 的方形基线栏栅。外边距和间隔可以是 8,16,24 或 40 dp 宽。
外边距与间隔没必要相等。例如，在同一个布局中使用 40 dp 的外边距和 24 dp 的间隔是完全可取的。

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

【翻译】
这个动画显示了下面这些宽度的外边距和间隔的不同搭配：
8 dp 外边距和间隔
16 dp 外边距和间隔
24 dp 外边距和间隔
40 dp 外边距和间隔
40 dp 外边距和 24 dp 间隔

Full-width vs Centered - 完全宽度栏栅与居中栏栅对比
Full-width grids use fluid columns and breakpoints to determine when a layout needs to change.
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 - 面板对栏栅的影响
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 - 永久性
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.

【翻译】
一个永久的面板存在于自适应栏栅的外面。面板以一个固定的断点显示（当屏幕可以容纳面板）并且排布内容。不存在显示、隐藏面板的控制。

The effects of a permanent panel on the responsive grid

【翻译】
一个永久面板对于自适应栏栅的影响。

Side panel effects on the grid - 侧边面板对栏栅的影响
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 - 临时覆盖
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.

【翻译】
临时面板在不显示时，不会影响栏栅和内容。当被切换到可视时，可以通过点击面板之外的任何地方或者面板内的一个条目来隐藏面板。

The effects of a temporary panel on the responsive grid

【翻译】
临时面板对自适应栏栅的影响。

Surface behaviors - 表现行为

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

【翻译】
当屏幕尺寸变化时，UI 采用下面指定的表面行为来适应。

Visibility

【翻译】
可见性

Width

【翻译】
宽度

Descriptors

【翻译】
描述

Patterns - 模式

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

【翻译】
当更多的屏幕空间可用时，下面的模式可以被应用。

Reveal - 展现
UI hidden by smaller screens may be revealed with increased available space.

【翻译】
较小屏幕隐藏的UI可能会随着可用空间的增加而显示。

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

【翻译】
例如一个侧边导航元素可以变得可视。

A simple UI may reveal more powerful or complex options.

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

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

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

Transform - 转换
A UI element may transform from one format to another.

【翻译】
UI 可以从一种形式转换为另一种。

Side navigation may transform into tabs.

【翻译】
侧边导航可能会转换为标签。

A list may transform into a grid list.

【翻译】
列表可以转换为网格列表。

Menu items may transform into icons in a toolbar.

【翻译】
菜单项可以转换为工具栏中的图标。

Divide - 分隔
A layered UI may be divided into newly available space.

【翻译】
分隔之前被放置于新建空间的 UI。

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

【翻译】
侧边导航，列表内容和详细内容划分以填充单个视图。

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 - 重绘
A UI may reflow into available space.

【翻译】
在允许的空间中重绘 UI。

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 - 扩展
The UI may expand across more space.

【翻译】
增长 UI 以占据更多的空间。

Content cards may expand to fill the new space.

【翻译】
内容卡可以扩展以填充新空间。

Dialogs may expand proportionally with content or in specific increments.

【翻译】
对话框可以与内容或特定增量成比例地扩展。

Position - 位置
The position of UI components may change to more appropriate locations.

【翻译】
UI组件的位置可以改变到更合适的位置。

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

【翻译】
小屏幕上的底部薄片可能会将其自身重新定位为菜单。

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

【翻译】
浮动动作按钮（FAB）可以相对于其他UI元素移动到更可见的位置。