随着互联网的高速发展，以及html5+css3的迅速崛起。渐渐的响应式布局，也会慢慢的出如今我们的视野里，身为专业的web前端，还不学习新技术你就out啦！为什么这样说呢？由于响应式布局能同一时候兼容多个终端，比方（手机、平板、PC）做一个站点转眼间就能够变成3个站点，和如今相比是不是更加具有优势呢!
可能有些人对“什么是响应式布局”还不是非常了解，以下就跟大家简单说下什么是响应式布局：
响应式布局：简单点说，就是做一个站点同一时候能兼容多个终端，由一个站点转变成多个站点，为我们大大节省了资源。
那么响应式布局的长处和缺点又有哪些呢？
长处：1.面对不同分辨率设备灵活性强
2.可以快捷解决多设备显示适应问题
缺点：不能全然兼容全部浏览器，代码累赘，载入时间加长。
说了这么多，可能还有非常多人，不明确响应式布局该怎么去做，以及它的开发原理是什么？
原理：简单点说响应式布局它是通过CSS中Media Query（媒介查询）@media功能，来推断我们的终端设备宽度在多少像素内，然后就运行与之相应的CSS样式。
以下我就以我近期做的一个简单的响应式布局框架为案列给大家讲讲：
代码例如以下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="gb2312">
<title>响应式布局</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<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;}
/*通用样式*/
/*手机*/
@media screen and (max-600px){
#header,#content,#footer{400px;}
.right,.center{margin-top:10px;}
.left,.right{height:100px;}
.center{height:200px;}
}
/*平板*/
@media screen and (min-600px) and (max-960px){
#header,#content,#footer{600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{160px;margin-right:10px;}
.center{430px;}
}
/*PC*/
@media screen and (min-960px){
#header,#content,#footer{960px;}
.left,.center,.right{height:400px;float:left;}
.left{200px;margin-right:10px;}
.center{540px;margin-right:10px;}
.right{200px;}
}
</style>
</head>
<body>
<!--header start-->
<div id="header">header</div>
<!--end header-->
<!--content start-->
<div id="content">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
<div class="clear"></div>
</div>
<!--end content-->
<!--footer-->
<div id="footer">footer</div>
<!--end footer-->
</body>
</html>
通过上面代码可知：它是通过@media媒介查询推断来运行的CSS样式，也就是说：假设我要做一个响应式布局站点，同一时候兼容手机、平板、PC的话就得写三个与之相应的CSS样式，通过@media媒介查询来完毕响应式布局。
值得注意的是：在手机设备上，我们要禁止用户来缩放屏幕。不禁止的话，可能在显示上会造成错位，以及显示的不是手机站点的样式。所以，我们要通过代码来禁止用户在手机端上缩放屏幕，已达到正常的手机站点效果。
禁止代码例如以下：<meta name=“viewport” content=“width=device-width; initial-scale=1.0”> 加在头部标签里
写在最后：以上纯属个人对响应式布局的理解，随着技术的更新，我们还不学习一些新技术，那么等待我们的就是淘汰。
本文由段亮博客原创出品，如需转载请注明出处