响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。在移动互联网高度发达的今天，我们在桌面浏览器上开发的网页已经无法满足在移动设备上查看的需求。传统的开发方式是PC端开发一套页面，手机端再开发一套页面。但是这样做非常麻烦，随着不同的终端越来越多，你需要开发多个不同版本的页面。而使用响应式布局只要开发一套就够了。EthanMarcotte在2010年5月份提出了响应式布局的概念，简而言之，就是一个网站能够兼容多个终端。
| 开发方式 | 移动web开发+PC开发 | 响应式开发 |
|---|---|---|
| 应用场景 | 一般在已经有PC端的网站，开发移动站的时候，只需单独开发移动端。 | 针对新建站的一些网站，现在要求适配移动端，所以就一套页面兼容各种终端，灵活。 |
| 开发 | 针对性强，开发效率高。 | 兼容各种终端，效率低。 |
| 适配 | 只适配 移动设备，pad上体验相对较差。 | 可以适配各种终端 |
| 效率 | 代码简洁，加载快。 | 代码相对复杂，加载慢。 |
响应式开发与移动端与PC端分别开发的区别：
- 响应式开发只编写一套界面，通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
- 移动端与PC端分别开发，通过检测视口分辨率，来判断当前访问的设备是pc端、平板、手机， 从而请求服务器，返回不同的页面。
2 响应式开发的原理？
响应式开发的原理是使用CSS3中的Media Query（媒体查询）针对不同宽度的设备设置不同的布局和样式，从而适配不同的设备。
CSS3@media 查询定义和使用:
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
