通常认为，响应式设计是指根据不同设备浏览器尺寸或分辨率来展示不同页面结构层、行为层、表现层内容的设计方式。
一是通过前端或后端判断userAgent来跳转不同的页面完成不同设备浏览器的适配，也就是维护两个不同的站点来根据用户设备进行对应的跳转。缺点：跳转会有一定的网络消耗。二是使用mediaquery媒体查询等手段，让页面根据不同设备浏览器自动改变页面的布局和显示，但不做跳转。适用于访问量较小、性能要求不高的应用场景。
下面我们来看看在响应式的三层结构上具体能做什么处理。
结构层响应式
结构层响应式设计可以理解成HTML内容的自适应渲染实现方式，即根据不同的设备浏览器渲染不同的页面内容结构，而不是直接进行页面跳转。
结构层数据内容响应式
首先要保证移动端加载的内容资源最小，因此会以移动端优化资源为主，保证移动端页面的首屏优先加载，然后通过异步的方式来实现桌面端剩余内容的加载。
后端数据渲染响应式
后端数据渲染响应式可以完全将桌面端页面和移动端页面结构层分开管理了,不仅可以复用共同的基础组件,还可以差异化开发不同的业务组件,Javascript资源和CSS资源也是完全分开加载的,实现两个端加载内容的相互独立。
结构层媒体响应式
通常在我们手机访问网页时,请求的图片可能还是加载了与桌面端浏览器相同的大图,文件体积大,消耗流量多,请求延时长。媒体响应式要解决的一个关键问题就是让浏览器上的展示媒体内容尺寸根据屏幕宽度或屏幕分辨率进行自适应调节。当然这里提到的媒体主要是指图片,即我们需要根据浏览器设备屏幕宽度和屏幕的分辨率来加载不同大小尺寸的图片,避免在移动端上加载体积过大的资源。
结构层响应式
这里至少要了解两个方面的内容:响应式布局和屏幕适配布局。
响应式布局
响应式布局是根据浏览器宽度、分辨率、横屏、竖屏等情况来自动改变页面元素展示的一种布局方式,一般可以使用栅格方式来实现,实现思路有两种:一种是桌面端浏览器优先,扩展到移动端浏览器适配;另一种则是以移动端浏览器优先,扩展到桌面端浏览器适配。由于移动端的网络和计算资源相对较少,所以一般比较推荐从移动端扩展到桌面端的方式进行适配,这样就避免了在移动端加载冗余的桌面端CSS样式内容。
屏幕适配布局
屏幕适配布局则是主要针对移动端的,由于目前移动端设备屏幕大小各不相同,屏幕适配布局是为了实现网页内容根据移动端设备屏幕大小等比例缩放所提出的一种布局计算方式。屏幕适配布局又分两种解决方案，zoom属性控制方案和REM屏幕适配方案。
行为层响应式
在页面的响应式设计中，行为层脚本也是需要根据浏览器环境来执行不同逻辑的，和结构层类似，行为层的响应式同样氛围JavaScript内容在前端引入和在后端引入这两种情况。对于前一种情况，我们主要可以通过设备浏览器环境判断来异步加载不同的JavaScript脚本，这里不做过多讲解。