响应式Web设计（常缩写为RWD）是指页面的设计和开发应根据用户行为和设备环境（系统平台、屏幕尺寸、屏幕方向等）做出相应的响应和调整。可以说是网页设计的一种技术实践，使网站能够在各种浏览设备（从台式电脑显示器到手机或其他移动产品设备）上阅读和导航，同时减少缩放、平移和滚动。

具体的实践方法包括很多方面，包括弹性网格和布局、图片、CSS媒体查询的使用等。无论用户使用的是笔记本电脑还是iPad，我们的页面应该能够自动切换分辨率、图片大小和相关脚本函数，适应不同设备；换句话说，页面应该具有自动响应用户设备环境的能力。响应式网页设计意味着一个网站可以兼容多个终端，而不是为每个终端制作特定的版本。这样，我们就不必为不断推出的新设备进行专门的版本设计和开发。

一：响应式网页设计概念产生的灵感

响应式网页设计最初是EthanMarcotte在一篇文章‘响应式网页设计’中提出的概念，其中引用了响应式建筑设计的概念：一个新兴学科已经出现——’响应式“响应式建筑”，并提出物理空间应该对其中存在的人的状况做出反应。主要灵感来源是嵌入式机器人技术与可拉伸材料的应用相结合，仿佛建筑师正在试图建造一个可以根据周围人的情况弯曲、拉伸和扩展的墙体结构；运动传感器还可用于协调气候控制系统调节室内温度和环境光线。例如，目前正在开发的“智能玻璃”可以在房间内的人数达到一定阈值时自动变得不透明，从而确保隐私。当我们把这个想法延伸到网页设计领域时，我们得到了一个全新的概念。

显然，我们不能也不需要使用运动传感器或机器人。响应式网页设计需要更抽象的思维。幸运的是，一些相关的概念已经付诸实践，比如液体布局、媒体查询和帮助页面重新格式化的脚本等。但响应式网页设计不仅仅是屏幕分辨率适应和自动缩放图片等，它更像是一个设计的新思维方式。

二：响应式图片设计

响应式图像技术是指不仅逐年缩放图像，而且在小型设备上降低图像本身的分辨率的想法。这项技术的实现需要用到几个相关的文件，我们可以在Github上获取这些文件。包括.htaccess文件和一些示例资源文件。总体原理是rwd-images.js会检测当前设备的屏幕分辨率。如果是大屏幕设备，它会在页面头部添加BASE标签，并将后续的图像、脚本和样式表加载请求定向到虚拟路径“/rwd-router”。当这些请求到达服务器时，htacces文件将确定这些请求是否需要原始图像或小尺寸的“响应式图像”，并提供相应的反馈输出。对于小屏幕的移动设备，永远不会使用原始尺寸的大图像。

该技术支持大多数现代浏览器，包括IE8+、Safari、Chrome和Opera，以及这些浏览器的移动设备版本；在FireFox和一些较旧的浏览器中，它会优雅地降级：我们仍然可以获得小图像的输出，但同时，原始的大图像也会被下载。

三：响应式网页设计目前存在的问题

响应式网页设计当前的一个问题是横幅广告和视频不流式传输。不过，搜索广告和展示广告支持特定设备平台定位，并为智能手机和基本移动设备提供不同的广告尺寸格式。您可以针对不同平台使用不同的登陆页面（英文：Landingpage）URL，也可以使用AJAX（英文：Ajax框架）在页面上显示不同的广告变体。

而且，自从响应式网页设计被提出以来，业内人士争论不断。其实核心问题只有两个：一是资源请求过多与终端支持有限的矛盾；二是资源请求过多与终端支持有限之间的矛盾；另一个是响应式网页设计。与移动端的用户体验和视觉风格的差异。前者无法忍受通过慢速的3G/2G网络在性能较弱的手机/平板电脑上加载庞大的PC页面，而后者则纠结于响应式网站不像移动网站。

建议是：具体问题具体分析。例如，注重内容或信息的网站可以尝试响应式网站，而注重视觉和功能的网站可以尝试建立独立的移动网站。另外，响应式网页设计的大部分技术仍然可以用在WebApp开发中。