随着自适应技术的来临，大家不用做两个不同的站点（通常是pc端和wap端）。利用自适应框架可以为前端开发人员省下非常多的事。对于前端开发语言非常的丰富，技术人员不知道如何选择，我想分享下我自己使用的不同的自适应技术框架的使用。

前端自适应框架有哪些？

bootstrap、kube、pure、foundation、kit等。通常来说前端响应式框架使用比例比较高的有两款，一款是bootstrap、另一款则是foundation。那么今天就给大家介绍下这两者的差异化。

bootstrap和foundation关键区别：

1. UI 元素

Foundation 只安排了有限的几种元素， Bootstrap 则给你了所有你可以想象到的一切元素.ZURB 对于 Foundation 的设计目标是， 纵然你使用预定义的 UI 元素， 也不应该与大家的网站长得太像.而另一边， Bootstrap 则试图给你提供所有定义好的 UI 元素.

2. REMs VS Pixels

Foundation 使用 REMs, 而 Bootstrap 使用 Pixels.

使用 Pixels 意味着你不得不准确定义一个组件的高， 宽， 内边距， 外边距， 而且在每一种设备与屏幕尺寸上， 因为不同的设备往往显示效果区别很大.

现在 Foundation 5 使用 REMs, 而不是 EM. 这样， 避免了 EM cascade 问题：

使用 REMs 意味着你可以直接用 font-size: 80%;就可以让整个组件和它的子组件缩小 20%.

值得说明的是， 通过 REMs, 你可以脱离 Pixels 的细节了， 所以， 使用 REMs 来处理是非常值得的.

用bootstrap开发的管理后台

Foundation 还提供了 sass 的 mixin 方法来将 Pixels 转换为 REMs, 这样， 你还可以继续使用 Pixels 的思考方式来定义页面：.element { width: rem-calc(10px); // will be converted to REMs} 3. 灵活的网格 VS 预定义的网格。Foundation 的网格可以自动适配当前浏览器的宽度. Boostrap 则是预定义了几种网格尺寸来适配主流的设备和屏幕.Bootstrap 会在你改变浏览器宽度的时候突然改变它的网格.

Foundation 则会灵活适配当前的浏览器宽度， 这是一种新的技术手段， 自动适配的同时， 可以表现得与 Transformer 一样的效果.

Foundation 当网格改变时有两个要点： 小， 中和大. 所有的操作都只有缩小和放大， 并适应于当前浏览器的宽度. 不需要预定义的屏幕大小， 并且更主要的原因是， 鼓励你去根据屏幕的大小来定义不同的样式.

使用 Bootstrap, 你得到一个固定的或者说流形的网格， 这意味着你需要分别设定或者说对于网格容器不是一个预定义好的宽度.使用 Foundation 和 Sass, 你可以自由调整最大的网格的大小( 中型的和小型的自动被计算 ), 大屏幕的列数， 小屏幕的列数.

4. 移动设备优先 VS 也支持移动设备

Foundation 设计时已经考虑了任何四角屏幕. 而 Bootstrap 设计时则预先分为： 手机， 平板， 台式机和超大屏幕的台式机.构建一个优先支持移动设备的网站意味着它肯定在更大的屏幕上是可用的. 所以， Foundation 鼓励你这样去做： 移动优先.如果你使用 Foundation 的 Sass Media Query Mixin, 你就会发现， 没有特定的 Media Query 来查询什么是移动设备， 而是你使用 Media Query 来定义在更大的屏幕下应该怎么显示.设计东西时先考虑台式机的话很可能在支持更小屏幕时遇到很大问题， 和先考虑手机的话， 将会让你专注于什么是对用户最重要的， 让你空间提用感上升.

5. 社区

Bootstrap 有一个更大的社区. 而使用 Foundation 你就不得不自力更生一些.Bootstrap 非常大的亮点就是社区. 这是一个非常巨大， 包罗万象， 几乎找啥都可以找到.

如果你选择了 Foundation, 自力更生可能就是你不得不掌握的了. 几乎所有的解决方法都是为 Bootstrap 的， 你只能自己再去构建自己的.

bootstrapvsfoundation的体验区别

1.从使用频率来说，Bootstrap（框架）被国内外各种偷懒的程序猿们拿来做项目的主页/文档，第一眼看上去，和官网的demo对比除了文字换了，其他完全就是一回事！当然不仅仅是刚才提到的，其他很多的由静态页面构成的网站也广泛应用了Bootstrap（框架），之所以要给框架加上括号，是我认为Bootstrap已经不仅仅被作为框架应用，压根就是快速建站的模板啊！所以像上面几位提到的，Bootstrap很容易上手，从而也带来了泛滥问题。另一方面，Foundation国内则相对较为小众。

2.从兼容性问题来说，Foundation 4已经放弃了IE 8的支持，而Bootstrap 2仍能较完美支持IE 8（Bootstrap 3已经逐步开始放弃IE 8），甚至通过类似bs-ie的方式来达到大部分component支持IE 6的要求，这点在国内可能还是选择时需要考虑的一个重要因素吧。

3.从JS库来说，Bootstrap 2/3采用的都是更为常见的jQuery，Zepto我没有用过，所以无法评判其好坏。

4.社区支持度来说，Bootstrap在Github上的人气毋庸置疑，国内也有中文版的文档，各种教程案例以及衍生而来的插件、主题也是层出不穷，一片欣欣向荣之相，而Foundation的社区支持度则相对来说较为薄弱。

5.Foundation 4的开发理念是mobile first，而Bootstrap才刚刚将这点上升到首要（Bootstrap 3 RC1版本），根据你的开发需要，你可以适当考虑这点。

所以选用foundation还是Bootstrap要看个人的习惯，个人认为bootstrap适合新手，而foundation比较强大，适合经验丰富的前端开发人员。