Material Design 是 Google 推出的一种全新的设计风格，注重平面化、简洁化、卡片式以及自然色彩，使用纸牌、波纹等元素，给用户带来更加直观、自然的视觉体验。
Material Design Lite (简称 MDL) 是基于这种风格而开发的一套前端 UI 开发框架。它可以让开发者快速构建符合 Material Design 风格的网站和应用。本文将介绍 MDL 中的响应式网站设计方法，并以实际示例代码为指导。
响应式设计
随着移动设备的普及，越来越多的人开始使用手机和平板电脑浏览网页。因此，网站的设计必须考虑在不同分辨率下的显示效果。
在 MDL 中，响应式设计是一种基于 CSS3 的技术，可以根据不同设备的屏幕尺寸，自动调整页面的布局和样式。它可以让网站在不同分辨率下都保持统一的视觉效果和用户体验。
响应式设计方法
在 MDL 中，响应式设计的方法主要有以下几种：
媒体查询
媒体查询是 CSS3 中用于根据不同的设备特性来定义不同样式的机制。MDL 中提供了一些默认的媒体查询，如 screen and (max-width: 1024px)，来适应不同尺寸的设备。
例如，我们可以使用下面的代码来对不同尺寸的设备进行不同的响应式处理：
-- -------------------- ---- -------
------ ------ --- ----------- ------ -
-- ----------- --
-------------- -
-------- -----
-
-
------ ------ --- ----------- ------ -
-- -------------- --
--------------- -
-------- -----
-
-栅格系统
栅格系统是一个基于栅格布局的响应式设计方法。在 MDL 中，Grid 栅格系统是一个强大的工具，它可以将页面分为 12 个列，并根据屏幕大小进行重新排序。
我们可以使用 MDL 的 Grid 栅格系统来实现简单的响应式布局。例如：
<div class="mdl-grid"> <div class="mdl-cell mdl-cell--4-col">三分之一</div> <div class="mdl-cell mdl-cell--4-col">另外一个三分之一</div> <div class="mdl-cell mdl-cell--4-col">最后一个三分之一</div> </div>
上面的代码将页面分为三列，根据屏幕大小，可以实现自适应的布局。在小屏幕下，三列将变成一列竖向排列，效果良好。
图标字体
图标字体是一种基于 CSS3 Font-face 技术的字体，它可以在不增加页面大小的情况下实现图标的显示。在 MDL 中，Icon 字体是一个可扩展的图标集，可以在页面中直接使用。
例如，我们可以使用下面的代码来实现一个按钮上带有一个图标：
<button class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">search</i> </button>
上面的代码将按钮和图标组合在一起，可以实现一个带有搜索图标的按钮。在不同的屏幕尺寸下，图标大小和位置都会自动变化，保证良好的用户体验。
示范
下面是一些响应式设计的示范代码，供读者参考。
媒体查询的使用
在小屏幕下显示菜单按钮，点击后显示隐藏菜单，在大屏幕下显示导航栏。
-- -------------------- ---- -------
---- -----------------------
-- --------------------------- ------------------------------- ---------------
-- --------------------------- ------------------------------- ---------------
-- --------------------------- ------------------------------- ---------------
-- --------------------------- ------------------------------- -----------------
------
------- ----------------- ------------- -------------------- ----------------- -----------------
-- -------------------------------
---------
--- --------------- ---------------------- ----------- --------------------- ------------------
--- --------------------- ---------------------------------------
--- --------------------- ---------------------------------------
--- --------------------- ---------------------------------------
--- --------------------- -----------------------------------------
-----
-------
-- ---------- --
------ ------ --- ----------- ------ -
--------------- -
-------- -----
-
-- --------- --
------------ -
-------- ------
-
-
-- ----------- --
------ ------ --- ----------- ------ -
------------ -
-------- -----
-
-
--------
--------
-- ---------------------
---------------------------------------------------------------- ---------- -
-------------------------------------------------------------------
---
---------栅格系统的使用
将页面分成 2 列，左列占 2/3，右列占 1/3。在小屏幕下将列竖向排列。
-- -------------------- ---- -------
---- -----------------
---- --------------- --------------- ---------------------- ---------------------------------
---- --------------- --------------- ---------------------- ---------------------------------
------
-------
-- ----------- --
------ ------ --- ----------- ------ -
---------------------- -
------ -----
-
---------------------- -
------ -----
-
-
--------图标字体的使用
在按钮上显示一个搜索图标。
<button class="mdl-button mdl-js-button mdl-button--icon"> <i class="material-icons">search</i> </button>
总结
MDL 响应式设计是一种基于 CSS3 的技术，可以让网站在不同尺寸的设备上都保持良好的显示效果。通过 MDL 提供的媒体查询、栅格系统和图标字体等工具，开发者可以实现类似 Bootstrap 的框架，来快速构建符合 Material Design 风格的网站和应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a400da48841e989407178a