在如今 App 井喷的时代，如何能让自己的 App 脱颖而出，成为用户心中的独一无二的 App 呢？Material Design 设计规范就是一个不错的选择。Material Design 是一个由 Google 推出的设计规范，以响应式设计、光与影的运用以及自然运动为特点，让用户流畅而愉悦的使用你的 App。
那么，如何在前端开发中加装 Material Design 呢？
加载 Material Design 资源
第一步，我们要加载 Material Design 相关的资源。Google 官方提供了一份 Material Design Lite(MDL) 库，可以直接引用 CDN 或下载使用。MDL 库提供了样式和 JavaScript 库，可以方便地应用到你的 App 中。
可以在 HTML 中加入下面的代码：
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
其中第一行引用了 Material Icons 字体，可以在应用中使用 Google 官方提供的 Material 图标。第二行引用了 MDL 库的样式，第三行引用了 MDL 库的 JavaScript 库。
使用 Material Design 元素
接下来，我们就可以在 HTML 中使用 Material Design 的元素了。MDL 库提供了常见的 Material 设计元素，例如按钮、输入框、卡片等。
例如，下面是一个带有 Material Design 样式的按钮：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored"> 登录 </button>
这个按钮使用了 MDL 库提供的样式，包括 raised（凸起）、colored（有颜色），可以让按钮更加醒目和美观。
再例如，下面是一个带有 Material Design 样式的输入框：
<div class="mdl-textfield mdl-js-textfield"> <input class="mdl-textfield__input" type="text" id="username"> <label class="mdl-textfield__label" for="username">用户名</label> <span class="mdl-textfield__error">请输入正确的用户名</span> </div>
这个输入框使用了 MDL 库提供的样式，具有浮动的标签和错误提示。
MDL 库还提供了更多常用的 Material Design 元素，包括滑块、卡片、菜单等。它们使用起来十分方便，可以大大提高你的开发效率。
自定义 Material Design 样式
当然，有时候 MDL 库提供的样式并不满足我们的需求。这时，我们可以自定义样式，让 App 既有 Material Design 的特点，又能满足我们的个性化要求。
MDL 库提供了自定义的方法，你可以在 CSS 中使用 MDL 提供的类名来进行样式修改。例如，你可以修改 MDL 按钮的鼠标悬浮效果：
.mdl-button:hover {
background-color: red;
}这样，当鼠标悬浮在 MDL 按钮上时，按钮的背景色会变成红色。
总结
Material Design 是一种优秀的设计规范，可以让你的 App 在用户心中脱颖而出。在前端开发中添加 Material Design 样式，可以使用 MDL 库提供的资源和元素，也可以根据自己的需求进行自定义样式。
在实际开发中，除了 Material Design 还有很多其他值得尝试的设计规范，如 Ant Design、Bootstrap 等。通过使用这些设计规范，可以快速地提升自己的前端开发技能，极大地提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64895fdf48841e98947a90ba