Material Design Lite学习（一） 概述及环境搭建
孙正业
概述
Material Design Lite (MDL)是使用JavaScript, CSS和HTML编写的UI组件库。它的设计灵感来源于Google的Material Design。它们的区别在于Material Design是应用于android app的界面开发，而MDL是应用于网页开发。事实上，使用MDL设计出来的web界面和使用Material Degsign设计出来的android app界面非常相似。
MDL具有如下特点
- 响应式设计(Responsive Design) 使用MDL设计出来的web页面会根据设备实际的大小，调整其内部组件的布局。因此，它可以完全兼容PC, 平板和手机。
- 标准的CSS 在设计MDL页面时，只需要使用CSS规则，而不需要考虑外部的javascript库。这使得MDL的学习非常简单。
- 扩展性 MDL在设计时就考虑到设计新的CSS规则比覆盖老的CSS规则要容易得多。
- 免费
环境搭建——第一个MDL web页面
要使用MDL，需要引入如下三个包：
- material.min.css
- material.min.js
https://fonts.googleapis.com/icon?family=Material+Icon
其中，最后一个包定义了我们在web开发时可能用到的一些图标。
另外两个包可以在 http://www.getmdl.io/started/index.html 上直接下载。但是考虑到在国内可能这个页面打不开，读者如果需要，可以从csdn上下载。
下面是一个简单的mdl web页面的例子。
<html>
<head>
<title>The Material Design Lite Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="material.min.css">
<script src="material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<main class="mdl-layout__content">
<div class="page-content" style="padding-left:100px;">Hello World!</div>
</main>
</body>
</html>参考文献
https://www.tutorialspoint.com/materialdesignlite/index.htm
https://www.tutorialspoint.com/materialdesignlite/materialdesignlite_overview.htm
https://www.tutorialspoint.com/materialdesignlite/materialdesignlite_environment.htm
类似资料：