整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這里小編為大家總結了一些HTML5響應式Web開發框架，沒有最好，只有更合適，每個人都可以根據自己的工作需求和項目選擇不同的開發框架。
GroundworkCSS2是一款響應式HTML5、CSS以及JavaScript框架。這套框架擁有一套強大的網格系統外加對應劃分功能，足以滿足各類臺式機、智能手機以及平板設備的需要。
其網站還提供數量可觀的使用示例及說明文檔，足以幫助大家快速實現原型設計以及面向標準網站、電子商務網站以及圖片庫等應用場景的布局模板。
值得強調的是，這套框架還提供其它一些功能，例如響應式文本以及易于定制特性。
MontageJS是一套極具人氣的HTML5框架，其專長之處在于支持高性能與可擴展性Web應用的開發。這套框架提供一系列面向組件的HTML模板，從而幫助這些組件擺脫對JavaScript或者CSS的依賴性。
它還提供一套模塊化方法，能夠實現組件的可復用性及代碼組織。另外，MontageJS的其它優勢還包括基于云的視覺創作環境、功能性反應綁定(簡稱FRB)以及隱含事件代理等等。
52Framework是一套強大的前端開發框架，其能夠充分發揮HTML5、CSS3以及JavaScript的可觀潛能。
這套框架當中捆綁有大量內置功能，具體包括HTML5視頻播放器、HTML5表單驗證、CSS3屬性、網格系統以及HTML5canvas示例等。
TwitterBootstrap是一套強大的前端框架，能夠利用HTML、CSS以及JavaScript快速簡單地實現Web應用開發任務。
這套框架為開發人員提供一系列極具實用性的功能，具體包括一套12列響應式網格系統、JavaScript插件外加HTML元素等等。
它還提供一系列可復用組件，從而實現導航、下拉菜單、面包屑導航、排版、提醒以及進度條等功能。
SproutCore是一款高人氣前端框架，且利用MVC架構規范構建而成。立足于HTML5的強大能力，它允許我們通過高效客戶端邏輯與高質量主題特性構建出運行速度出色且具備可擴展能力的Web應用程序。
Foundation是目前網絡社區內應用范圍最廣的前端開發框架之一。這套框架能夠提供一系列覆蓋其網格系統的布局選項，同時具備多種現代功能特性，包括復雜布局、動畫效果、快速原型設計以及更多。
它還提供數套內置HTML模板，幫助大家快速開發出各類網站與網頁成果，具體包括電子商務首頁、旅行網站、在線雜志、博客站點以及產品頁面等。
Base是一款輕量級、模塊化HTML/CSS框架，能夠幫助我們開發出各類極為出色的網站應用。
Base的設計目標在于同各類新型與早期瀏覽器相兼容，并能夠順暢運行在各類移動設備之上，而這種能力也使其成為一套強大的跨平臺及響應式前端HTML5框架。
另外，Base框架還在其官方網站上提供一系列免費的單頁面網站設計模板供大家使用。
OnsenUI是一套基于元素的定制化HTML5UI框架，且具備響應式布局支持能力。這套框架提供相當廣泛的WebUI組件選項。
它也支持PhoneGap與Cordova，意味著其能夠輕松完成混合型應用的開發任務。OnsenUI的最大優勢在于能夠同jQuery庫或者Angular.js框架快速結合，從而顯著提高使用效率。
Enyo是一款先進的前端開發框架，適用于開發與原生應用類似的HTML5應用。
它還是一款極具人氣的跨平臺框架，目前被廣泛用于開發各類響應式與主流Web應用，具體包括blogWalker、ENotes、GrouponMobile應用以及Confero等等。
Enyo提供一系列功能特性，例如UI組件、功能部件、事件處理以及調試能力等等。
Ionic是一套先進的HTML5框架，主要用于混合型移動應用的開發工作。
這套框架在Angular.js支持方面經過優化，且提供相當豐富的HTML、CSS以及JavaScript組件。
其還擁有一套強大的命令行界面(簡稱CLI)，其中的卓越功能包括實時重載與日志記錄整合，這意味著我們能夠更為輕松地跨越不同平臺對Ionic應用進行開發、測試與部署。
「鏈接」
個網站長得好看能吃嗎？還真能！一個“秀色可餐”的網站不僅能增加人們的食欲，還能讓你的營業額蹭蹭往上漲！但是，一個長得好看卻只能活在電腦端的網站，真的不能吃！2016年，已經有超過80%的網民有在移動端購物的經歷，如果你的網站不能在移動端“顏值在線”，就別怪客戶都被別家攬走了！
解決的辦法只有一個，就是把自家網站做成響應式的。要么也可以另外開發移動站。要把網站變成響應式網站，給大家說三個簡單的步驟。
1.布局
在建響應式布局的時候，最好先建一個非響應式的布局，測試沒問題后，再把布局改成響應式的，添加響應式代碼和媒體查詢。
在HTML頁面的<head>和</head>標簽之間復制以下代碼：
媒體查詢的意思是根據不同設備設置不同的布局樣式。媒體查詢取決于網站布局，我們可以這樣定義：第一個，適合平板電腦橫向顯示，最大寬度為1060PX，#primary 占在其父容器寬度的67%，#senondary 占30%，再加上3%的左外邊距。 第二個，適合豎向平板電腦和更小的屏幕尺寸。
編碼完成后，可以測試下布局是怎么響應的。
2.媒體
響應式布局是響應式網站的“骨架”，媒體元素（視頻、圖像）是響應式網站的“皮肉”。
下面這段CSS代碼能讓你的網站圖像不超過顯示終端尺寸。
用CSS3 來為匹配 min-device-width 條件的媒體指定替換圖像：
圖像能這樣設置，怎樣實現響應式的視頻呢？
HTML：
CSS：
3.字體
CSS3 規范引入了一個新的單位叫 rem，和 em 類相似，但相對于 HTML 元素來說， rem 更易于使用。
rem 是相對于 HTML 元素的，不要忘了重置 HTML 的字體大小：
完成后，您可以定義響應式的字體大小，如下所示：
完成這三步后，你就能擁有一個響應式的網站了。不過這個教程對大部分用戶來說，還是有點復雜了。如果不會程序，是不是就不能做響應式網站了呢？并不是。目前一些自助建站工具已經非常強大，以建站寶盒為代表的H5模板建站，非常適合不懂編程的小白。拖拽操作，能打字就能建站，網站做出來高端大氣，尤其適合要做營銷型響應式網站的企業。
零基礎建響應式網站：http://www.iisp.com/design/?s=yuqiuping
機、平板燈手持設備的增多，網站要順應變化，就必須要做響應式開發，響應式網站最大的特點在于可以在不同設備下呈現不同的布局，是基于html5+css3技術，目前越來越多的網站開始采用了響應式設計，而下面15款工具可以方便測試你的html5響應式效果。
Responsinator
http://www.responsinator.com/
Responsinator提供了大家在不同設備viewport下查看網站效果的特性，提供了iphone，android，ipad，kindle及其多種設備上的預覽效果，你可以方便的看到需要支持的設備的響應式設計效果圖。
Responsive.is
http://responsive.is/
responsive提供了5種設備下的預覽效果展示
Kuapingce
http://www.kuapingce.com/
跨屏測 取自“跨屏”+“評測”，結合在一起取名 跨屏測，網址是跨屏測的拼音 ，創建于2015年12月。它是國內首個致力于跨屏幕響應式測試的工具類的產品，目的是為了幫助你查看你的網站的跨屏幕（響應式）效果，跨屏測收集了主流屏幕的尺寸大小，方便你快速了解網站在不同設備下的樣子。
Responsive Web Design Testing Tool
http://mattkersley.com/responsive/
類似responsivator，但是界面更簡單
Responsivepx
http://responsivepx.com/?m.gbin1.com#1035x480&scrollbars
允許你用拖動的方式來修改窗口大小，模擬不同的設備屏幕
screenqueri.es
http://screenqueri.es/
它支持localhost本地方式測試你的應用或者網站。
Aptus
https://itunes.apple.com/gb/app/aptus/id510487565?mt=12
一個工具類的瀏覽器，可以幫助你測試響應式設計
Bricss
http://www.benjaminkeen.com/open ... design-bookmarklet/
一個幫助你測試響應式的書簽，你可以方便的整合到你的瀏覽器里
Izilla Media Query Debugger
http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
這個js可以幫助你添加偽元素到body元素上用來偵測寬高 ，當然你也可以使用他們提供的bookmark：http://izilla.com.au/git/izilla.mq.debugger.bookmarklet.html
Screenfly
http://quirktools.com/screenfly/
支持4種設備的在線響應式設計測試工具，并且還提供相關開發的設計圖和文檔。
ViewPort Resizer
http://lab.maltewassermann.com/viewport-resizer/
另外一個書簽式的工具
Jresizer
http://www.toddmotto.com/jresize ... ponsive-development
一個jQuery的響應式開發工具插件，幫助你創建響應式的窗口，方便你的開發和設計流程
Resize My Browser
http://resizemybrowser.com/
一個簡單的幫助你創建指定寬高新開窗口的web工具
juicer
http://juicecreative.co.uk/juicer/website/index.php
一個在線的展示響應式的工具，支持iphone，android等設備的顯示，帶有實物圖。
ish
http://bradfrostweb.com/demo/ish/
一個比較新的在線查看響應式效果的web工具，支持不同尺寸的展示。
原文地址：http://bbs.qietu.cn/forum.php?mod=viewthread&tid=15059
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
