Media Queries 的作用就是允许添加表达式用以媒体查询，以此来选择不同的样式表，从而自动适应不同的屏幕分辨率。
CSS2 里面虽然支持 @media 属性，但是能实现的功能比较少，一般只用做打印的时候做特殊定义的 CSS，我们不去讨论。
CSS3 的 @media 属性在 CSS3 里面已经演变成一种 Media Queries（媒体查询/匹配）了，在 CSS3 里面，可以用查询语句来匹配各种类型的屏幕。
@media screen 语法：
@media screen and (min-width: 400px) and (max-width: 1200px) {
/* CSS 样式 */
}其中：
screen 为媒体类型
and 为关键字
min-width: 400px 为媒体特性
screen 是媒体类型里的一种，CSS2.1 定义了 10 种媒体类型：
all 所有设备
braille 盲文
embossed 盲文打印
handheld 手持设备
print 文档打印或打印预览模式
projection 项目演示，比如幻灯
screen 彩色电脑屏幕
speech 演讲
tty 固定字母间距的网格的媒体，比如电传打字机
tv 电视
and 为关键字，表示逻辑与的关系，例如：
@media screen and (min-width: 1440px) and (max-width: 1700px) {
/* 这些样式将应用到屏幕宽度为 1440px ~ 1700px 之间的屏幕 */
}其他关键字还包括 not (排除某种设备)，only (限定某种设备)。
语法中的 min-width 就是媒体特性，其被放置在一对圆括号中，常见的媒体特征：
aspect-ratio 定义输出设备中的页面可见区域宽度与高度的比率
color 定义输出设备每一组彩色原件的个数。如果不是彩色设备，则值等于0
color-index 定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的比率。
device-height 定义输出设备的屏幕可见高度。
device-width 定义输出设备的屏幕可见宽度。
grid 用来查询输出设备是否使用栅格或点阵。
height 定义输出设备中的页面可见区域高度。
max-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-color 定义输出设备每一组彩色原件的最大个数。
max-color-index 定义在输出设备的彩色查询表中的最大条目数。
max-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最大比率。
max-device-height 定义输出设备的屏幕可见的最大高度。
max-device-width 定义输出设备的屏幕最大可见宽度。
max-height 定义输出设备中的页面最大可见区域高度。
max-monochrome 定义在一个单色框架缓冲区中每像素包含的最大单色原件个数。
max-resolution 定义设备的最大分辨率。
max-width 定义输出设备中的页面最大可见区域宽度。
min-aspect-ratio 定义输出设备中的页面可见区域宽度与高度的最小比率。
min-color 定义输出设备每一组彩色原件的最小个数。
min-color-index 定义在输出设备的彩色查询表中的最小条目数。
min-device-aspect-ratio 定义输出设备的屏幕可见宽度与高度的最小比率。
min-device-width 定义输出设备的屏幕最小可见宽度。
min-device-height 定义输出设备的屏幕的最小可见高度。
min-height 定义输出设备中的页面最小可见区域高度。
min-monochrome 定义在一个单色框架缓冲区中每像素包含的最小单色原件个数
min-resolution 定义设备的最小分辨率。
min-width 定义输出设备中的页面最小可见区域宽度。
monochrome 定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于 0。
orientation 定义输出设备中的页面可见区域高度是否大于或等于宽度。
resolution 定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan 定义电视类设备的扫描工序。
width 定义输出设备中的页面可见区域宽度。
通过 @media 实现屏幕在不同的宽度下，动态设置 #myDocument 元素的宽度，如下：
@media screen and (max-width: 1440px) {
/* width=1200px 适配宽度 1440px 以下的屏幕 */
#myDocument {
width: 1200px;
}
}
@media screen and (min-width: 1440px) and (max-width: 1700px) {
/* width=1400px 适配宽度在 1440px ~ 1700px 之间的屏幕 */
#myDocument {
width: 1400px;
}
}
@media screen and (min-width: 1700px) and (max-width: 1940px) {
/* width=1600px 适配宽度在 1700px ~ 1940px 之间的屏幕 */
#myDocument {
width: 1600px;
}
}
@media screen and (min-width: 1940px) {
/* width=1800px 适配宽度在 1940px 以上的屏幕 */
#myDocument {
width: 1800px;
}
}
川公网安备51010802032098
