Material Design Lite (简称 MDL) 是一个由 Google 推出的基于 Material Design 设计语言的前端框架，提供了一系列成熟、易用的 UI 组件，非常适合用于构建响应式的网页布局。本文将重点介绍如何利用 MDL 构建响应式的网页 Header，让你的网页更具时尚感和美观度，同时也提升用户体验。
响应式布局
响应式布局是指在不同屏幕尺寸下，通过适当调整布局和样式，使得页面内容在不同设备上展示效果尽量一致。在 MDL 中，可以借助栅格系统来实现响应式布局，栅格系统是一种将页面划分为若干列，然后在列上放置组件的布局方式。
下面是一个典型的栅格系统布局的例子：
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--2-col">2-columns</div> <div class="mdl-cell mdl-cell--8-col">8-columns</div> <div class="mdl-cell mdl-cell--2-col">2-columns</div> </div>
上面的代码中，.mdl-grid 表示一个栅格系统容器，我们在其中放置了三个组件，分别占据了 2、8、2 列的宽度。在手机设备上，这三个组件会自动换行，变成竖列布局，以适应较小的屏幕尺寸。
Material Design Lite 的头部组件
MDL 提供了一系列成熟、易用的头部组件，我们可以借助这些组件来实现自己的响应式网页 Header。以下是一些比较常用的头部组件：
mdl-layout
一个基本的布局容器，用于包含整个网页的内容。下面是一个使用 mdl-layout 的例子：
// javascriptcn.com 代码示例
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<!-- 填充头部内容 -->
</div>
</header>
<main class="mdl-layout__content">
<!-- 填充主要内容 -->
</main>
</div>上面的代码中，.mdl-layout 表示一个基本的布局容器，我们在其中填充了头部内容和主要内容。.mdl-layout__header 表示头部，.mdl-layout__header-row 表示头部的一行内容。
mdl-layout-title
一个标题组件，用于显示网页标题。下面是一个使用 mdl-layout-title 的例子：
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">My Title</span>
</div>
</header>上面的代码中，.mdl-layout__title 表示标题组件，我们在其中填入了标题文本。
mdl-navigation
一个导航组件，用于在头部显示网站的导航栏。下面是一个使用 mdl-navigation 的例子：
<nav class="mdl-navigation"> <a class="mdl-navigation__link" href="#">Link 1</a> <a class="mdl-navigation__link" href="#">Link 2</a> <a class="mdl-navigation__link" href="#">Link 3</a> <a class="mdl-navigation__link" href="#">Link 4</a> </nav>
上面的代码中，.mdl-navigation 表示导航组件，我们在其中填充了四个链接。
mdl-layout-spacer
一个填充组件，用于在头部占据一定的空间。下面是一个使用 mdl-layout-spacer 的例子：
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">My Title</span>
<div class="mdl-layout-spacer"></div>
</div>
</header>上面的代码中，.mdl-layout-spacer 表示填充组件，我们在其中不填写任何内容，只是利用它占据了一些空间。
mdl-button
一个按钮组件，用于添加网页交互元素。下面是一个使用 mdl-button 的例子：
<button class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">My Button</button>
上面的代码中，.mdl-button 表示按钮组件，我们在其中指定了按钮的样式和效果。
示例代码
以下是一个完整的响应式 Header 的示例代码，你可以参考它来构建自己的网页 Header。
// javascriptcn.com 代码示例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Webpage</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout__title">My Webpage</span>
<div class="mdl-layout-spacer"></div>
<nav class="mdl-navigation">
<a class="mdl-navigation__link" href="#">Link 1</a>
<a class="mdl-navigation__link" href="#">Link 2</a>
<a class="mdl-navigation__link" href="#">Link 3</a>
<a class="mdl-navigation__link" href="#">Link 4</a>
</nav>
</div>
</header>
<main class="mdl-layout__content">
<div class="mdl-grid">
<div class="mdl-cell mdl-cell--2-col"></div>
<div class="mdl-cell mdl-cell--8-col"></div>
<div class="mdl-cell mdl-cell--2-col"></div>
</div>
</main>
</div>
</body>
</html>总结
利用 Material Design Lite 构建响应式的网页 Header，可以加强网站的美观度和用户体验。通过 MDL 提供的头部组件，我们可以快速构建出完备的响应式 Header。希望本文对你有所启发，也欢迎你在实践中发掘更多有趣的内容。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658611add2f5e1655d083932