CSS3 媒体查询
CSS3的媒体查询可用来创建响应式布局，为特性的设备配置有选择性的加载CSS样式
语法
@media mediatype and|,|not|only (media feature) {
CSS-Code;
}
常用媒体类型
- all（所有），适用于所有设备。
- handheld（手持），用于手持设备。
- print（印刷），用于分页材料以及打印预览模式下在屏幕上的文档视图。
- projection（投影），用于投影演示文稿，例如投影仪。 5.screen（屏幕），主要用于计算机屏幕。
逻辑查询: 用and、,、not创建精确的媒体查询
查询特性:长宽比 aspect-radio
/* 检测更宽一些的设备，当我们在播放视频时很有用 */
@media screen and (min-aspect-ratio: 16/9) {
…
}
取向 orientation：检测设备是横屏还是竖屏模式
@media all and (orientation: landscape) {
…
}
@media all and (orientation: portrait) {
…
}
颜色 color
/* 检测设备是否至少支持8位颜色（256色） */
@media all and (min-color: 8) {
…
}
单色 monochrome
/* 检测设备的灰度 */
@media all and (min-monochrome: 8) {
…
}
分辨率 resolution
@media all and (min-resolution: 120dpi) {
…
}
实例
为小屏幕设备的用户把元素（aside）隐藏起来
@media screen and (min-width: 680px) {
aside {
width: 33%;
}
}
@media screen and (max-width: 680px) {
aside {
display: none;
}
}
不同尺寸屏幕
/*在768和991像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {
* {font-size: 20px;}
}
/*在480和767像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {
* {font-size: 18px;}
}
/*在小于480像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {
* {font-size: 16px;}
}
