Material Design 是 Google 设计团队推出的一套统一的设计语言，旨在提升用户体验和用户界面的美感。响应式 Web 设计则是一种灵活的设计方法，可以让网站在不同设备上自适应，同时提供一致性和可用性。
这篇文章将介绍制作 Material Design 响应式卡片的技巧。我们将讨论如何使用 HTML，CSS 和 JavaScript 来创建卡片，并且使其在不同的设备上呈现出 Material Design 的美感。
1. 准备工作
在开始创建卡片之前，我们需要配置一个基础的 HTML 文件，并引入必要的库和组件。我们这里将使用 MaterializeCSS，它是一个基于 Material Design 设计语言的响应式前端框架，并提供了一些常用的 UI 组件。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -------------------
--------------- ------ ------------
---- -- -------------- --- -- ---
----- --------------------------------------------------------------------------------------- -----------------
---- -- -------------- ---------- -- ---
------- ----------------------------------------------------------------------------------------------
-------
------
---- ---- ---
---- ------------
---- ---- ---
---- ---------- --- -- ----
---- -------------
---- -------------------
---- ----------------------------------------- -----------
----- ------------------------------
------
---- ---------------------
-----------
------
---- --------------------
-- -----------------
------
------
------
------
-------
-------2. 创建卡片
我们现在要创建一个 Material Design 风格的卡片。首先，在 HTML 文件中创建一个卡片容器 div 元素，并在其中嵌套一个 col 元素。col 元素是 MaterializeCSS 中的列，用于布局和响应式设计。
<div class="row">
<div class="col s12 m6 l4">
<!-- 卡片内容 -->
</div>
</div>在 col 元素内，我们将使用 card 类创建一个卡片，并在其中添加图像、标题和文本内容。
-- -------------------- ---- -------
---- -------------
---- -------------------
---- ----------------------------------------- -----------
----- ------------------------------
------
---- ---------------------
-----------
------
------我们还可以添加一个 card-action 类元素，用于定义卡片上的操作按钮。
-- -------------------- ---- -------
---- -------------
---- -------------------
---- ----------------------------------------- -----------
----- ------------------------------
------
---- ---------------------
-----------
------
---- --------------------
-- -----------------
------
------3. 实现响应式设计
现在，我们已经创建了一个基本的 Material Design 卡片。但是，如果我们只是将其放置在不同的设备上，它就无法很好地响应式设计。
为了实现响应式设计，我们可以使用 MaterializeCSS 中的栅格系统来设置不同屏幕大小下的布局。我们在 col 元素中添加 s12、m6 和 l4 类来定义该元素在不同屏幕大小下所占据的列数。这将使该元素在不同屏幕下呈现不同的大小和布局。
<div class="row">
<div class="col s12 m6 l4">
<!-- 卡片内容 -->
</div>
</div>在我们的卡片内容中，图像也可以通过 class 定义大小。
<div class="card-image">
<img class="responsive-img" src="https://via.placeholder.com/350x200" alt="卡片图片">
<span class="card-title">卡片标题</span>
</div>我们可以在 CSS 文件中添加以下样式，以使卡片容器和卡片内容响应式。
-- -------------------- ---- -------
---- -
------- --
-
----- -
------- ---- --
-
----------- -
--------- ---------
--------- -------
-
----------- --- -
------ -----
------- -----
------- --
------- ---------------
----------- --- ---- ------------
-
----------- ----------- --- -
------- --------------
---------- -----------
-
----------- -
--------- ---------
------- --
----- --
------ --
-------- ------
------ -----
----------------- ------- -- -- -----
---------- ------
----------- -------
--------------- ----------
--------------- ----
-以上样式可以实现以下效果：
- 调整行和卡片的边距；
- 用灰色滤镜覆盖图像；
- 当鼠标悬停在卡片上时，去除灰色滤镜并将图像放大；
- 添加标题，并在其下面放置半透明黑色背景。
4. 总结
我们已经学习了如何使用 MaterializeCSS 和栅格系统来创建 Material Design 风格的可响应式卡片，并讨论了如何实现响应式设计。当然，这只是一部分技术，还有其他的方式可以制作 Material Design 卡片。
你可以在这里查看完整的示例代码。希望这篇文章对你有所帮助，并帮助你更好地理解制作响应式卡片的技巧和实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e809b48841e9894cdd3c6