移动端主流的css框架

html-css011

移动端主流的css框架,第1张

1、bootstrap: http://www.bootcss.com/ 响应式布局

jquery weui https://jqweui.cn/components#form

jquery weui开发经验总结

2、css3 动画

http://www.haorooms.com/uploads/example/Animatecss/

更多框架

http://nec.netease.com/framework

3、icon字体

http://fontawesome.io/

http://www.iconfont.cn/

4、css的 SASS 和Less框架

vonic 框架

https://wangdahoo.github.io/vonic/docs/#/

CSS 框架是一系列 CSS 文件的集合体,包含了基本的元素重置,页面排版、网格布局、表单样式、通用规则等代码块,用于简化web前端开发的工作,提高工作效率。

优点

a) 提高开发效率。

b) 规范名称定义,便于维护。

c) 规范项目开发流程

d)css代码更清晰、简单。html代码更合理。

e) 大规模项目中可以减少用户下载

弊端

a) 学习成本提高。你需要了解整个框架,需要阅读框架的文档。

b)css框架对于一个小项目等页面来说很臃肿。框架中可能有大部分你用不到的代码。

c)可能会无法帮助你的技术提高。太依赖框架,以至于很难排除bug。包括框架中本身就带的bug。

d) 选择自己需要的框架与开发框架都很痛苦。写到后面发现越来越不灵活,越来越臃肿。

以pure为例来说明css框架的使用方法:

第一步:

设置meta

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0maximum-scale=1.0user-scalable=0" />

第二步:

引用基础css,就是说,所有引用pure的代码之前,需要引入的一个css

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/base-min.css">

第三步:

引用pure的主css

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/pure-min.css">

第四步:

引入你需要的pure的css,这里呢,我们抛砖引玉,只管响应式布局:

<!--[if lte IE 8]>

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-old-ie-min.css">

<![endif]-->

<!--[if gt IE 8]><!-->

<link rel="stylesheet" href="yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">

<!--<![endif]-->