一、什么是响应式布局

CSS3响应式布局是指同一页面在不同的浏览器窗口尺寸下展示不同的布局方式。
传统的开发方式是PC端一套代码，移动端再开发另一套代码。而响应式只需要一套代码就可以了，既可以适用于PC短端也可以适用于移动端。

响应式布局的缺点是需要的css比较多。

二、实现响应式的方案

1、方案一：媒体查询

最好用最常用的方案。媒体查询可以规定元素在页面对应的尺寸展示对应的css样式。

       /*
        媒体类型：
            screen  用于电脑屏幕，平板电脑，智能手机等。
            all  用于所有设备
            （一般选用这两个值之一即可，其他值大部分被废弃或者用不到）
        and：
            每一个值之间的链接符号
        */
     
        /*初始样式*/
        body{background-color: #aaa;}
     
     
        /*屏幕宽度 小于700px 时*/
        @media screen and (max-width: 700px ){
            body{ background-color: #1dba2d;}
        }
     
        /*屏幕宽度 大于700px 且 小于900px 时*/
        @media screen and (min-width: 700px) and (max-width: 900px ){
            body{ background-color: #3f1dba;}
        }
     
        /*屏幕宽度 大于900px 且 小于1200px 时*/
        @media screen and (min-width: 900px) and (max-width: 1200px ){
            body{ background-color: #ba1d54;}
        }
     
        /*屏幕宽度 大于1200px 时*/
        @media screen and (min-width: 1200px ){
            body{ background-color: #ba931d;}
        }

2、方案二：百分比布局

尽量不实用固定的宽度，用百分比代替，从而做到随窗口缩小布局变化。但是适用性并不高，做出来的页面每时每刻都在变各种布局文字等看起来不好看。一般会配合着媒体查询在某些局部的布局使用。

3、方案三：rem

rem是一个相对单位， 1rem = html的font-size大小。所以可以通过js在改变页面宽度时修改html的font-size，从而做到改变页面中所有rem单位对应的样式。同方案二，适用性并不高，某些布局中宽高字体等大小不太好控制。

三、HTML5新增标签

下面列举几个较为常用的标签，其他不常用的标签大家可查阅W3C了解。

1、结构性语义化标签

2、视频音频标签

video视频标签 的标签属性

● src
设置路径。

● width/height
设置标签的大小，类似于img，但是不会使视频文件拉伸。

● controls
无须值，有该属性则 显示视频控制面板。

● muted
无须值，有该属性则 静音。

● autoplay
无须值，有该属性则 自动播放。chrome为了用户体验不允许自动播放，但是允许静音下自动播放。

● loop
无须值，有该属性则 放完之后循环播放（默认是放完了停止）。

● poster
设置封面海报，需要指定一个图片地址。

poster=‘url’

● preload
设置页面加载后是否加载视频（当设置了autoplay时，此属性会被忽略）：

auto - 加载整个视频
metadata - 加载元数据（视频时长、尺寸大小等）
none - 不加载视频

audio音频标签 的标签属性

与video标签基本一毛一样……当然，audio不支持 width、height，不支持海报poster，chrome也不支持静音播放