https://blog.csdn.net/u010372981/article/details/47406023
媒体查询就是可以根据设备显示器的特性(视口宽度、屏幕比例、设备方向-横向或者竖向等)为其设定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">
通过导入link标签,媒体查询进行判断,如果当前设备是显示器,而不是打印机等其他的设备,那么就导入screen.css文件,这里要注意media和href的顺序,不要颠倒
之前有写过将media判断print打印机的情况,这样如果是打印机,导入相关css文件,可以在打印的时候添加额外想添加的格式