Material Design 是一种现代的设计语言，旨在提供更具可预测性、更具层次感和更具意义的用户体验。在 Material Design 中，实现响应式布局是非常重要的，它能让设计更加灵活和兼容不同尺寸和分辨率的设备。
设计原则
Material Design 着重强调 Material 元素的触摸、移动和交互性，因此，在进行响应式布局时，设计原则应该如下：
- 思考层次结构。在设计中要有视觉决策来区分不同的层次结构，并体现出重要的元素
- 适当选择颜色。Material Design 推崇简洁的颜色设计，对于每个组件或元素都有主要和副要素或状态，颜色要体现出不同的功能或重要性
- 考虑不同的设备。响应式布局要考虑不同屏幕尺寸和分辨率的适配
实现响应式布局
实现响应式布局需要考虑以下几个方面：
1. 使用 Flexbox
Flexbox 是一种 CSS 布局方式，它可以方便地使子项对容器中的空间进行分配。在 Material Design 中，大多数布局都是通过 Flexbox 实现，特别是在屏幕上缩放时，Flexbox 布局非常适合处理响应式设计。
示例代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
---------------- --------------
------------ -----------
-
----- -
----- - - ---------- - ------
------- ----
-
------ ---- ------ --- ----------- ------ -
----- -
----- - - -------- - ------
-
-在上面的代码中，.container 布局行方向为 flex-wrap，justify-content 为 space-between，align-items 为 flex-start；.item 定义 flex-grow、flex-shrink 和 flex-basis 属性，表示元素在主轴上的分配比例、缩小比例和基础尺寸。@media 媒体查询针对不同设备尺寸进行调整。
2. 使用栅格系统
栅格系统是响应式布局中的另一种实现方式，它将页面分成了若干行和列，并使用相对比例来定义布局，很好地适应了不同屏幕大小的设备。
示例代码：
<div class="container">
<div class="row">
<div class="col-4 col-md-3 col-lg-2">...</div>
<div class="col-4 col-md-3 col-lg-2">...</div>
...
</div>
...
</div>在上面的代码中，.container 是容器，.row 是一行数据，.col-* 表示列的大小和响应式变化，例如，.col-4 表示占用父元素 4 份，.col-md-3 表示在中等设备的屏幕中展示 3 份。
3. 适当使用媒体查询
媒体查询是一种可在 CSS 中使用的技术，可以针对不同屏幕大小、不同设备类型以及不同设备方向应用不同的 CSS 样式。
示例代码：
-- -------------------- ---- -------
------ ---- ------ --- ----------- ------ -
---------- -
------ ----
------- - -----
-
-
------ ---- ------ --- ----------- ------- -
---------- -
------ ----
------- - -----
-
-在上面的代码中，.container 在不同屏幕大小下都有不同的宽度和居中效果。
总结
Material Design 的设计原则提供了响应式布局的思路，要在不同屏幕和设备上获得最佳体验，应使用合适的 CSS 技术和框架（如 Flexbox 和栅格系统），并适当使用媒体查询。
参考代码：
https://codepen.io/collection/nGgZep/
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651b8c7195b1f8cacd33264d