概念
响应型网页设计是Ethan Marcotte提出的第一个概念。 为什么需要为每个用户组制定自己的设计和开发方案呢？ 网页设计必须根据不同的设备环境自动应对和调整。 当然，响应型网页设计不仅是屏幕分辨率的适应性和自动缩放相关的图像等，更像是对设计的新思路。我们必须以向后兼容性、移动性为优先。
背景
PC互联网加速向移动终端转型： 2012年12月底，中国网民规模达到5.64亿，互联网普及率占42.1%，手机用户占网民总数的74.5%。 预计到2015年，移动互联网的数据流量将超过PC端流量。
移动终端门户：当用户想通过手机完成PC页面的操作时，常见的是商家的运营微博，期限副本足以让用户点击链接参与活动。 如果该活动页面没有作出响应处理，页面大、要求多、体验差、兼容性差，受到多重阻碍，最终用户放弃参与。
优点开发成本低，门槛低
本机应用程序：对象cor Java学习成本高
Hybrid APP :案例Web APP，需要安装。
响应web app:html5js CSS门槛低、易用、迭代快
不需要在平台和终端之间分配子域
虽然可以通过监视用户UA来判断用户终端并进行跳转，但是分配了多个域。 响应表达式不需要监视用户UA没有域切换，只需要根据终端类型适应不同的功能模块和表达样式。 这是一个跨平台和终端，它使多个终端适应一个页面。
PChttp://qzone.com
mobilehttp://m.qzone.com
响应表达式： PC mobilehttp://qzone.com无需跳转
本地存储
Web App利用本地存储的特性，可以在本地存储重要数据和重复数据，避免页面重复更新，减少重要信息在传输过程中泄漏，并逐步传输更改。
不需要安装成本，容易反复更新
使用和安装更灵活、更方便的APP是HTML5在移动平台上脱颖而出的保障之一
实施
首先，应该遵循移动优先原则，交互设计应该以移动端为中心，PC作为移动端的扩展
如果一个页面需要与不同的终端兼容，则两个关键点是需要提供响应能力。
响应布局
响应内容(图像、多媒体) )。
响应布局
如果需要不同的屏幕分辨率、清晰度、可调整屏幕方向的垂直屏幕和水平屏幕兼容性，如何在一个设计方案中满足所有情况？
我们的布局必须是灵活的网格布局，并且必须以不同的大小灵活地适应，就像以下页面中每个模块在不同大小的位置一样。
那我们该怎么办呢？
元标记定义
使用视口元标记在手机浏览器中控制布局
快捷方式打开时全屏显示
隐藏状态栏
iPhone将看起来像电话号码的数字添加到电话连接中。 请关闭
布局中常用的CSS介质查询包括
设备类型：
所有所有设备
屏幕计算机显示器
打印打印纸或打印预览
手持手持便携设备
电视型设备
speech语义和音频盒生成器
braille盲人盲文法触觉反馈装置
嵌入式盲文打印机
投影的各种投影设备
tty使用电传打字机和终端等固定密度的文字网格的介质
设备特性(media feature ) :
width浏览器宽度
高浏览器高度
设备宽设备屏幕分辨率宽度值
设备-高设备屏幕分辨率的高度值
如果窗口高度大于或等于宽度，则“orientation”浏览器窗口的垂直还是水平方向为portrait；否则为landscape
外观比例值、浏览器纵横比
设备外观比例值、屏幕长宽比
示例：
/* for 240 px width screen */
@ mediaonlyscreenand (max-device-width :240 px )。
选择程序{ . }
}
/* for 320px width screen */
@ mediaonlyscreenand (最小设备宽度：241 px ) and (最大设备宽度：320 px ) {
选择程序{ . }
}
/* for 480 px width screen */
@media only screen (min-device-width:321px)and (max-device-width:480px){
selector{ ... }
}
适用于布局的 Media Queries 这里不做详述，可通过官方文档进一步了解
那么对于表格(table)的响应式处理该是怎样的呢？我们该如何突破Table的局限性呢？
接下来我们来了解以下的几种针对表格响应式处理的方法：
隐藏不重要数据列
处理前
处理后
实现方法：
@media only screen and (max-width: 800px) {
table td:nth-child(2),
table th:nth-child(2) {display: none;}
}
@media only screen and (max-width: 640px) {
table td:nth-child(4),
table th:nth-child(4),
table td:nth-child(7),
table th:nth-child(7),
table td:nth-child(8),
th:nth-child(8){display: none;}
}
以用户角度思考，每个人对数据的认知不同，或许你隐藏的数据对于他却是很重要的。所以这种方法不推荐。
多列横向变2列纵向
处理前
处理后
实现方法：定位隐藏，变块元素，并绑定对应列名，然后用伪元素的content:attr(data-th)实现
固定首列，剩余列横向滚动
处理前
处理后
实现原理：
thead {float:left;}
tbody {display:block;width:auto;overflow-x:auto;}
栅格框架推荐
响应式图片
带宽是手机终端的硬伤，如果我们只是页面布局做了响应式处理，在我们用手机访问时，请求的图片还是PC上的大图；文件体积大，消耗流量多，请求延时长，因此导致的问题也是不可估量的。那么我们就得把图片也处理成响应式的根据终端类型尺寸分辨率来适配出合理的图形。
处理原理：浏览器获取用户终端的屏幕尺寸、分辨率逻辑处理后输出适应的图片，如屏幕分辨率320*480，那么我们匹配给它的是宽度应小于320px的图片。如果终端屏幕的DPI(device pixels)DPI详解值很高，也就是高清屏，那么我们就得输出2倍分辨率的图形(宽:640px)；以保证在高清屏下图形的清晰度。各种移动终端的屏幕参数可通过http://screensiz.es/phone查询。
解决方案：其实W3C已经有一个用于响应式图形的草案：
是一个图形element，内容由多个源图组成，并由CSS Media Queries来适配出合理图形，代码规范如下：
Accessible text
source: 一个图片源；media: 媒体查询，用于适配屏幕尺寸；srcset: 图片链接，1x适应普通屏，2x适应高清屏；
: 当浏览器不支持脚本时的一个替代方案；: 初始图片；另外还有一个无障碍文本，类似的alt属性。目前还不支持，但它的原理我们是可借鉴的，所以就诞生了一个用于图片响应式处理的类库Picturefill
其原理就是JS获取Source的源以及CSS Media Queries规则，输出适应图片， 逻辑细节这里不再解析，感兴趣的可查看其JS代码，逻辑不是很复杂，也可以自己封装一个类库，以适用于自身产品，例如图片加载失败的替代方案。
当然，在未来的 CSS Image Level 4 中已经实现了响应式图片的原生语法：image-set
= image-set([ , ]* [ | ])
= [ | ]
那么我们的响应式图片可以这样重写了
background-image:url(default.jpg); /* 普通幕 */
background-image: -webkit-image-set(url(medium.jpg) 1x, url(large.jpg) 2x); /* Retina高清屏 */
注：Webkit 目前只实现了 url() 形式的取值，且dppx值取负值[-2x]貌似也是合法的。
当然除此之外，还有其他的响应式处理，如服务端user-agent嗅探
高分辨率(DPI)下的响应式处理
SVG：优点可承载色彩丰富、设计复杂图形，且渲染不会出现边缘不顺滑；缺点是IE的支持不完美，在我大中华这是硬伤。
Icon fonts：支持多浏览器，图形颜色大小的修改成本低，易于维护；图形表现单一，不支持色彩丰富且复杂的图形，IE6渲染有毛边。
-webkit-image-set:只支持单个图形的适配，不利于图形合并，兼容不完美(Safari 6+, Chrome 21+)
JS检测：var retina = window.devicePixelRatio > 1;
CSS Media Query:
@media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) /* dppx fallback */
高分辨率下的1px border
由于高清屏的特性，1px是由2×2个像素点来渲染，那么我们样式上的border:1px在Retina屏下会渲染成2px的边框，与设计稿有出入，为了追求1px精准还原，我们就不得不拿出一个完美的解决方案
在Photoshop中，如果需要看似0.5px的边框，常见的方法就是对1px边框加上阴影模糊1px。同理，我们在retina屏下需要做到真实的1px边框，可利用box-shadow属性模拟。
@media only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
button {
border:none;
padding:0 16px;
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
}
}
留给我们的思考
响应式不只是技术的实现，它更像是一种对于设计的全新思维模式
浏览的体验短期内还无法超越原生应用
左手操作习惯的交互
Webapp的消息推送
调用本地文件系统的能力弱
响应式图片的解决方案
对PC事件的兼容
WebAPP页面体积的响应式适配
代码实现和内容可维护性之间的权衡
控制设计开发成本
实用技巧
点击区域不限于元素的视觉区域，便于用户点击。同时排版不受限制，可以达到原生App的视觉效果。
气泡框可以减少页面跳转，适合消息提醒等微任务的处理。
信息架构上越来越接近原生App，有利于扁平化层级关系和减少界面跳转等设计元素将得到更多的应用。
识别更多的手势操作，如下拉刷新和右滑存档等平移手势。操作不必全部呈现在界面中，和平台操作保证一致。
调用系统硬件，如重力感应等传感器、多媒体设备，不过在手机端还鲜有应用案例，离大规模应用还有一定的距离。