响应式布局概念：简单来讲，就是做一个网站同时能兼容多个终端，由一个网站转变成多个网站，为大大节省了资源和开发时间。
响应式布局的优/缺点：
优点：1.面对不同分辨率设备灵活性强
2.能够快捷解决多设备显示适应问题
缺点：不能完全兼容所有浏览器，代码累赘，加载时间加长。
说了这么多，响应式布局该怎么去做，可能还有很多人不清楚，那么它的开发原理是什么？
简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来判断用户终端设备宽度在多少像素内，然后就加载与之对应的CSS样式。下面就以一个简单的响应式布局框架为案列，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>响应式布局</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin:0;
padding:0;
text-decoration:none;
list-style:none;
font-size:14px;
font-family:"微软雅黑";
text-align:center;
color:#fff;
}
.clear{clear:both;}
#header,#content,#footer{margin:0 auto;margin-top:10px;}
#header,#footer{margin-top:10px;height:100px;}
#header,#footer,.left,.right,.center{background:#333;}
/*通用样式*/
/*手机 当屏幕宽度小于600px的时候显示的样式*/
@media screen and (max-width:600px){
#header,#content,#footer{width:400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
/*平板 当屏幕宽度大于等于600px小于960px的时候显示的样式*/
@media screen and (min-width:600px) and (max-width:960px){
#header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
}
/*PC 当屏幕宽度大于等于960px的时候显示的样式*/
@media screen and (min-width:960px){
#header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;}
}
</style>
</head>
<body>
<div id="header">header</div>
<!--end header-->
<div id="content">
<div>left</div>
<div>center</div>
<div>right</div>
<div></div>
</div>
<!--end content-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>
通过上面代码可以看到：通过@media 查询判断来执行的CSS样式。 也就是说：如果要做一个响应式布局网站，同时兼容手机、平板、PC的话就得写三个与之对应的CSS样式，通过@media媒介查询来完成响应式布局。
需要注意的是：在手机设备上，必须要禁止屏幕缩放功能。不禁止的话，可能在显示上会造成错位，以及显示的异常的样式。所以，要通过代码来禁止用户在手机端上缩放屏幕，达到正常的手机网站效果，禁止代码如下:
<metaname=“viewport” content=“width=device-width; initial-scale=1.0”>
加在头部标签里