旨在优化不同上网设备中页面显示的优化
响应式布局：就是根据浏览窗口的尺寸，改变页面的变化
原理：利用css的media-queries判断浏览窗口的尺寸，在CSS样式表中设置一些规则！
例如：
在<style></style>标签中输入如下css3的格式实现：
<style>
body {background:green;} //注意这里不能写成行内样式，使用CSS样式定制样式
@media (max-width:767px) {body{background:red}} //紫色部分表示需要定制的元素的规则
</style>
解读：上面的代码的意思是实现，当浏览窗口尺寸小于767px时，重新设定body标签的样式为字体12像素，背景色变红！
同理：
@media (min-width:767px) {body{background:yellow}}
上面的代码的意思是实现，当浏览窗口尺寸大于767px时，重新设定body标签的样式为字体14像素，背景色变黄！
@media (min-width:767px) and (max-width:1000px) {body{background:blue}}
上面的代码的意思是实现，当浏览窗口尺寸大于767px且小于1000px时，重新设定body标签的样式为字体14像素，背景色变蓝！