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。)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容