响应式设计的步骤

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() 函数返回选择元素的属性值。

和 HTML 自定义属性的功能： HTML 结构

<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.响应式图片