Material Design Lite在网站使用教程和注意事项

Material Design是Google推出的一套系统性的数字化视觉系统,广泛用于Web、、iOS上。Material Design Lite也是Google的产品,是基于Material Design这套系统制作的前端组件,可以简单理解Material Design更多层面是理论上和设计思想上的,而Material Design Lite更多的则是在应用层面上。

Material Design Lite
Lite

开始使用Material Design Lite

在官网下载MDL V1.3.0,或者本网站下载,解压后重新划分下目录:

在新建文件和目录

在index.html head结束标签加入

这里一看到Google Fonts,国内一脸蒙B。

打开https://fonts.googleapis.com/icon?family=Material+Icons查看代码:

我们将字体 2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2 保存到fonts目录

在style.css加入

在body结束标签加入

在body内容区域加入

浏览器兼容性测试

兼容性问题来自字体图标 .woff2 格式,大家可以搜索 .eot、.woff2、.woff、.ttf字体的相关资料。

已知在魅族手机所有最新固件的浏览器中、FireFox手机浏览器中字体图标都失效,并且在FireFox手机浏览器中问题更大,https下不支持二级域名加载静态资源,比如cdn.logpress.org/js/xxx.js,css也将失效,并且firefox会提示https加密不安全。

处理方法:

将js、css都换做相对路径,使用本域名加载静态资源。

字体图标加载多个格式:

来自Material Icons Guide官方的字体加载方法

将style.css的内容全部删除后加入:

但是下载的Material Design Lite压缩包里面是没有.eot、.woff、.ttf这三个格式的字体,在http://www.bootcdn.cn/material-design-icons/把这三个格式的字体保存到fonts目录。

改进后的Material Design Lite完整包下载:mdlv1.3.0.zip

参考资料

https://getmdl.io/
https://material.io/
https://google.github.io/material-design-icons/
https://github.com/google/material-design-lite/
http://www.bootcdn.cn/material-design-icons/

很多资料都需要墙外,自己有服务器的可以参考Bitvise SSH Client (Tunnelier) SOCKS5查看资料。

发布者

小旭旭

iOpenV 创始人,80后,从事:项目管理、网站建设方案、网站优化策略;职务:网站管理员、部门主管、技术总监、经理。

发表评论

电子邮件地址不会被公开。 必填项已用*标注