多屏适应响应式布局方案,响应式、自适应布局区别
响应式布局
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，不需要分配子域名。
可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用大势所趋来形容也不为过。
响应式布局能够兼容不同屏幕分辨率、清晰度以及屏幕定向方式竖屏(portrait)、横屏(landscape)，不同尺寸下弹性显示不同的响应式内容（图片、多媒体）
设计思路：移动优先：一切从最小屏幕的手机端开始（比如 iPhone 的 320px ），先确定内容，然后逐级往大屏幕设计。不同于原来网页设计，总是从桌面电脑的 1024px 开始的。
响应式布局页面
自适应布局
自适应网页设计（Responsive Web Design）指能使网页自适应显示在不同大小终端设备上新网页设计方式及技术。
很多网站的解决方法，是为不同的设备提供不同的网页，比如专门提供一个mobile版本，或者iPhone / iPad版本。这样做固然保证了效果，但是比较麻烦，同时要维护好几个版本，而且如果一个网站有多个portal（入口），会大大增加架构设计的复杂度。
布局区别
理论上来说，响应式布局在任何情况下都比自适应布局好一些，但自适应布局有它自己的优势，因为它们实施起来代价更低，测试更容易，在资源有限的情况下这往往让他们成为更切实际的解决方案。自适应布局可以让你的设计更加可控，因为你只需要考虑了了几种状态就万事大吉了。
响应式布局中你可能需要面对非常多状态，大部分状态之间的区别很小，但它们又的确是不同的，这样一来就很难确切搞清你的设计会是什么样。
通过允许表面上的不确定因素存在，你可以获得更高层次上的确定。虽然你无法在精确到像素级别准确预知你的设计如何在943px×684px视觉区域汇中展示，但你能确定的是它们一定能展示的很好——不管是表层特征还是布局结构都有条不紊。
PC互联网加速向移动端迁移：2012年12月底我国网民规模达到5.64亿，互联网普及率为42.1%，手机用户占网民总数的74.5%。2015年，移动互联网的数据流量超越PC端的流量。
响应式布局优缺点
优点
1.节省人力成本：普通自适应至少节省两套人马——一套维护触屏版的开发团队，一套运营触屏版的运营团队。创业公司，事多人少，响应式布局使用一套就可以。
2.跨PC及手机端的活动，做的更容易，对于商品总量极小的网站来说效果特别好。活动移动端流量完爆了PC端，抢购这种事，还是手机来得方便。
3.研发运维的维护成本低
4.能同时兼顾手机站的SEO（响应式网站在搜索引擎排名上权重较高）
1.跨平台。
在手机，pad，电脑上均有不俗的表现。
2.节省人力开发成本。
不再需要有人特地维护PC页面，移动页面。
3.表现力一致
在不同的平台上看到的东西都是基本一致的，会让感觉体验良好。
缺点
1.对团队能力，尤其是PM和UI的能力要求尤其的高，必须是同时在PC及手机两端有足够经验的同学才hold住。
2.单个页面的工时变长，尤其是登录页这种。
3.设计思想理解的不够深的情况下会感觉框架灵活性较差，UI上可发挥的空间比较小，会造成在一些局部耗费大量的时间进行推敲，比如 header footer的变化等。
5.单个页面尺寸变大（可以用按需加载进行优化），可能会出现费流量，打开慢等情况。不过当前用户使用wifi访问占比比较高并无压力。
1.自由度低，局限性较大。
需要考虑在手机，pad，PC上三种屏幕下的页面内元素的呈现，会导致有着非常大的局限，需要根据业务做一个平衡选择。
2.页面会比较大，在当前国内2G，3G网络下打开速度会比较慢。
由于响应式页面是同时下载多套CSS样式代码，可能在手机上就下载PC/pad的冗余代码，其实毫无意义，而且浪费了流量资源。
3.对于非webkit内核的浏览器支持极差(IE6,7,8不支持)。
现在的IOS，Android都是webkit内核，至少在80%以上的手机上可以有良好的呈现。
单独m.xx网站实现
响应式网站主打的就是电脑、移动自适应，一步到位完成网站建设。但是其弊端也有一些：网页版和移动版不能分别管理；自由度较低；手机网页打开慢等。
响应式设计是做网页比较省成本的一种方式，只要做一次就可以同时满足PC需求和手机需求，而不用做两次
你要是资金充裕当然是做两个网站好了，因为手持设备的用户操作和PC是不一样的，开发两次很正常，只是大部分公司没必要专门为手持设备专门花成本开发网页，所以就用了响应式设计。
对大型门户或电商网站来说，响应式设计目前确实不太适合。因为响应式设计的基本原则是不会因设备不同而给予用户不同的内容（比如在低分辩率设备上删减某些内容），而大型门户或电商网站的单页内容非常多，当缩减到低分辨率设备上，又要保证内容全部可浏览时，必然导致页面拉长，浏览困难度增加。所以很多大型门户或电商网站都会提供一个移动设备版的网站，或者干脆直接让用户缩放网页进行浏览。
国内很多网站移动版参与单独m.xx独立实现的方式，首页菜单布局等针对移动端用户习惯设置。这种情况有两种原因，一种是之前网站没有用响应式布局，网站功能比较多已经上线运营，直接改造成本太高；第二种是移动版需要的功能跟pc版差异很大，人力比较充足可以分开两套系统做；第三种是没有做专门的app，部分功能需要适应移动版。
如果只是页面布局菜单样式不同的页面不多，使用响应式布局也可以比较方便做到针对不同屏幕设备显示不同界面内容而不需要单独做一套网站。
Hybrid混合开发模式
Hybrid App，混合应用，代表平台PhoneGap，一般指使用原生包装Web页面开发（H5）的应用。 现在比较流行的是Hybrid开发模式。
与原生应用相比，主要用户界面和业务逻辑都是用Web技术也就是HTML+CSS+Javascript实现的；与Web应用相比，Web部分打包在应用内部，使用时不需要网络。
顺便说一句，很多解决方案其实不算Hybrid，比如Adobe AIR、Titanium、Mono，这些都是使用某一特定技术开发跨平台应用的工具，最终产品都是编译成原生来跑的。
H5实现功能可以随时升级，不需要应用市场审核，不打扰用户，不需加载过多没有使用到的内容，可以减少安装包大小，淘宝、天猫、支付宝里面现在就内嵌很多H5页面，但主要页面功能还是需要使用native原生开发执行效率和用户体验才比较好。app内置大部分H5页面是未来的趋势。
React Native
React Native 结合了 Web 应用和 Native 应用的优势，可以使用 JavaScript 来开发 iOS 和 Android 原生应用。在 JavaScript 中用 React 抽象操作系统原生的 UI 组件，代替 DOM 元素来渲染等。
React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。
如何评价 React Native？ - Android 开发 - 知乎
http://www.zhihu.com/question/27852694
facebook开源的React Native 听说这个比基于webview的Hybrid app要好很多
React Native的优势和劣势：
优势相对Hybird app或者Webapp：
1. 不用Webview，彻底摆脱了Webview让人不爽的交互和性能问题
2. 有较强的扩展性，这是因为Native端提供的是基本控件，JS可以自由组合使用
3. 可以直接使用Native原生的动画（在FB Group这个app里面，面板滑出带一点果冻弹动，面板基于某个点展开这种动画随处可见，这种动画用Native code来做小菜一碟，但是用Web来做就难上加难）。
优势相对于Native app：
1. 可以通过更新远端JS，直接更新app，不过这快成为各家大型Native app的标配了.
劣势：
1. 扩展性仍然远远不如web，也远远不如直接写Native code
2. 从Native到Web，要做很多概念转换，势必造成双方都要妥协。
比如web要用一套CSS的阉割版，Native通过css-layout拿到最终样式再转换成native原生的表达方式（比如iOS的ConstraintoriginCenter等属性），再比如动画。
另外，若Android和iOS都要做相同的封装，概念转换就更复杂了。
多屏适应H5框架
jQuery Mobile是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库，而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。主要做m.xxx.com 单独手机版二级域名使用的。缺点是无法满足pc端的常规布局。
Foundation由ZURB公司设计，ZURB是一家产品设计公司，位于加州坎贝尔。 是一个 Sass 预编译的响应式、语义化和移动优先的开源框架。国内用的人少，缺少中文API文档，第三方插件。
Ink为一个界面工具包，用于快速开发Web界面，具有易于使用、易于扩展特点。它可以为构建布局提供解决方案，可以展示普通的界面元素，可以实现以内容为中心、对用户友好的交互方式。国内用的人少，缺少中文API文档，第三方插件。
Amaze UI 为国内开源 HTML5 跨屏前端框架，以移动优先（Mobile first）为理念，从小屏逐步扩展到大屏，最终实现所有屏幕适配，适应移动互联潮流。
相比国外框架，Amaze UI 关注中文排版，根据用户代理调整字体，实现更好的中文排版效果。但目前案例太少稳定性无法保证不建议使用。
综上所述，bootstrap是最符合公司业务发展需求的选择
Bootstrap 是最受欢迎的 HTML、CSS 和 JS 框架，用于开发响应式布局、移动设备优先的 WEB 项目。为所有开发者、所有应用场景而设计。支持LESS和SASS预处理css。
Bootstrap 让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。
凭借全面的UI组件、易用的网格和组件，Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。
全球数以百万计的网站都是基于 Bootstrap 构建的，由Twitter开源，有完善的中文API文档和社区，众多第三方插件、示例网站。
百度搜索“bootstrap”找到相关结果约820,000个，拉钩网、猎聘网上很多web前端开发岗位要求bootsrtap。