响应式网站（Responsive Web Design）是Ethan Marcotte在2010年5月份提出的一个概念。就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版别。这个概念是为处理移动互联网阅读而诞生的。很长一段时间以来，都以为响应式网站就是自适应网站，这是两个相同的概念。后来机缘巧合认识了一位前端大拿，给我好好上了一课，终于能把这两种网站前端... 响应式网站（Responsive Web Design）是Ethan Marcotte在2010年5月份提出的一个概念。就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版别。这个概念是为处理移动互联网阅读而诞生的。很长一段时间以来，都以为响应式网站就是自适应网站，这是两个相同的概念。后来机缘巧合认识了一位前端大拿，给我好好上了一课，终于能把这两种网站前端表现形式给讲透了。现摘抄如下：
1、响应式网站由来
最开端网站都会被规划成固定宽度的页面，最开端的PC显现器的分辩率种类不多，由于当时电脑本来就少，即使有改变也是 800、900、1050、1200等几种。比如 GitHub的网页就是固定宽度为1020px来定制的。
后来跟着显现器越来越多，以及笔记本的遍及，这种方法的页面出现了问题。在大屏显现器上整个页面显的特别小，在小屏显现器上网页又出现滚动条导致用户体会极端的差。为了处理在各种不同巨细和分辩率的设备上怎样正确显现网站的问题，前前后后也出现了好多种方案。
供给不同版别：最开端的处理方法，是为不同的设备供给不同版别的网页。比如一个站点为PC、Mobile、Pad供给三个不同的版别。这样做固然确保了作用，但一起要保护好几个版别比较费事，而且网站有多个进口，会大大增加系统架构的复杂度。
自适应：后来人们就开端想能不能"一次规划，遍及适用"，即让同一个页面主动适应不同巨细的设备，从而处理为不同设备供给不同版别的页面问题。这就是所谓自适应布局处理方案。
响应式： 选用自适应布局的话，假如设备太小，就算网页能够根据屏幕巨细进行适配，可是在太小屏幕显现内容过多会看不清楚。为了处理这个问题而衍生出来的一种新的布局方法，那就是响应式布局。
虽然现在有许多结构能够帮到咱们，例如大名的bootstrap就是最常用的，说白了就是一堆CSS款式，但要怎样去用好它，仍是有许多定制作业要做的，所以响应式网站一般来说比一般PC电脑网站要贵许多，由于PC只做一个版别，一个分辩率就够了。可是响应式就多得去了，还要不断地测验和修改，最终的也不100%都兼容，能兼容干流的手机和平板，笔记本这些就不错了。如IPHONE和IPAD啊这些，还有一些安卓手机。
先给出两个详细例子让大家直观感受一下两种的作用：
响应式和自适应两种布局方法都是为了处理在不同巨细和分辩率的设备上正确显现网页的问题。不同的是两种布局方法采取了不同的处理方法而矣。
最开端出现的一种新的布局方法其实是宽度自适应布局。咱们平时谈论的自适应布局，大部分时分指的就是宽度自适应布局。 自适应是为了处理怎样才能在不同巨细和分辩率的设备上出现相同的网页。在网页内容和布局主体坚持基本不变的前提下，让同一张个页面主动适应不同巨细和分辩率的设备，根据设备屏幕宽度，主动调整网页内容巨细。
响应式布局正是为了处理这个问题而衍生出来的一种新的布局方法。它能够主动识别屏幕尺度并做出相应调整的网页规划，页面布局和展现的内容可能会跟着屏幕尺度改变而有所改变。
响应式布局：网页内容和布局跟着屏幕尺度改变而改变
网络上也有网友用这么一张图来总结响应式和自适应的差异：
对于同一个页面（图中的Html），假如用响应式布局来处理的话，用不同设备（电脑、平板、手机）去访问此页面，最终看到的布局和内容有很大不同。
而假如用自适应布局去处理的话，那不论访问设备怎样的不同（上图是三台尺度不相同的手机），最终看到的页面内容和布局基本上仍是相同的，就是尺度略有不同。
假如屏幕宽度在不大于720像素，则4张图片分成两行：
假如屏幕宽度在小于600像素话，网站主导航由平铺变成了下拉：
其实响应式和自适应两种布局方法从外观上很难分辩，但从技术视点来说他们运行的机理不同。所以最终从技术视点再来总结一下两者的差异：
响应式布局不论运用什么设备都是在服务器把数据推送到阅读器后，脚本或CSS自行检测设备屏幕巨细后履行对应的款式表内容，而且一直经过本地脚本在监听屏幕巨细的改变，随时做出款式呼应的改变，这是主动的。
自适应是用户请求访问时会夹藏设备信息，服务器据此做出判别并调适应对应设备款式文件+HTML内容+JS，回来给阅读器以这种方法呼应不同设备。
自适应布局：网页内容和布局彻底相同
能够看出选用自适应布局的话，不论设备屏幕尺度怎样改变，翻开同一个页面看到的内容和布局基本上是相同的，不同的仅仅内容的尺度。
这样就会引发一个问题，那就是假如设备太小，就算网页能够根据屏幕巨细进行适配，可是在太小屏幕显现内容过多会看不清楚，从而极大危害用户体会。
简略来说，网站就根据访客的设备主动改变界面，让访问有良好的体会和操作，咱们总不能电脑的网页直接显现在手机上吧，那是一团糟的，根本不像样。响应式一般与分辩率有关。咱们手机就有N种分辩率，还有横的，竖的，电脑显现器也有大有小，一个网站要应付这么多设备，响应式做得好不好就尤为关键了，这需求很多的作业和精力的。
