响应式布局的开发背景：
1.了解常用移动便携设备尺寸：http://xiangying.pintuer.com/
随着各种尺寸的手机、pad的普及，普通的网站对于这些持有移动设备的用户来说，访问无疑是困难的。传统的布局已经无法满足一套代码适应所有设备的要求，而为每一种设备去单独写一套代码又不好维护。为解决移动互联网浏览，响应式布局应运而生。
2.优势和缺点：
优点：
a.面对不同分辨率设备灵活性强;b.能够快捷解决多设备显示适应问题，达到多终端视觉和操作体验风格统一;c.各个设备都使用这一份代码，节约开发成本，维护成本较轻松。
缺点：
1.需要兼容各种设备导致工作量大，效率低下;2.因而代码累赘，加载时间较长。
3.如何设计：
对于一行显示多列内容时，可以做如下处理：我个人简称：1 3 1，1 2 1，1 1 1 1 1布局，注意，对于分辨率小的设备，也可以将不重要的列省略掉（display：none）
4.如何是实现：
a.媒体查询的语法结构：@media 设备类型 only (选取条件) not (选取条件) and (设备特性)，设备二 { 样式代码 }
b.网页总体框架可以使用绝对宽度，但往下的内容框架、侧栏等布局用相对宽度，有利于针对不同分辨率进行修改。
c.内容不要使用绝对字体（px），而要使用相对字体（em），对于大多数浏览器来说，通常用 em = px/16 换算，例如16px就等于1em。
注意：
中间必须留空格（亲测）。
5.如何调试：
chrome--F12，点击调试窗口左上角第二个图标，可手动更改设备尺寸。
代码如下：针对上图的三种设备大小设计：
<!doctype html>
<head>
<meta charset="utf-8">
<title>media test</title>
</head>
<style>
body, h2 {
margin: 0px;
padding: 0px;
color: white
}
section#main, header, aside, footer {
background: #333;
margin: 5px 0;
}
h2 {
text-align: center;
font-size: 3em;
}
section#container {
margin: 0 auto;
960px;
}
header {
float: left;
100%;
line-height: 100px;
}
aside#left {
float: left;
200px;
line-height: 400px;
}
section#main {
float: left;
540px;
line-height: 400px;
margin-left: 10px;
}
aside#right {
float: right;
200px;
line-height: 400px;
}
footer {
float: left;
100%;
line-height: 100px;
}
/*1000px 以上屏幕如何显示*/
@media screen and (min- 1000px) {
h2 {
color: yellow;
font-size: 4em;
}
section#container {
1160px;
}
section#main {
640px;
}
aside#right {
300px;
}
}
/*pad 640-1000*/
@media screen and (min- 640px) and (max- 1000px) {
h2 {
color: deeppink;
font-size: 2.5em;
}
section#container {
640px;
}
aside#left {
160px;
}
section#main {
430px;
}
aside#right {
display: none;
}
}
/* phone 640px lt max-639px */
@media screen and (max- 639px) {
h2 {
color: green;
font-size: 1.5em;
}
section#container {
400px;
}
aside#left {
float: left;
line-height: 50px;
100%;
}
section#main {
float: left;
line-height: 100px;
100%;
margin-left:0px;
}
aside#right {
float: left;
100%;
line-height:50px;
}
}
</style>
<body>
<section id="container">
<header>
<h2>header</h2>
</header>
<aside id="left"><h2>Left</h2></aside>
<section id="main"><h2>Main</h2></section>
<aside id="right"><h2>Right</h2></aside>
<footer><h2>Footer</h2></footer>
</section>
</body>