Material Design Lite是在谷歌Google I/O 2014 发布的 Material Design 设计规范之后推出的Material Design 风格的前端框架，目的在于支持全平台开发。先看一个官网Demo:
刚开始接触MDL(Material Design Lite)，比较简洁，高效，赏心悦目的设计，但是在跨平台的表现间可能没有想象中那么好，之前在知乎中也看到有对此的评论。可以从手机端打开连接Material Design Lite，发现官网的排版也没有那么友好。
对比bootstrap的外观表现，笔者更倾向于Material Design 风格，百度搜索Material Design框架，有比较多的选择，但还是比较倾向于谷歌自己推出的Material Design Lite.
笔者借用了官网给出的上面截图中的showcase，在官网的Templates中，下载后可以跟着里面的Tutorial走一遍，对一些基本的css属性的用法有了解，也可以同时参考官网Components。贴出在项目中引入的必要代码截图
在博客开发中，使用了portofio的前端模板，header和footer在套用模板的情况下出现了问题，类似于下面的图：
仔细观察发现在MAIN中内容不足够多的情况下，footer底部会留白，百度后找到了较好的解决方案：
我采用的是方法二，但还是存在问题：mdl-card宽度不仅不能自适应，在Chrome中直接索成一小块儿，无奈设置了style:"min-width=900px;"的属性，这样在不同分辨率的设备下可能效果会差别很大，希望能解决此问题的看官给个解决留言，谢谢！
最后给出前端的效果图：
（内容较多时正常显示）
（这里就有问题了，只有两个查询结果，内容不够多，所以右侧的滚轮滚动下来后就不能滚动上去了）
<main>属性设置如下
<main class="mdl-layout__content" style="display: flex;flex-direction: column;height: 100%">
内嵌的mdl-grid属性为
<div class=" mdl-grid" style="min-width: 900px; margin: auto;flex: 1 0 auto;">
footer属性为
<footer class="mdl-mini-footer"style="flex: 0 0 auto;">
