响应式布局应该包括以下几点：
1、CSS3.0媒介查询；
我们所做的html文件都是在浏览器的解析下显示的，在PC端，在手机浏览器中都是可以的，唯一所不同的就是浏览器的视界窗口不同而已。在css3中使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果。我们所要做的就是在页面中的<head>标签之中加入<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> ；
当然我们的css3媒介查询是建立在支持css3的基础上，支持CSS3的浏览器的情况看下图；
再看下css3.0媒介查询的使用，通过在不同宽度的情况下，使用不同的样式，页面自适应布局；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=0">
<title>改变窗口大小有惊喜</title>
<style type="text/css">
body {
background-color: grey;
}
@media screen and (max- 960px) {
body {
background-color: red;
}
}
@media screen and (max- 768px) {
body {
background-color: orange;
}
}
@media screen and (max- 550px) {
body {
background-color: yellow;
}
}
@media screen and (max- 320px) {
body {
background-color: green;
}
}
</style>
</head>
<body>
<p>改变窗口大小有惊喜哟！</p>
</body>
</html>
2、百分比对应绝对像素宽度；
在响应式布局中，我们一般会使用max-width属性来约束页面的最大宽度，然后在此情况下做百分比宽度；当然这个百分比的使用，遵循一个原则：目标元素宽度÷上下文元素宽度=百分比宽度，如我们总的宽度在980px的情况下再定位一个居中块级宽度为960px的元素，这时候用960/980 得到即为百分比的数值；
3、字体单位em对应觉得像素px；
字体的定值大小不能为绝对像素px，要用相对像素单位em，具体计算方式请参阅这片博客，做一个引路人强大的em;
4、自适应图片；
自适应图片属性：
img {
border: 0;
max- 图片本来像素大小
百分比
}
当然图片的大小要通过所处上下文的情况的；
5、display属性的灵活利用；
在移动前端布局中，display属性可以简化很多复杂的布局，上一篇博客讲到细说CSS中的display属性，另外我们还提供一种自适应布局，display: flex；具体请参考flex属性；
6、万能的max-width；
max-width的使用其实很简单,灵活使用可以使我们的页面适应不那么僵硬！