前端开发响应式设计之媒体查询（bootstrap）

媒体查询就是可以根据设备显示器的特性（视口宽度、屏幕比例、设备方向-横向或者竖向等）为其设定CSS样式

为什么响应式设计需要媒体查询？因为没有CSS3的媒体查询模块，就不能针对设备特性（尤其是视口宽度）设置特定的CSS样式

bootstrap.css文件最后的若干行，就是有关媒体查询的代码，先暂时不看他的源码，看下面的简单的css示例代码：

body {
	background-color: white;
}
@media screen and (max-width: 960px){
	body {
	background-color: red;
}
}
@media screen and (max-width: 768px){
	body {
	background-color: yellow;
}
}
@media screen and (max-width: 550px){
	body {
	background-color: green;
}
}
@media screen and (max-width: 320px){
	body {
	background-color: blue;
}
}
           

给元素body定义了背景颜色白色，媒体查询查看当前是否是显示器screen，判断正确之后，再去查看当前screen的大小，根据不同的大小覆盖当前body背景颜色

上面的代码就是仿照bootstrap写的CSS3文件

媒体查询只有CSS3才有么，其实CSS2的时候就有这个了

<link rel="stylesheet" type="text/css" media="screen" href="screen.css" target="_blank" rel="external nofollow" >
           

通过导入link标签，媒体查询进行判断，如果当前设备是显示器，而不是打印机等其他的设备，那么就导入screen.css文件，这里要注意media和href的顺序，不要颠倒

之前有写过将media判断print打印机的情况，这样如果是打印机，导入相关css文件，可以在打印的时候添加额外想添加的格式