什么是 Material Design Lite？
Material Design Lite 是谷歌公司推出的一款轻量级的前端框架，旨在让开发者能够轻松地将 Material Design 的设计风格应用到自己的网站上。它使用了纯 HTML、CSS 和 JavaScript，不需要其他的框架或库的支持。
Material Design Lite 主要有以下特点：
- 轻量级：文件大小只有几百 KB，可以快速加载；
- 易于使用：使用简单的 HTML 标记和 CSS 类就可以实现各种功能；
- 自适应布局：可以根据设备屏幕的大小自动适应布局，实现响应式设计；
- 兼容性好：支持主流的浏览器，并提供了针对 IE11 和低版本浏览器的兼容方案。
如何使用 Material Design Lite？
步骤一：引入 MDL 库
在 HTML 中引入 Material Design Lite 的 CSS 和 JavaScript 文件：
<!-- 引入 MDL 的 CSS 文件 --> <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css"> <!-- 引入 MDL 的 JS 文件 --> <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
步骤二：创建 HTML 结构
使用 Material Design Lite 的 HTML 结构和 CSS 类来创建布局和组件。例如，使用 MDL 的 grid 类可以实现网格布局：
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col">左侧栏</div> <div class="mdl-cell mdl-cell--8-col">右侧内容</div> </div>
步骤三：添加样式
使用 Material Design Lite 的 CSS 类为各个元素添加样式。例如，使用 MDL 的 button 类可以将一个普通的按钮转换成 Material Design 风格的按钮：
<button class="mdl-button mdl-js-button mdl-button--colored">提交</button>
步骤四：实现响应式布局
使用 Material Design Lite 的 grid 类可以实现响应式布局，根据设备屏幕的大小调整布局。例如，使用 MDL 的 grid 类的不同方法可以将布局分为不同的屏幕大小：
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col-phone mdl-cell--3-col-tablet mdl-cell--6-col-desktop">左侧栏</div> <div class="mdl-cell mdl-cell--8-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">右侧内容</div> </div>
在像素宽度达到阈值时， MDL 会自动从手机格式切换到桌面电脑格式，网格可根据设备的宽度轻松重新排列。
示例代码
-- -------------------- ---- -------
--------- -----
------
------
--------- -------- ------ ---- ---------------
----- ----------------
----- ---------------- -----------------------------------------------------------------
-------
------
---- ----------------- ------------- --------------------------
------- ---------------------------
---- -------------------------------
----- ----------------------------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ----------------
-- ---------------------------- ----------------
-- ---------------------------- ----------------
------
------
---------
---- ---------------------------
----- ----------------------------------
---- -----------------------
-- ---------------------------- -----------------
-- ---------------------------- -----------------
-- ---------------------------- -----------------
------
------
----- ----------------------------
---- -----------------
---- --------------- --------------------- ---------------------- -------------------------------
---- --------------- --------------------- ---------------------- -------------------------------
---- --------------- --------------------- ---------------------- -------------------------------
------
------- ----------------- ------------- --------------------------------
-------
------
------- ------------------------------------------------------------
-------
-------总结
通过使用 Material Design Lite，你可以轻松地创建一个具备 Material Design 风格的网站，并实现响应式布局。这个框架不仅能节省你的时间和精力，而且能够提高用户的使用体验。希望这篇文章能够帮助你了解 MDL，并在开发中灵活使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64535a53968c7c53b07c7a84