Material Design基础 - 响应式布局网格

1. 响应式布局网格

Material Design的响应式布局网格可根据屏幕大小和方向进行调整,确保布局的一致性。

1.1. Columns, gutters, and margins

响应式布局网格由三个元素组成:Columns, gutters, 和 margins。

1.2. Columns

内容放置在屏幕上包含列的区域。

在响应式布局中,列宽是用百分比定义的,而不是固定值。这允许内容适应任何屏幕大小。网格中显示的列数由 分界点范围决定, 分界点范围是一个预先确定的屏幕大小范围。 分界点可以与手机、平板电脑或其他屏幕类型相对应。

1.3. gutters

gutters是帮助分隔内容的列之间的空间。
gutters宽度是根据 分界点范围的变化的固定值。为了更好地适应给定的屏幕大小,gutters宽度可以在不同的屏幕宽度范围改变。
较宽的gutter更适合更大的屏幕,因为它们在column之间创造了更多的开放空间。

1.4. Margins

Margins是内容与屏幕左右边缘之间的空间。
在每个 分界点范围使用固定值或缩放值定义边距宽度。为了更好地适应屏幕,边距宽度可以在不同的 分界点处改变。更宽的边距更适合更大的屏幕,因为它们会在内容周围产生更多的空白。

1.5. Grid customization

布局网格可以调整,以满足产品和多种设备尺寸的需要。

1.6. Customizing gutters

可以调整gutters,以在布局的column之间创建更多或更少的空间。

1.7. Horizontal grids

可以为水平滚动的触摸屏用户界面定制材质设计布局网格。柱、水槽和边距是从左到右而不是从上到下布置的。屏幕的高度决定了水平网格中的列数。
在非触摸和web平台上,水平滚动的UI并不常见。

水平网格的位置可以适应不同的高度,在顶部为应用程序栏或其他UI区域留出空间。

1.8. 分界点

分界点是由特定布局要求确定的屏幕大小阈值。在给定的分界点范围内,布局会根据屏幕大小和方向进行调整。
material设计提供了基于4列、8列和12列网格的响应性布局,可用于不同的屏幕、设备和方向。
每个分界点范围确定列数,以及每个显示大小的建议边距和gutters。

1.9. 分界点系统

响应式布局网格主要用于组织布局Body区域中的内容和组件。Understanding layout中详细介绍了布局区域。根据不同的屏幕大小或方向缩放布局时,响应网格会调整边距和主体宽度以及布局中的列数。

Screen sizeMarginBodyLayout columns
Extra-small (phone)
0-599dp16dpScaling4
Small (tablet)
600-90432dpScaling8
905-1239Scaling840dp12
Medium (laptop)
1240-1439200dpScaling12
Large (desktop)
1440+Scaling104012

在Extra-small breakpoint中,边距的基线值为16dp。身体对尺寸的增加仍有反应。当到达下一个更大的断点(600dp宽)时,glutter增加到32dp。
当机身宽度达到840dp时,边缘变得灵活,最大边缘宽度增加到200dp。达到最大宽度后,body区域再次变得灵敏,继续水平缩放。在较大的断点处,body区域可以保持最大宽度,而边距可以再次水平缩放。

2. Material Design 系列文章

最新更新以及更多Material Design相关文章请访问 鹏叔的技术博客-Material Design

3. 参考文档

Material System - responsive layout grid

Material Design基础 - 响应式布局网格

https://pengtech.net/material/Responsive_layout_grid.html

作者

鹏叔

发布于

2022-04-30

更新于

2024-07-10

许可协议

评论