在当前的 Web 开发领域中，追求用现代化的技术和方法来实现用户交互体验和视觉效果的同时，选择合适的 UI 框架变得越来越重要。Material Design Lite（简称 MDL）是一个由 Google 开发的 UI 框架，可以帮助前端开发人员快速构建出具有优良视觉风格和实现轻量级交互的前端网站并配置响应式布局。在这篇文章中，我们将学习如何使用 MDL 实现一个响应式网站布局。
环境准备
在本文中，我们将使用 HTML、CSS、JavaScript，以及 MDL 库来实现响应式布局。所以首先需要通过以下步骤安装 MDL:
- 下载 MDL 库，从 https://getmdl.io/ 中下载 MDL（包括 CSS、JavaScript、字体和图标）并解压缩至项目所在的文件夹中；
- 在 HTML 文件中引入 MDL 库，通过使用以下代码段在 HTML 文件
head标签中引入 MDL 库css和js：
<!-- Import MDL from local --> <link rel="stylesheet" href="./MDL/material.min.css"> <script src="./MDL/material.min.js"></script>
响应式网站布局设计
在本文中，我们将使用 MDL 提供的栅格系统来实现响应式布局。栅格系统是一种通过在页面上使用一组列来定义布局的方法，每列等宽，列之间有固定大小的间隔。栅格列可以分为多个列尺寸，从而可以设置每个元素应该占用多少列。
在下面的例子中，我们将更改 MDL 提供的常规布局并添加一个侧栏二级导航到响应式设计中。
添加侧边栏到页面布局中
为了向网站布局添加侧边栏，我们需要将整体的布局改为两列。左列将被用于展示内容，右列将被用于生成侧边栏。
- 在合适的位置调用 MDL grid 系统创建一列充当左列，另一列充当右列。我们设置左列占据
mdl-cell--9-col并右列占据mdl-cell--3-col：
-- -------------------- ---- -------
---- -----------------
---- --------------- -----------------
---- ---- ------- ---- ---
---------- -----------
------
---- --------------- -----------------
---- ---- ------- ---------- ---- ---
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
------- 嵌套包含 Markdown 的主体内容。
使导航栏具有响应式
现在，我们需要向侧边栏导航中添加一些响应式的功能。在 MDL 中，可以使用 mdl-layout--fixed-drawer 和 mdl-layout__drawer-button 类将 MDL 注入到页面中，以便在侧栏的开关状态下 MDL 可以平滑地进行转换。当侧边栏导航处于开启状态时，内容区域向右滑动。
- 将导航栏按钮添加到导航栏中：
<header class="mdl-layout__header">
<div class="mdl-layout__drawer-button"><i class="material-icons">menu</i></div>
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">Title</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>- 将侧边栏和整体布局结合在一起：
-- -------------------- ---- -------
---- ---------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
----- ----------------------------
---- -----------------
---- --------------- -----------------
---------- -----------
------
---- --------------- -----------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
------
-------现在，你已经通过 MDL 去构建了一个响应式布局。
结论
通过使用 MDL，为您的网站添加响应式和现代化的布局将变得非常容易，并使您的网站获得更好的用户体验，MDL 提供了大量的 CSS、 Javascript 和 Web 组件，使得 Web 开发人员能够以更加快速和可靠的方式创建富有生命力的网站。实现一个响应式的布局，是前端开发者的必备技能之一，我希望这篇文章能够帮助你掌握MDL。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67343b180bc820c5824799fb