响应式开发

媒体查询

@media screen and (min-width:992px) and (max-width:1200px){
/*由于样式覆盖，后面的and  可以不写*/
	.container {
		width: 970px;
	}
}

@media screen and (min-width:1200px){
/*可以简写为 @media (min-width:1200px) {}*/
	/*样式*/
	.container {
		width: 1170px;
	}
}

简化代码使用bootstrap

移动端web开发和响应式开发都是现在主流的开发模式
使用的都是流式布局，来适配不同的设备
新建网站优先使用响应式开发： bootstrap

使用bootstrap，需先引入jquery。

h5标签和媒体在ie8 以下存在兼容问题，所以引入以下两个：
html5shiv 是解决标签兼容问题
respond.js 是解决媒体查询的问题，但是页面不能以file://的形式打开，需要用http的形式打开
用条件注释引入：<!-- [if lt IE 9]> <![endif]-->