Material Design Lite是在谷歌Google I/O 2014 發(fā)布的 Material Design 設(shè)計規(guī)范之后推出的Material Design 風(fēng)格的前端框架瘤缩，目的在于支持全平臺開發(fā)抓狭。先看一個官網(wǎng)Demo:
剛開始接觸MDL(Material Design Lite)瓢宦，比較簡潔柜候，高效搞动，賞心悅目的設(shè)計，但是在跨平臺的表現(xiàn)間可能沒有想象中那么好渣刷，之前在知乎中也看到有對此的評論鹦肿。可以從手機端打開連接Material Design Lite辅柴，發(fā)現(xiàn)官網(wǎng)的排版也沒有那么友好箩溃。
對比bootstrap的外觀表現(xiàn)，筆者更傾向于Material Design 風(fēng)格碌嘀，百度搜索Material Design框架涣旨，有比較多的選擇，但還是比較傾向于谷歌自己推出的Material Design Lite.
筆者借用了官網(wǎng)給出的上面截圖中的showcase股冗，在官網(wǎng)的Templates中霹陡，下載后可以跟著里面的Tutorial走一遍，對一些基本的css屬性的用法有了解止状，也可以同時參考官網(wǎng)Components烹棉。貼出在項目中引入的必要代碼截圖
在博客開發(fā)中，使用了portofio的前端模板怯疤，header和footer在套用模板的情況下出現(xiàn)了問題浆洗，類似于下面的圖：
仔細(xì)觀察發(fā)現(xiàn)在MAIN中內(nèi)容不足夠多的情況下，footer底部會留白集峦，百度后找到了較好的解決方案：
我采用的是方法二辅髓，但還是存在問題：mdl-card寬度不僅不能自適應(yīng)，在Chrome中直接索成一小塊兒少梁，無奈設(shè)置了style:"min-width=900px;"的屬性洛口，這樣在不同分辨率的設(shè)備下可能效果會差別很大，希望能解決此問題的看官給個解決留言凯沪，謝謝第焰！
最后給出前端的效果圖：
（內(nèi)容較多時正常顯示）
（這里就有問題了，只有兩個查詢結(jié)果妨马，內(nèi)容不夠多挺举，所以右側(cè)的滾輪滾動下來后就不能滾動上去了）
<main>屬性設(shè)置如下
<main class="mdl-layout__content" style="display: flex;flex-direction: column;height: 100%">
內(nèi)嵌的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;">
