Material Design Lite (简称 MDL) 是一个由 Google 推出的基于 Material Design 设计语言的前端框架，提供了一系列成熟、易用的 UI 组件，非常适合用于构建响应式的网页布局。本文将重点介绍如何利用 MDL 构建响应式的网页 Header，让你的网页更具时尚感和美观度，同时也提升用户体验。
响应式布局
响应式布局是指在不同屏幕尺寸下，通过适当调整布局和样式，使得页面内容在不同设备上展示效果尽量一致。在 MDL 中，可以借助栅格系统来实现响应式布局，栅格系统是一种将页面划分为若干列，然后在列上放置组件的布局方式。
下面是一个典型的栅格系统布局的例子：
---- ----------------- ---- --------------- -------------------------------- ---- --------------- -------------------------------- ---- --------------- -------------------------------- ------
上面的代码中，.mdl-grid 表示一个栅格系统容器，我们在其中放置了三个组件，分别占据了 2、8、2 列的宽度。在手机设备上，这三个组件会自动换行，变成竖列布局，以适应较小的屏幕尺寸。
Material Design Lite 的头部组件
MDL 提供了一系列成熟、易用的头部组件，我们可以借助这些组件来实现自己的响应式网页 Header。以下是一些比较常用的头部组件：
mdl-layout
一个基本的布局容器，用于包含整个网页的内容。下面是一个使用 mdl-layout 的例子：
---- ----------------- ---------------
------- ---------------------------
---- -------------------------------
---- ------ ---
------
---------
----- ----------------------------
---- ------ ---
-------
------上面的代码中，.mdl-layout 表示一个基本的布局容器，我们在其中填充了头部内容和主要内容。.mdl-layout__header 表示头部，.mdl-layout__header-row 表示头部的一行内容。
mdl-layout-title
一个标题组件，用于显示网页标题。下面是一个使用 mdl-layout-title 的例子：
------- ---------------------------
---- -------------------------------
----- ---------------------------- ------------
------
---------上面的代码中，.mdl-layout__title 表示标题组件，我们在其中填入了标题文本。
mdl-navigation
一个导航组件，用于在头部显示网站的导航栏。下面是一个使用 mdl-navigation 的例子：
---- ----------------------- -- ---------------------------- ------------- ----- -- ---------------------------- ------------- ----- -- ---------------------------- ------------- ----- -- ---------------------------- ------------- ----- ------
上面的代码中，.mdl-navigation 表示导航组件，我们在其中填充了四个链接。
mdl-layout-spacer
一个填充组件，用于在头部占据一定的空间。下面是一个使用 mdl-layout-spacer 的例子：
------- ---------------------------
---- -------------------------------
----- ---------------------------- ------------
---- --------------------------------
------
---------上面的代码中，.mdl-layout-spacer 表示填充组件，我们在其中不填写任何内容，只是利用它占据了一些空间。
mdl-button
一个按钮组件，用于添加网页交互元素。下面是一个使用 mdl-button 的例子：
------- ----------------- ------------- ------------------ ------------------------ ---------------
上面的代码中，.mdl-button 表示按钮组件，我们在其中指定了按钮的样式和效果。
示例代码
以下是一个完整的响应式 Header 的示例代码，你可以参考它来构建自己的网页 Header。
--------- -----
----- ----------
------
----- ----------------
--------- ---------------
----- ---------------- ---------------------------------------------------------------
----- ---------------- -----------------------------------------------------
------- ------------------------------------------------------------
-------
------
---- ----------------- ---------------
------- ---------------------------
---- -------------------------------
----- ---------------------------- --------------
---- --------------------------------
---- -----------------------
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
-- ---------------------------- ------------- -----
------
------
---------
----- ----------------------------
---- -----------------
---- --------------- -----------------------
---- --------------- -----------------------
---- --------------- -----------------------
------
-------
------
-------
-------总结
利用 Material Design Lite 构建响应式的网页 Header，可以加强网站的美观度和用户体验。通过 MDL 提供的头部组件，我们可以快速构建出完备的响应式 Header。希望本文对你有所启发，也欢迎你在实践中发掘更多有趣的内容。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/658611add2f5e1655d083932