##从前端技术来谈，响应式设计通常包括：

• 流式布局或响应式栅格 –> 适应不同的屏幕宽度
  http://www.chinaz.com/design/2010/0716/120921.shtml
  流动/流体布局（Fluid/Liquid Layout）

  流体布局，也被成为流体布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。
  

  

  上图是一个简单流动（流体）布局的轮廓。虽然有些设计师可能给流动布局中某些元素设置了固定宽度，比如margin，只要主体元素是百分比宽度，就可以让布局自适应适应各种分辨率。
  

  响应式栅格

  比起流式栅格系统就多了一个媒体查询
  可以改变 row 的大小
  Bootstrap 就是用了 响应式栅格
  

• CSS3 media queries 技术即媒体查询技术针对不同尺寸甚至不同类型屏幕实现一套代码多套布局或者进行样式微调
• 使用流式图片（fluid images/弹性图片）以充分利用屏幕空间
  http://www.xingzai.org/web-design/elastic-picture-for-web-design.html
• 配合后端抽象出 HTML 模块，输出针对不同类型设备适配后的模板、CSS、Javascript 或者其他资源
• 视口（viewport）

将 meta 标签里面的 name 属性设置为 viewport ，viewport 分为可见视口（visual viewport） 和 布局视口(layout viewport) 两种
width：布局视口的宽度 ，可设为一个具体的长度，也可以设为 device-width.
layout viewport 是由浏览器厂商规定的，一般是 980 px.

http://caibaojian.com/356.html

###移动优先（moblie first）理念