1.什么是响应式设计？
响应式Web设计（Responsive Web design）的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布 局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备；换句话说， 页面应该有能力去自动响应用户的设备环境。响应式网页设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这样，我们就可以不必为不 断到来的新设备做专门的版本设计和开发了。
2.响应式设计的提出
Ethan Marcotte曾经在A List Apart发表过一篇文章"Responsive Web Design"，文中援引了响应式建筑设计的概念：
最近出现了一门新兴的学科——"响应式建筑(responsive architecture)"——提出，物理空间应该可以根据存在于其中的人的情况进行响应。结合嵌入式机器人技术以及可拉伸材料的应用，建筑师们正在尝 试建造一种可以根据周围人群的情况进行弯曲、伸缩和扩展的墙体结构；还可以使用运动传感器配合气候控制系统，调整室内的温度及环境光。已经有公司在生产" 智能玻璃"：当室内人数达到一定的阀值时，这种玻璃可以自动变为不透明，确保隐私。
将这个思路延伸到Web设计的领域，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整。
显然，我们无法也无需使用运动传感器或是机器人技术，响应式Web设计更多需要的是抽象思维。好在，一些相关的概念已经得到了实践，比如液态布局、 帮助页面重新格式化的media queries和脚本等。但是响应式Web设计不仅仅是关于屏幕分辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新思维模式。
3.如何实现响应式设计？
3.1 在html的head头部加入以下信息
<meta name="viewport" content="width=device-width,maximum-scale=2.0, user-scalable=yes" />
width=device-width ： 表示的是设备的宽；,maximum-scale=2.0,：最大的缩放比例是当前屏幕设备的两倍；user-scalable=yes" ：表示用户可缩放；
3.2
只需在CSS中添加@media screen属性,根据浏览器宽度判断并输出不同的长宽值，
以下下是针对华强北商城的登录页面而写的css，对设备宽在320-479之间所应用的css；
值得一提的是：在第一版完成上线后，遇到一个问题，在手机设备上，有的用户会浏览网页的时候会禁止下载图片，登录页面的“登录”按钮，看不见。以前的“登录”按钮，使用的是有渐变颜色北京图片。在为了保持效果的前提下，我使用background颜色线性化，
显示出来可以看出渐变的颜色。当然这是css3中的新增的东西，而且颜色也不好掌握，我给你提供一个线性颜色的在线编辑器http://westciv.com/tools/gradients/index.html，注意，里面有firefox和webkit版本。
生成的css代码如下
响应式登录页 http://login.okhqb.com/member/login.html
响应式注册页 http://login.okhqb.com/member/register.html
4.响应式的网页的测试
4.1使用线上测试工具 http://www.imsole.net/responsive/
4.2 使用pc上的浏览器改变浏览器宽度进行测试。
4.3为了更精准，可以在苹果笔记本上的ios模拟器上测试；
总结：华强北商城，登陆页，注册页，成功页，响应式上线上后效果良好，目前在做第二期。