标签：
backbone
基于MVC的前端框架--还是要编写DOM
React
基于mvc的js的框架--还是要编写DOM
（速度快、小巧）
响应式布局
同一个页面根据不同的屏幕和分辨率，自动调整页面大小，就叫相应式布局。
DIV+CSS
用最大的屏幕宽度和分辨率
>=992px 电脑
768px---992px 平板
<=768px 手机
ie浏览器在支持响应式布局时，需要使用外联的CSS
1、定义css的样式
电脑屏幕
@media screen and (min-width: 992px){
#index{width: 992px;}
}
平板屏幕
@media screen and (min-width: 768px) and (max-width: 992px){
#index{width: 768px;}
}
手机屏幕
@media screen and (max-width: 768px){
#index{width: 100%;}
}
2、添加JS文件
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/index.css"/>
兼容IE6、7、8
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
bootstrap
响应式工具目前只是针对块级元素， 不支持inline元素和表格元素。
1、定义css的样式
2、添加JS文件
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="css/index.css"/>
<script src="js/bootstrap.min.js"></script>
兼容IE6、7、8
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script src="js/jquery-1.9.1.min.js"></script>
在设置xs/sm/ms/lg的时候，如果没有设置大小都以比它小的屏幕宽度进行显示。
（设置大小的时候，以设置最小的大小。）
需要注意的是，需要实现点击改变形状的，需要加载jquery文件。
$("p").toggle("slow");
如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
这样就能实现点击的时候，出现，再次点击的时候就隐藏。
标签：
原文地址：http://www.cnblogs.com/liner730/p/4715002.html
