CSS3属性之Media Queries

Media Queries属性在做响应式布局的时候功不可没，如果做过响应式，对下面的写法一定很熟悉：

@media screen and (min-width: 320px) { … }

其中包含了媒体的引入方式、逻辑操作符、媒体类型（Media Type）、媒体特性（Media Query）等，下面来详细的看下这些属性。

媒体的引入方式：

1)link方法引入(html文件head中)

<link rel="stylesheet" href="style.css" media="screen and (min-width: 320px)" />

2)@media引入(css代码中)

@media screen and (min-width: 320px) { … }

3)xml方式引入(xml文件中)

<?xml-stylesheet rel="stylesheet" href="style.css" media="screen and (min-width: 320px)" ?>

4)@import方式引入(css代码中)

@import url(style.css) screen and (min-width: 320px);

注：其中1-2是工作中经常用到的，另外如果以引入文件的形式引入css，即使媒体查询返回假，css仍会被加载。

逻辑操作符

操作符 and ',' only not 可以用来构建复杂的媒体查询，具体如下：

and 操作符用来把多个媒体属性组合起来，合并到同一条媒体查询中，只有当每个属性都为真时，这条查询的结果才为真。

@media srccen and (min-width: 320px) and (max-width: 480px) { … }

',' 操作符将多个媒体查询以逗号分隔放在一起，只要其中任何一个为真，整个媒体语句就返回真。相当于 or 操作符。

@media (min-width: 700px), handheld and (orientation: landscape) { ... }

not 操作符用来对一条媒体查询的结果进行取反。

@media not screen and (color), print and (color)

@media (not (screen and (color))), print and (color)  /* 等同上一行代码 */

only 操作符表示仅在媒体查询匹配成功的情况下应用指定样式。可以通过它让选中的样式在老式浏览器中不被应用。例如以下代码，在不支持Media Query的浏览器中则不会引入example.css。

<link rel="stylesheet" media="only screen and (color)" href="example.css" />

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

媒体类型（Media Type）

媒体类型	版本	兼容性	简介
all	CSS2	所有浏览器	用于所有媒体设备类型
aural	CSS2	Opera	用于语音和音乐合成器
braille	CSS2	Opera	用于触觉反馈设备
handheld	CSS2	Chrome,Safari,Opera	用于小型或手持设备
print	CSS2	所有浏览器	用于打印机
projection	CSS2	Opera	用于投影图像，如幻灯片
screen	CSS2	所有浏览器	用于计算机显示器
tty	CSS2	Opera	用于使用固定间距字符格的设备。如电传打字机和终端
tv	CSS2	Opera	用于电视类设备
embossed	CSS2	Opera	用于凸点字符（盲文）印刷设备

注：W3C规定了10中媒体类型，但是大部分浏览器实现的和我们经常用的为all、screen、print三种。

媒体特性（Media Query）

媒体特性	取值	接受min/max	简介
width	<length>	yes	定义输出设备中的页面可见区域宽度
height	<length>	yes	定义输出设备中的页面可见区域高度
device-width	<length>	yes	定义输出设备的屏幕可见宽度
device-height	<length>	yes	定义输出设备的屏幕可见高度
orientation	portrait | landscape	no	定义'height'是否大于或等于'width'。值portrait代表是，landscape代表否
aspect-ratio	<ratio>	yes	定义'width'与'height'的比率
device-aspect-ratio	<ratio>	yes	定义'device-width'与'device-height'的比率。如常见的显示器比率：4/3, 16/9, 16/10
color	<integer>	yes	定义每一组输出设备的彩色原件个数。如果不是彩色设备，则值等于0
color-index	<integer>	yes	定义在输出设备的彩色查询表中的条目数。如果没有使用彩色查询表，则值等于0
monochrome	<integer>	yes	定义在一个单色框架缓冲区中每像素包含的单色原件个数。如果不是单色设备，则值等于0
resolution	<resolution>	yes	定义设备的分辨率。如：96dpi, 300dpi, 118dpcm
scan	progressive | interlace	no	定义电视类设备的扫描工序
grid	<integer>	no	用来查询输出设备是否使用栅格或点阵。只有1和0才是有效值，1代表是，0代表否

常用的一些Media Queries代码片段

Bootstrap3.0中的Media Queries片段

/* Extra small devices (phones, less than 768px) */
@media (max-width: 767px)

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991px)

/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199px)

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px)

判断设备横竖屏

/* portrait */
@media screen and (orientation:portrait)
/* landscape */
@media screen and (orientation:landscape)

Media Queries的兼容性：（来自http://caniuse.com）