多屏適應響應式布局方案,響應式、自適應布局區別
響應式布局
響應式布局是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的Constraint\origin\Center等屬性），再比如動畫。
另外，若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。