Material Design Lite学习（一）概述及环境搭建

来源：互联网发布：高考文言文阅读知乎编辑：程序博客网时间：2024/05/22 15:26

概述

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

0 0

Material Design Lite学习（一） 概述及环境搭建

概述

MDL具有如下特点

环境搭建——第一个MDL web页面

Material Design Lite学习（一）概述及环境搭建