一. 媒体查询作用？
一个媒体查询由一个可选的媒体类型和零个或多个使用媒体功能的限制了样式表范围的表达式组成，例如宽度、高度和颜色。媒体查询，添加自CSS3，允许内容的呈现针对一个特定范围的输出设备而进行裁剪，而不必改变内容本身。
二. 在哪里使用媒体查询？
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
<style>
@media (max-width: 600px) {
.facet_sidebar {
display: none;
}
}
</style>
三. 基本语法
@media 媒体类型 and （媒体特性）{
样式
}
四. 逻辑操作符
| 操作符 |
描述 |
and |
合并多条 |
not |
取非 |
only |
防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式 |
，（相当于or） |
或运算 |
五. 媒体类型与媒体特性
| 常用媒体类型 |
描述 |
| all |
所有设备 |
| print |
用于打印机和打印预览 |
| screen |
用于电脑屏幕，平板电脑，智能手机等。 |
| speech |
应用于屏幕阅读器等发声设备 |
| 常用媒体特性 |
描述 |
| max-width / max-height |
最大宽高，当前设备小于该值时生效 |
| min-width / min-height |
最小宽高，当前设备大于该值时生效 |
| min-resolution / max-resolution / resolution |
分辨率 |
| aspect-ratio / max-aspect-ratio / min-aspect-ratio |
可见区域宽高比 |
| device-aspect-ratio / min-device-aspect-ratio / max-device-aspect-ratio |
设备宽高比 |
| device-height / min-device-height / max-device-height |
设备高度 |
| device-width / min-device-width / max-device-width |
设备宽度 |
| orientation |
方向，判断设备处于横屏还是竖屏 |
| monochrome / min-monochrome / max-monochrome |
主要用于判断是否为黑白屏 |
| grid |
判断输出设备是网格设备还是位图设备 |
| color / min-color / max-color |
判断设备输出颜色数 |
| color-index / min-color-index / max-color-index |
指定了输出设备中颜色查询表中的条目数量 |
六. 例子
<style>
@media screen and (min-width:1000px) and (max-width:2000px) {
body{
background-color: green;
}
}
@media screen and (min-width:100px) and (max-width:1000px) {
body{
background-color: red;
}
}
</style>
<style>
/* 竖屏 */
@media screen and (orientation:portrait){
body{
background-color: green;
}
}
/* 横屏 */
@media screen and (orientation:landscape){
body{
background-color: red;
}
}
</style>
