Material Design 是 Google 推出的一种设计语言，旨在为移动设备、桌面端和网络应用提供一致、美观、直观的用户体验。Material Design 致力于提供一种基于纸张和墨水的虚拟环境，传达出一种自然、真实的感觉。
在本篇文章中，我们将探讨如何使用 Material Design 让不同的 APP 有一致的风格。
1. Material Design 的主要特点
Material Design 的主要特点是平面、卡片、动画和色彩。下面我们将逐一介绍。
1.1 平面
Material Design 建议使用平面设计，即不使用阴影和立体效果。这样可以让界面更加简洁、明了，同时也更加容易实现和维护。
1.2 卡片
卡片是 Material Design 中的重要元素，它可以用来展示信息、图片、图标等。卡片的大小可以根据内容自适应，同时也可以设置固定大小。卡片之间的距离可以通过设置间距来控制。
1.3 动画
Material Design 中的动画可以让用户更加容易地理解操作的结果。例如，当用户点击一个按钮时，可以通过动画让用户知道按钮被点击了。
1.4 色彩
Material Design 中的色彩是非常重要的，它可以用来传达信息、引导用户等。Material Design 建议使用鲜艳的颜色，并且使用颜色的方式应该是有规律的，例如使用相邻的颜色。
2. Material Design 的基本组件
Material Design 提供了一些基本组件，包括按钮、文本框、卡片、列表等。这些组件可以帮助我们快速构建界面。
下面我们将以按钮为例，介绍如何使用 Material Design。
2.1 普通按钮
使用 Material Design 的普通按钮非常简单，只需要在 HTML 中添加以下代码即可：
<button class="mdc-button">Click me</button>
然后在 CSS 中添加以下代码：
-- -------------------- ---- ------- ----------- - ----------------- -------- ------ ----- -------------- ---- -------- --- ----- ---------- ----- ------------ ---- --------------- -------- --------------- ---------- -
这样就可以得到一个简单的 Material Design 按钮了。
2.2 带有图标的按钮
如果需要在按钮中添加图标，可以使用 Material Design 提供的图标库。首先需要在 HTML 中引入图标库：
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
然后在按钮中添加图标：
<button class="mdc-button"> <i class="material-icons">favorite</i> Like </button>
最后在 CSS 中添加以下代码：
.mdc-button i {
margin-right: 8px;
}这样就可以得到一个带有图标的 Material Design 按钮了。
3. Material Design 的布局
Material Design 中的布局是基于网格的，可以使用网格来实现响应式布局。
下面我们将以一个简单的网格布局为例，介绍如何使用 Material Design。
-- -------------------- ---- -------
---- ------------------------
---- -------------------------------
---- --------------------------------------
---- -----------------
---- ---------------------------------
---- ---------------------- -----------------------
---- ----------------------------------- ------------
------
---- --------------------------
--- ---------------------- ---------------------------- ----------
--- ------------------------------- -------------
------
---- --------------------------
------- ----------------- ------------------------ ----------
------- ----------------- ------------------------ ----------
------
------
------
------
---- --------------------------------------
-------- ----- ----- --- ----- ----------- ---------- ----- ----- ------- ------ -- ----- ------------ --- -------- ----- ---------- ------ --------- ---- -- ------- ---------- ----- ----- ------- ------ -- ------- ----- ------ --- ------ ---- ------- ------ --- ------ --------- -- ------ ------ ----------- ------- ---------- ----- -- ----------- -------- ----- ---- --------- ------ - --------- ----- ----- --- ----- -------- -- ------ ------- --------- ------- ------ ----------- --------- ---- --- --- ------ ------- ---------- --------- -- ----- -- ------ -------- ---------- ----- --------- ---------- ---- ----- ------ -- -------- ---- ------ -- -------- ------- ------- ------ ------- ------- ----- --- ------- ------- ---- ----- -------- ----- -- --------- --- ---- --- ------ ----- ------ ------ --- ----- ------------- ---- ------- ----- --------- ----- -------- ------ -- --------- --------- ----- ---- -------- ----- -- ------ ----- ----- -- ----- ------ --- ------ -- ---- -------- -------- --- ---- -- ------- --- ------- ----- -- ------ --------- -- ------ ----- ---------- --- ----------- ---- ----- -------- ------- ------ ----- ------- --- --- ------ ----- ----- --- ---- ----------
------
------
------然后在 CSS 中添加以下代码：
.mdc-layout-grid__cell--span-6 {
padding: 16px;
}这样就可以得到一个简单的网格布局了。
4. 总结
本文介绍了如何使用 Material Design 让不同的 APP 有一致的风格。我们首先介绍了 Material Design 的主要特点，然后介绍了 Material Design 的基本组件和布局。希望本文能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6505dbe695b1f8cacd21b1c9