html5响应式布局现今是非常流行的，但是很多人连html5响应式布局的框架都不会搭建，也不知道从何下手，所以本套教程将简单带大家进入响应式布局的大门，先来了解html5响应式布局的历史吧！
响应式布局来源
响应式布局是在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端设备，而不是为每个终端做一个特定的版本。这个概念是为移动互联网而诞生的，其目的就是为用户提供更加舒适的界面以及更好的体验。
响应式布局的优缺点
优点：
面对不同分辨率设备灵活性强
能够快速解决多设备显示适应问题
缺点：
兼容各种设备效率低下，并且工作量较大
代码累赘，会出现隐藏无用的元素，浏览器加载时间变长
HTML5响应式布局入门
响应式布局无非就是当设备屏幕分辨率大于多少的时候，定义一套CSS样式；当设备屏幕分辨率小于多少的时候，定义另外一套CSS样式，下面的案例是：当屏幕分辨率大于640px的时候，网页背景显示黄色，当小于640px的时候，网页背景显示红色。
代码如下：
假如有一个外部CSS文件，文件名为style.css，内部css代码如下：
*{
margin: 0px;
padding: 0px;
}
body{
background-color: red; //背景色为红色
}添加一个index.html文件，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="style.css" type="text/css" rel="stylesheet" media="only screen and (max-width:640px)"/>
<style>
@media screen and (min-width:640px){
body{
background-color: yellow; //背景色为黄色
}
.....其它css
}
</style>
</head>
<body>
</body>
</html>代码分析：
外部CSS文件引入的时候添加了一个media="only screen and (max-width:640px)属性内容，表示的是这个style.css里面的样式起作用的最大设备分辨率为640px，如果小于640px，则网页背景色会变成红色。如果超过了640px，这个css文件里面定义的样式将不会起作用，也就是网页的背景色不会变成红色。
index.html里面的@media screen and (min-width:640px)表示的是起作用的最小设备宽度为640px，如果小于640px，网页背景色就不会变成黄色。只有设备屏幕大于640px的时候，里面的css样式才会起作用，也就是网页背景色变成了黄色。
提示：
自己根据上方的代码做一个html5响应式布局小案例吧！只有尝试了才会体会到响应式布局的快感！