响应式布局

响应式设计的步骤
1、布局及设置meta标签
这将设置屏幕按1：1的尺寸显示，在 iPhone 和其他智能手机的浏览器提供网站全视图浏览，并禁止用户缩放页面。

viewport是网页默认的宽度和高度，网页宽度默认等于屏幕宽度（width=device-width）,原始缩放比例为1（initial-scale=1）,即网页初始大小占屏幕面积的100%；user-scalable属性能够解决ipad切换横屏之后触摸才能回到具体尺寸的问题。所有主流浏览器都支持这个设置；

老式的浏览器，需要使用以下方法；

<!–[if lt IE 9]><![endif]–>

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 结构

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