第一步：流式布局
实例======》
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
float: left;
width: 30%;
height: 100px;
margin: 10px;
}
#div1{
background-color: #006699;
}
#div2{
background-color: #ff6666;
}
#div3{
background-color: #ffff00;
}
</style><body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
第二部：谋体查询
div{
float: left;
width: 30%;
height: 100px;
margin: 10px;
}
@media only screen and (max-width: 600px) {
div{
width: 95%;
}
}
第三部：meta标签设置<meta name="viewport" content="width=device-width, initial-scale=1.0" />
原文：http://www.cnblogs.com/yzhong/p/5030694.html