CSS3 Media Query 设备查询

利用@media属性查询设备，最早出现在CSS2中，在CSS2中，当时的思路是查询设备的种类；而发展到CSS3中，关注点则迁移到查询设备的兼容性。

现在，通过Media Query（设备查询）可以检查很多东西：

• 视窗（viewport）的宽度和高度
• 设备（device）的宽度和高度
• 方向（orientation）- 平板pad和手机当前是横向还是纵向显示
• 设备分辨率（resolution）

当代潮流方向是：通过Media Query（设备查询）针对台式电脑、笔记本电脑、平板电脑、手机等不同设备而给予前端不同的样式表设置。（甚至是对iphone和安卓手机也有进一步区分）

浏览器兼容性

下表是每种浏览器针对@media的最低版本。

属性
@media	21.0	9.0	3.5	4.0	9.0

设备查询（Media Query）的语法

如下所示，设备查询（Media Query）的语法由1个设备种类（media type）和若干表达式构成；这些表达式用来判断true或false，以决定大括号内的CSS样式表是否生效。从而，针对不同的设备类型，则可以应用不同的样式表设置。

@media not|only mediatype and (expressions) {
    CSS-Code;
}

上述是设备查询使用内部样式表，当然，还可以通过设备查询使用不同的外部样式表，如下所示：

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="media_type1.css">

CSS3 Media Types 设备种类

取值	描述
all	用于所有设备类型
print	用于打印机设备
screen	用于电脑屏幕、平板电脑、手机等
speech	用于阅读器

---

一般来说设备种类（media type）都会取值screen（呵呵，其他的似乎比较不常用啊），而真正比较吊炸天的是表达式中对相关设备特性（Media Features）进行布尔判断（也就是判断true/false）。

---

一些简单的示例

如下所示，这个示例中，如果浏览器的宽度等于480px或大于480px，其大括号内部所设置的CSS样式表则会生效，从而页面背景色变成红色；如果不满足该条件，则会显示原本代码中设置的背景色黑色，具体的请试试下面的案例吧~（运行例子的时候，记得自己用浏览器查看全部源码）

@media screen and (min-width: 480px) {
    body {
        background-color: Red;
    }
}

运行一下

再看一个案例吧，去试试~（运行例子的时候，记得自己用浏览器查看全部源码）

@media screen and (min-width: 480px) {
    #leftsidebar {width: 200px; float: left;}
    #main {margin-left: 216px;}
}

运行一下

---

Media Features

上面例子中只用到了max-width，那其他的设备特性呢？请看下表。

取值	说明
any-hover	是否有可能通过输入设备允许用户触发鼠标指针悬浮事件 （这里包括外界设备，不仅仅是基础设备）
any-pointer	输入设备是否有指针功能，如果有，那指针精度如何
aspect-ratio	视窗长高比
color	色彩位数
color-gamut	输出设备的色彩饱和度
color-index	设备可以显示出多少种颜色
grid	用来查询输出设备是否使用Grid布局
height	视窗（viewport）高度
hover	基础输入设备是否允许用户触发鼠标指针悬浮事件 （比如纯粹触屏就无法hover）
inverted-colors	浏览器或操作系统是否处于色彩倒置模式下
light-level	设备周围的光线强暗程度
max-aspect-ratio	视窗长高比的最大值
max-color	最大色彩位数
max-color-index	设备可以显示出多少种颜色的最大数目
max-height	最大视窗高度
max-monochrome	单色设备中的最大色彩位数
max-resolution	定义设备的最大分辨率
max-width	最大视窗宽度
min-aspect-ratio	视窗长高比的最小值
min-color	最小色彩位数
min-color-index	设备可以显示出多少种颜色的最小数目
min-height	最小视窗高度
min-monochrome	单色设备中的最小色彩位数
min-resolution	定义设备的最小分辨率
min-width	最小视窗宽度
monochrome	单色设备的色彩位数
orientation	视窗的显示方向（横向或纵向）
overflow-block	设备是如何处理block块级元素的内容溢出视窗范围
overflow-inline	inline行内元素内容溢出视窗范围 可否以滚动的方式来查看溢出部分
pointer	基础输入设备是否包含指针功能，如果包含，精度如何
resolution	输出设备的分辨率，使用dpi或dpcm为单位
scan	输出设备的扫描功能
scripting	是否支持脚本（比如JavaScript脚本）
update	输出设备更新内容变化的速度
width	视窗（viewport）宽度

---

纸上得来终觉浅，绝知此事要躬行；多去试试呗！不过可以等到真正有需求时再去试验，上述的这些内容还是有点偏，以及在不断更新发展中，所以没必要太去深入挖掘。不要在正在发展而不够成熟或兼容性不够的细节知识上花太大精力。