响应式设计的步骤
1、布局及设置meta标签
这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1.0,user-scalable=no">
viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（width=device-width）,原始缩放比例为1（initial-scale=1）,即网页初始大小占屏幕面积的100%；user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。所有主流浏览器都支持这个设置；
老式的浏览器，需要使用以下方法；
<!–[if lt IE 9]><script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script><![endif]–>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
2、通过媒体查询来设置样式media query(核心)
假如一个终端的分辨率小于980px，那么可以这样写
@media screen and (max-width:980px){
#head { … }
#content { … }
#footer { … }
}这里面的样式会覆盖掉之前所定义的样式。
3、设置多种视图宽度
假如我们要兼容ipad和iphone视图，我们可以这样设置：
/**ipad**/
@media only screen and (min-width:768px)and(max-width:1024px){}
/**iphone**/
@media only screen and (width:320px)and (width:768px){}
4、字体设置
平常用的是em;相对大小。
响应式设计需要注意的问题
1、宽度不固定，可以使用百分比
设置宽度时只能指定百分比宽度：width:xx%; width:auto;
2、图片处理（图片液态化）
可以尝试给图片指定的最大宽度为百分比。假如图片超过了，就缩小。假如图片小了，就原尺寸输出。
用::before和::after伪元素 +content 属性来动态显示一些内容或者做其它很酷的事情，在 css3 中，任何元素都可以使用 content 属性了，这个方法就是结合 css3 的 attr 属性
attr() 函数返回选择元素的属性值。
<img src="image.jpg" data-src-600px="image-600px.jpg" data-src-800px="image-800px.jpg" alt="">
CSS 控制：
@media (min-device-width:600px) { img[data-src-600px] { content: attr(data-src-600px, url); }}@media (min-device-width:800px) { img[data-src-800px] { content: attr(data-src-800px, url); }}
background-size:cover; 等比扩展图片来填满元素
background-size:contain; 等比缩小图片来适应元素的尺寸
3、流动布局
指的是页面的各个区块 都要设置float.位置不是固定不变的。
好处是，不会出现溢出（overflow）现象，避免了水平滚动条的出现。
绝对定位的使用必须非常小心。（position:absolute;）
首先我们应该遵循移动端优先，交互和设计以移动端为主，pc则作为移动端的扩展，一个页面需要兼容不同终端，那么有两个关键点是我们需要去做到响应式的：响应式布局和响应式内容（图片、多媒体）
1.响应式布局
1.Meta标签定义
2.使用Media Queries适配对应样式
2.响应式内容
1.响应式图片
