CSS3@media媒体查询应用浅析

一、css中直接使用

1、直接使用：

@media screen and (max-width:960px){
    body{ background:red; }
}

2、指定范围用法

@media screen and (min-width:960px) and (max-width:1200px){
    body { background:yellow; }
}

注意: max-width 与 max-device-max区别？
1、max-device-width是设备整个显示区域的宽度，例如，真实的设备屏幕宽度。
2、max-width是目标显示区域的宽度，例如，浏览器宽度。
3、如果使用max-device-width，那么在PC浏览器上浏览网页时，缩小或放大浏览器时是不执行CSS的，因为“PC设备”没有变化。但如果使用max-width，缩小或放大浏览器时是执行CSS的，因为“显示区域”即浏览器大小发生了变化。
4、如果使用max-device-width，那么当手机由竖变横时，CSS是不执行的，因为“手机宽度”并没有变化。如果使用max-width，那么当手机由竖变横时，CSS是执行的，因为“显示区域”发生了变化。
5、通常，“移动设备”项目使用max-device-width；“PC设备”项目使用max-width。

二、head标签引入

<link rel="stylesheet" href="styleA.css" media="screen and (max-width: 1920px)">
<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">

如上所示，在head标签中通过media属性直接判断屏幕宽度并且根据不同宽度读取对应的css样式表。

三、media参数

参数名	作用
width	浏览器可视宽度
height	浏览器可视高度
device-width	设备屏幕的宽度
device-height	设备屏幕的高度
orientation	检测设备目前处于横向还是纵向状态
aspect-ratio	检测浏览器可视宽度和高度的比例。(例如：aspect-ratio:16/9)
device-aspect-ratio	检测设备的宽度和高度的比例
color	检测颜色的位数。（例如：min-color:32就会检测设备是否拥有32位颜色）
color-index	检查设备颜色索引表中的颜色，他的值不能是负数
monochrome	检测单色楨缓冲区域中的每个像素的位数。（这个太高级，估计咱很少会用的到）
resolution	检测屏幕或打印机的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)

四、媒体类型

媒体类型	作用
all	适用于所有设备
print	为了加载合适的文档到当前使用的可视窗口. 需要提前咨询 paged media（媒体屏幕尺寸）, 以满足个别设备网页尺寸不匹配等问题
screen	主要适用于彩色的电脑屏幕

五、媒体操作符

操作符	作用
and	操作符用来把多个媒体属性组合成一条媒体查询，对成链式的特征进行请求，只有当每个属性都为真时，结果才为真
not	操作符用来对一条媒体查询的结果进行取反
only	操作符仅在媒体查询匹配成功的情况下被用于应用一个样式，这对于防止让选中的样式在老式浏览器中被应用到

注意：若使用了not或only操作符，必须明确指定一个媒体类型。