一点点补充
网站布局有五种方式：
1、静态布局（static layout）
2、流式布局（Liquid Layout）
3、自适应布局（Adaptive Layout）
4、响应式布局（Responsive Layout）
5、弹性布局（rem/em布局）
关于响应式布局，可使用 CSS3 @media 查询 和 rem响应式布局 来制作响应式设计 。
可能有不少人对响应式网站和自适应网站都存在误解，会以为这两者都是同一类型的网站，只是叫法不一样。但是如果通过实际的浏览体验，就能分辨出它们的区别。可以说自适应只是响应式当中的一个子集，也就是说响应式的开始形态是自适应。
引：https://www.jianshu.com/p/7cb4f27d9496什么是响应式布局？
响应式网页布局设计就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。打个比方来说：现在社会有很多响应产品，例如折叠沙发，折叠床等等，当我们需要把沙发放到一个角落的时候，此刻沙发就好比div吧，而角落里的某个地方就好比父元素，由于父元素空间的改变，我们不得不调整div,让它能够依然放在角落里。在项目中你会遇到不同的终端，由于终端分辨率不同，所以你要想让用户体验更好，就必要让你的页面能够兼容多个终端。
什么是自适应布局？
自适应网页布局设计指网页能够在不同大小的终端设备上自行适应显示。简单来说：就是让一个网站在不同大小的设备上呈现显示同一样的页面，让同一个页面适应不同大小屏幕，根据屏幕的大小，自动缩放。
总的来说响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，而且css都是采用的百分比的，而不是固定的宽度，不同点是响应式网站在不同的设备上看上去是不一样的，会随着设备的改变而改变模板样式、模块排版、展示样式。
而自适应不会，所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式。
响应式布局与自适应布局的区别：
1.自适应布局通过检测视口分辨率，来判断当前访问的设备是：pc端、平板、手机，从而请求服务层，返回不同的页面；响应式布局通过检测视口分辨率，针对不同客户端在客户端做代码处理，来展现不同的布局和内容。
2.自适应布局需要开发多套界面，而响应式布局只需要开发一套界面就可以了。
1、灵活性不同：
静态布局：毫无灵活性可言，目前已逐渐被淘汰。
自适应布局：静态布局的升级版，因其强大的灵活性，已逐渐成为高端网页的代名词。
流式布局：灵活性更高，可适用于其他三种网站布局。
响应式布局：自适应布局的升级版，响应式网站要普遍适应市面上各类屏幕，开发难度和工作量都是非常大的，开发价格自然比普通网站高。
2、设计方法不同：
静态布局：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分。
自适应布局：使用 @media 媒体查询给不同尺寸和介质的设备切换不同的样式。
流式布局：使用百分比定义宽度，高度大都是用px来固定，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。
响应式布局：媒体查询+流式布局。使用@media媒体查询和网格系统配合相对布局单位进行布局，就是综合响应式、流动等上述技术通过 CSS 给单一网页不同设备返回不同样式的技术统称。
静态、自适应、流式、响应式四种网页布局的特点概括
1、静态布局：即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。
2、流式布局：页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
3、自适应布局：分别为不同的屏幕分辨率定义布局，即创建多个静态布局，每个静态布局对应一个屏幕分辨率范围。
4、响应式布局：分别为不同的屏幕分辨率定义布局，同时，在每个布局中，应用流式布局的理念，即页面元素宽度随着窗口调整而自动适配。
-------------------------------------
响应式缺点：
1、对于一些逻辑业务不同终端不同处理方式，不是很友好
例如：响应式设计并不利于百度的关键词优化和排名。因为用户在不同终端的搜索习惯不同，所以百度对移动网站和电脑网站的关键词处理策略也不相同。
2、响应式网站无法区分移动端，浪费带宽，加载耗时长。
响应式（自适应）设计的实现方式，往往是缩小或者隐藏电脑版网站的内容，使之适应移动端的窄屏。但隐藏的内容依然会加载，低分辨率设备会加载高质量的图片或者视频，不分屏幕尺寸都提供相同大小的网页。
这样的话，响应式网站加载的内容相比非响应式网站会增加20-50%。加载内容多，速度慢，浪费流量。响应式网站相对非响应式网站的加载耗时，一般都会延长1-2秒，在2G、3G网络情况下更严重。所以有的时侯，用户体验不是很好。
（引：https://blog.csdn.net/daimomo000/article/details/79378190 可以参考、有点以偏概全的一篇文章）
共同学习，共同进步，若有补充，欢迎指出，谢谢！