前端css框架总结

1、frozenui

链接：[http://frozenui.github.io/]备注：简单易用，轻量快捷，可定制，为移动端服务的前端框架

团队：腾讯

压缩大小：js - 23.6kb   css — 36.4kb + 57.3

demo：[http://frozenui.github.io/frozenui/demo/index.html]依赖：zepto.js

缺点：依赖第三方，css框架样式不精致

有点：可定制下载css，有js插件和动效库

2、 weui

链接：https://github.com/weui/weui

备注：WeUI是一套同微信原生视觉体验一致的基础样式库，为微信 Web 开发量身设计，可以令用户的使用感知更加统一

团队：微信

依赖：zepto.js  router.js

压缩大小：css - 35.1kb

demo：http://weui.github.io/weui/

缺点：不支持定制下载，组件有限，需要依赖，兼容性一般

优点：为微信量身定制

3、SUI Mobile

链接：http://m.sui.taobao.org/

备注：它非常轻量、精美，只需要引入我们的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常适合开发跨平台Web App

团队：阿里

demo：http://m.sui.taobao.org/demos/

依赖：zepto.js或者jquery

压缩大小：js - 116kb  css - 88kb

缺点：组件需要依赖jquery或zepto，js+css组件有点大，不支持定制化下载插件

优点：组件丰富

###4、Ratchet

链接：http://cnratchet.com/

团队：Twitter

demo：http://cnratchet.com/examples/app-movies/

依赖：不依赖任何外界js

压缩大小：js - 11.8kb  css - 19.2kb + 8.3kb

缺点：组件量一般

有点：不依赖第三方，区分ios 和安卓样式（虽然看上去只是颜色区别）

总结：

1.按照文件引用大小来分（js+css文件大小）

weui < Ratchet < frozenui < SUI Mobile

2.按照组件的丰富程度

weui < Ratchet < frozenui < SUI Mobile

3.按照组件的质量 (代码质量，用户体验)

frozenui < weui < Ratchet < SUI Mobile

备注：

如果在微信开发的情况，推荐用weui，如果开发微信，hybrid的情况，推荐用frozenui，如果不担心文件大小，可以常使用 SUI Mobile