整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这里小编为大家总结了一些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小时内与您取得联系。
