一、自定义：
自定义响应式布局主要是媒体查询，通过设置@media来实现响应式布局；
语法结构：@media 设备名only （选取条件） not （选取条件） and（设备选取条件）
示例一：在link 中使用@media：
<link rel=“stylesheet” type=“text/css” media=“only screen and （max-width： 480px），
only screen and （max-device-width： 480px）” href=“link.css”/>
上面使用中only 可省略，限定于计算机显示器，第一个条件max-width 是指渲染界面
最大宽度，第二个条件max-device-width 是指设备最大宽度。
示例二：在样式表中内嵌@media：
@media （ min-device-width:1024px ） and （ max-width:989px ）， screen and
（max-device-width:480px），（max-device-width:480px） and （orientation:landscape），
（min-device-width:480px） and （max-device-width:1024px） and （orientation:portrait）
<meta name=“viewport” content=“width=device-width; initial-scale=1.0”>在页面的head中一定要写：
meta viewport 这个属性是在移动设备上设置原始大小显示和是否缩放的声明。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><!--meta viewport 这个属性是在移动设备上设置原始大小显示和是否缩放的声明-->
<title></title>
<style>
*{
padding:0;
margin:0;
}
.container{
background-color: #ffff00;
margin:auto;
}
header{
width:100%;
height:100px;
background: red;
}
.left-nav{
background: blue;
height:500px;
}
.content{
background: green;
height:500px;
}
.right-aside{
background: bisque;
height:500px;
}
footer{
width:100%;
height:100px;
background: #00ffff;
clear:both;
}
.left-nav input{
display: none;
}
@media screen and (min-width: 992px){
.container{
width:992px;
}
.left-nav{
width:200px;
float:left;
}
.content{
width:500px;
float:left;
}
.right-aside{
width:292px;
float:left;
}
}
@media screen and (min-width:768px) and (max-width:992px){
.container{
width:768px;
}
.left-nav{
width:150px;
float:left;
}
.content{
width:618px;
float:left;
}
.right-aside{
display:none;
}
}
@media screen and (max-width:768px){
.container{
width:100%;
}
.left-nav{
width:100%;
height:50px;
}
.content{
width:100%;
}
.right-aside{
display:none;
}
.left-nav input{
display: block;
}
}
.height{
height:500px;
}
</style>
</head>
<body>
<div class="container">
<header>
</header>
<nav class="left-nav">
<input type="button" value="更多" onclick="more()"/>
</nav>
<section class="content">
</section>
<aside class="right-aside">
</aside>
<footer>
</footer>
</div>
</body>
<script src="../js/jquery-1.9.1.min.js"></script>
<script>
function more(){
$(".left-nav").toggleClass("height");
}
</script>
</html>
最大样式992px：
中等样式768px：
最小样式>768px：
二、Bootstrap响应式布局
通过使用这些工具class可以根据屏幕和不同的媒体查询显示或隐藏页面内容，加速针对移动设备的开发。
尝试使用这些class并避免创建同一个网站的不同版本，从而能够完善不同设备上的显示效果。响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。
栅格布局：
| 超小屏幕设备 手机 (<768px) | 小屏幕设备 平板 (≥768px) | 中等屏幕设备 桌面 (≥992px) | 大屏幕设备 桌面 (≥1200px) | |
|---|---|---|---|---|
| 栅格系统行为 | 总是水平排列 | 开始是堆叠在一起的，超过这些阈值将变为水平排列 | ||
最大.container宽度 |
None (自动) | 750px | 970px | 1170px |
| class前缀 | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
| 列数 | 12 | |||
| 最大列宽 | 自动 | 60px | 78px | 95px |
| 槽宽 | 30px (每列左右均有15px) | |||
| 可嵌套 | Yes | |||
| Offsets | N/A | Yes | ||
| 列排序 | N/A | Yes | ||
在不同的尺寸银幕上显示或是影藏：
| 超小屏幕手机 (<768px) | 小屏幕平板 (≥768px) | 中等屏幕桌面 (≥992px) | 大屏幕桌面 (≥1200px) | |
|---|---|---|---|---|
.visible-xs |
可见 | 隐藏 | 隐藏 | 隐藏 |
.visible-sm |
隐藏 | 可见 | 隐藏 | 隐藏 |
.visible-md |
隐藏 | 隐藏 | 可见 | 隐藏 |
.visible-lg |
隐藏 | 隐藏 | 隐藏 | 可见 |
.hidden-xs |
隐藏 | 可见 | 可见 | 可见 |
.hidden-sm |
可见 | 隐藏 | 可见 | 可见 |
.hidden-md |
可见 | 可见 | 隐藏 | 可见 |
.hidden-lg |
可见 | 可见 | 可见 | 隐藏 |
通过组合栅格式布局和在不同的尺寸的银幕上显示来实现响应式布局：
例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>自定义响应式布局</title>
<link rel="stylesheet" href="css/bootstrap.min.css"/><!--引用bootstrap.css这句必不可少，用于栅格化布局-->
<style>
.header{
height: 100px;
background: greenyellow;
}
.nav{
height: 500px;
background: #ffff00;
}
.section{
height: 500px;
background: green;
}
.aside{
height: 500px;
background: blue;
}
.footer{
height: 100px;
background: blueviolet;
}
.col-xs-nav{
height: 100px;
background: #ffff00;
}
.col-xs-nav-height{
height: 500px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<header class="col-xs-12 header"></header>
</div>
<div class="row" >
<nav class="col-xs-12 visible-xs col-xs-nav"><input type="button" value="more" onclick="more()"/></nav>
<nav class="col-xs-12 hidden-xs col-md-4 col-lg-3 nav"></nav>
<section class="col-md-8 visible-md col-lg-6 visible-lg section"></section>
<aside class="col-lg-3 visible-lg aside"></aside>
</div>
<div class="row" >
<nav class="col-xs-12 visible-xs col-xs-nav"></nav>
</div>
<div class="row">
<footer class="col-xs-12 footer"></footer>
</div>
</div>
</body>
<script src="js/jquery-1.11.2-min.js"></script><!--编写js的框架-->
<script src="js/html5shiv.min.js"></script><!--实现响应式布局的js-->
<script src="js/respond.min.js"></script><!--实现响应式布局的js-->
<script src="js/common.js"></script> <script> function more(){
$(".col-xs-nav").toggleClass("col-xs-nav-height")
}
</script>
</html>
这样的样式同上面的自定义响应式布局的页面样式基本相同；
结论：在使用bootstrap的响应式布局相对于自己写的响应式布局，两者的写代码效率显而易见，因此虽然个人的喜爱不同，但是就我个人而言使用bootstrap的响应式布局的效率要明显高于是用自己编写的响应式布局。
原文：http://www.cnblogs.com/wanb/p/4559009.html