标签：
概述：响应式布局是Ethan Marcotte在2010年五月提出的一个概念，简单的说，就是一个网站能够兼容多个终端——而不是为每一个终端做一个特定的版本页面，这个概念是为了解决移动端互联网浏览器而产生的 。响应式布局不仅可以解决一个网站能够兼容多个终端的问题，还可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着大屏幕移动设备的开发和普及，响应式布局的发展可以用“大势所趋”来形容，随着越来越多的IT前端工程设计师采用这个技术，我们不仅看到很多的创新，还看到了一些已经成形的模式。
响应式的优势：
1.在对不同分辨率的设备的灵活性更强（例如：移动端和PC端）；
2.能很好的解决各种设备因为显示器分辨率大小而造成的各种显示问题。
响应式的劣势：
1.兼容各种设备的工作量大，效率相对较低。
2.代码太多，加载页面时间过长，还会出现隐藏无用的元素。
到目前为止，我们学习了用CSS3和bootstrap两种形式的响应式布局，充分体会认识到了响应式布局的优点，同时也暴露了它的缺点。
Bootstrap响应式布局
Bootstrap不仅在布局上对我们有很大帮助，在响应式布局也有自己独特的风格
. col-xs-:超小屏幕设备（手机），设备显示器768px以下（移动端）；
. col-sm-:小屏幕设备（平板），设备显示器最小768px,最大992px；
. col-md-:中等屏幕设备（桌面），设备显示器最小992px,最大1200px；
. col-lg-: 大等屏幕设备（桌面），设备显示器最小1200设备；
例如：
<!DOCTYPE html>
<html>
<head lang="en">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-1.11.2-min.js"></script>
<script src="js/bootstrap.min.js"></script>//引入bootstrap中的文件
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->//为了兼容IE9以下的浏览器
<style>
header{
height: 100px;
background: blue;
}
.left_nav_xs{
height: 50px;
background: #ff97f0;
}
.left_nav{
height: 100px;
background: #ff97f0;
}
section{
height: 100px;
background: #ffff00;
}
aside{
height: 100px;
background: saddlebrown;
}
footer{
height: 100px;
background: #9eff45;
}
.hehe{
height: 100px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<header class="col-xs-12"></header>
</div>
<div class="row">
//移动端nav，显示菜单按钮，将导航条隐藏，点击菜单按钮，显示下拉框的导航条。
<nav class="col-xs-12 visible-xs left_nav_xs">
<input type="button" value="菜单" onclick="z1()"/>
</nav>
<nav class="col-sm-4 col-md-3 hidden-xs left_nav">
</nav>
<section class="col-xs-12 col-sm-8 col-md-5"></section>
<aside class="hidden-xs hidden-sm col-md-4"></aside>
</div>
<div class="row">
<footer class="col-xs-12"></footer>
</div>
</div>
<script>
function z1(){
$(".left_nav_xs").toggleClass("hehe")
}
</script>
</body>
</html>
visible
.visible-xs:只有在屏幕小于768px的超小屏幕的时候才会显示，大于768px都是隐藏的。
.visible-sm:只有在屏幕大于768px同时小于992px的小屏幕的时候才会显示，小于768px或者大于992px都会隐藏的。
.visible-md:只有在屏幕大于992px同时小于1200px的中等屏幕的时候才会显示，小于992px或者大于1200px都会隐藏的。
.visible-lg:只有在屏幕大于1200px的超大屏幕的时候才会显示，小于1200px都是隐藏的。
hidden
hidden和visible刚好相反，带有visible的标配表示为显示，hidden则是隐藏。
. hidden-xs:只有在屏幕小于768px的超小屏幕的时候才会隐藏，大于768px都是显示的。
. hidden-sm:只有在屏幕大于768px同时小于992px的小屏幕的时候才会隐藏，小于768px或者大于992px都会显示的。
. hidden-md:只有在屏幕大于992px同时小于1200px的中等屏幕的时候才会隐藏，小于992px或者大于1200px都会显示的。
. hidden-lg:只有在屏幕大于1200px的超大屏幕的时候才会隐藏，小于1200px都是显示的。
除了bootstrap以为，还有很多种方式的响应式布局，需要我们在以后的工作和学习中慢慢学习和应用。
标签：
原文地址：http://www.cnblogs.com/z5206808/p/4558770.html
