主流Responsive Framework的对比

首先要说这种框架多余牛毛，按照流行度排序有下面三个：Bootstrap、Foundation、Skeleton，以及新星Semantic UI。

Bootstrap

优势

• 最流行、组件及主题最多；
• 开发速度快；

  劣势

• 对移动支持稍差，因为采用px定位；
• 做出来的界面布局和样式都差不多；

Foundation

优势

• 就想名字暗示的一样，提供的是基础框架，也就具备更灵活的responsive能力；
• 采用em做尺寸单位，尺寸按比例调整，更加合理；
• 所以鼓励用户一开始就进行responsive design；
• 做出来的界面不会雷同；

  劣势

• 主题较少，需要自己定义样式；
• 因为比bootstrap更贴近底层，所以开发成本比bootstrap高一些；

Skeleton

优势

• 轻、简单；

  劣势

• 似乎太轻了，只提供了基本的responsive layout功能，没有widgets；
  不如其它框架流行；

Semantic UI

优势

• 最近迅速蹿红，关注度高；
• class name更加表意，所以代码的可读性很好；

  劣势

• 除了class name更加表意，似乎没有什么unique功能；

总结

Bootstrap是full-stack css框架，responsive design只是其功能之一，适合快速做原型系统以及没有UX的团队，圆角阴影UI风格；
Skeleton严格来说不是framework，只是一个技术方案，缺少out-of-box的组件，我也不知道它适合做什么；
如果说Bootstrap和Skeleton是两个极端的话，那么Foundation就是一个折中的方案，它和Bootstrap最大的不同是设计理念，Foundation更加follow responsive的思想，em单位正是这种思想的体现，适合想在任何四角屏幕设备上运行的应用，且有UX进行color theme设计的团队，直角扁平UI风格；
Semantic UI的设计思想和Foundation类似，但UI样式更倾向于bootstrap，适合技术spike。

References:

• https://ruby-china.org/topics/17143
• http://responsive.vermilion.com/compare.php
• 这几个Framework的官网；