响应式布局（respond layout）是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端（手机、平板、pc电脑、手表，电视） ——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。
为什么要有响应式布局？
在移动互联日益成熟的时候，在PC端开发的网页已经无法满足移动设备的要求。
通常的做法是针对移动端单独做一套特定的版本。
如果终端越来越多，那么需要开发的版本就会越来越多（大屏设备的普及）
响应式布局 ：一个网站能够兼容多个终端（节约开发成本）
优点：
面对不同分辨率设备灵活性强
能够快捷解决多设备显示适应问题
缺点：
兼容各种设备工作量大，效率低下
代码累赘，会出现隐藏无用的元素，加载时间加长
其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果
一定程度上改变了网站原有的布局结构，会出现用户混淆的情况
响应式开发现状：
如果已经存在PC的网站了，那么一般不会使用响应式开发，而是针对移动端再开发一套系统（比如京东、淘宝）
在新建站点 上采用响应式开发的越来越多。
在国内，响应式开发还不是特别的流行。但响应式开发是大势所趋，会越来越流行。
响应式开发与移动web开发的比较 开发方式 移动web开发+pc开发 响应式开发引用场景 一般已经有了PC端网站，只需要端独开发移动端网站即可 针对一些新建网站，并且要求适配移动端
开发 针对性强，开发效率高 兼容各种终端，效率低
适配 只能适配移动端或者PC端，pad上体验比较差 可以适配各种终端
效率 代码简洁，加载快 代码相对复杂，加载慢
REM 各种布局特征的对比
由于市面上手机种类繁多，导致移动端的屏幕种类非常的混乱，比如有常见的320px 360px 375px 384px 480px 640px等。在开发中，美工一般只会提供750px或者是640px的设计稿，这就要求我们通过一张设计稿能够适配所有的屏幕。
通常解决方案如下：
流式布局：可以让各种屏幕都适配，只是在大屏幕中显示效果不是非常的友好, 即使这样, 由于开发效率高, 成本低, 目前使用流式布局的公司还是非常多的，比如 亚马逊 、京东 、携程
响应式布局：国内很少有大型网站使用，主要原因是工作大，可维护性不好 。所以一般都是中小型的门户或者博客类站点会采用响应式，因为这样可以节约成本。
rem布局：rem能够实现宽高自适应的布局方式， 目前使用rem布局的有：淘宝 、 苏宁
rem是什么？
rem（font size of the root element）是指相对于根元素的字体大小的单位。它是一个相对单位。
em（font size of the element）是指相对于当前元素的字体大小的单位。它也是一个相对单位。
html{font-size:16px;
}
body {
font-size:20px;
}
div.em {
/*em的计算方式参照的当前元素的font-size，如果不设置，默认继承自父盒子*/
width:2em;
height:2em;
background-color:red;
}
/*rem的计算方式参照的是html的font-size*/
div.rem {
width:2rem;
height:2rem;
background-color:blue;
}
rem与响应式