Material Design 之响应式栅格布局

Sponsor

Material Design 响应式布局栅格适应屏幕尺寸和方向，确保布局的一致性。

列、间距和边距

Material Design 布局栅格由三个元素组成：列、间距和边距。

列

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

列宽是使用百分比而不是固定值来定义的，以允许内容灵活地适应任何屏幕大小。网格中显示的列数由查看屏幕的断点范围（预定屏幕大小的范围）确定，无论是移动设备，平板电脑还是其他尺寸的断点。

间距

间距是列之间的空间，它们有助于分离内容。

间距在每个断点范围内的值是固定的。为了更好地适应屏幕，间距宽度可以在不同的断点处改变。更宽的间距更适合大屏幕，因为它们在列之间创建了更多的空白。

边距

边距是内容和屏幕左右边缘之间的空间。

边距宽度定义为每个断点范围的固定值。为了更好地适应屏幕，边距宽度可以在不同的断点处改变。更宽的边距更适合更大的屏幕，因为它们在内容的周边创建了更多的空白。

自定义栅格

可以调整布局栅格以满足您的产品和各种设备尺寸的需求。

自定义间距

可以调整间距以在布局的列之间创建更多或更少的空间。

自定义栅格

可以调整页边距，以在内容和屏幕边缘之间创建或多或少的空间。页边距对每个断点使用固定值。

正文副本可读性的理想长度是每行40-60个字符。

间距和边距

在同一断点内，间距和边距宽度可以彼此不同。

水平栅格

Material Design布局栅格可以被水平滚动的触摸UI自定义。列、间距和边距从左到右排列，而不是从上到下排列。屏幕的高度决定水平栅格中的列数。

在非触控和web平台，水平滚动的UI并不常见。

可以定位水平栅格以适应不同的高度，从而为顶部的app栏或其他UI区域留出空间。

断点

断点是具有特定布局要求的预定屏幕大小的范围。在给定的断点范围内，布局将根据屏幕大小和方向进行调整。

Material Design基于以下列结构提供响应式布局。使用4列，8列和12列栅格的布局可用于不同的屏幕、设备和方向。

每个断点范围决定每个显示大小的列数、建议的边距和间距。

栅格特点

弹性栅格

弹性栅格使用可缩放和调整内容大小的列。弹性栅格的布局可以使用断点来确定布局是否需要显著更改。

固定栅格

固定栅格使用固定大小的列，具有流体边距，以在每个断点范围内保持内容不变。固定栅格的布局只能在指定的断点处更改。

UI（用户界面）区域

布局由多个UI区域组成，例如侧面导航，内容区域和应用栏。这些区域可以显示操作、内容或导航目标。UI区域应跨设备保持一致，同时适应不同屏幕尺寸的不同断点。

为了提高设备之间的熟悉度，为桌面设计的UI元素应该以与移动UI一致的方式进行组织。

永久UI区域

永久UI区域是可以在响应栅格之外显示的区域，如导航抽屉。这些地区不能重叠。

持久UI区域

持久性UI区域是可以随时根据命令显示的区域，或者它们可以保持可见。它们可以打开或关闭，出现或消失。当它们出现时，它们会压缩内容和栅格。

当持久性UI区域可见时，其可见性不受与屏幕上其他元素交互的影响。

临时UI区域

临时UI区域暂时出现，当它们出现时，它们不会影响响应式栅格。当它们可见时，可以通过点击其区域中的项目或其区域外的任何空间来隐藏它们。

当UI区域可见时，其他屏幕元素不是交互式的。

原型

原型是结构化布局，为布局、分层和阴影提供一致的方法。它们是一个起点，旨在在进行修改以满足产品的特定需求。

翻译：Clien
https://www.zcool.com.cn/article/ZOTExMzEy.html
原文地址：https://material.io/design/layout/responsive-layout-grid.html#columns-gutters-margins

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。