Media Query

1、Media Query是什么？

Media Query 是CSS3中用来查询设备类型(Media Type)，并且通过条件语句，加载满足条件的样式表。

2、关于设备类型：

–Media Query可以检测出以下设备–

3、Media Query的语法：

用法1：

@media 设备类型 { //…满足该设备条件的css属性… }

用法2：

[逻辑表达式only或者not] 设备类型{ …//如果逻辑表达式是only：代表只有这一种设备，调用如下css …//如果逻辑表达式是not : 代表除此之外的设备，调用如下css }

用法3：

@media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//用法3比用法2多了一个[and 媒体特征表达式]，@media的强大之处在于， …//他不但能选择设备类型，还能对设备的不同配置（如屏幕宽度，色彩等的）进行选择。 //（这就是设备特征表达式所做的事情） …//这个用法，就是对相同设备的不同属性进行选择，而后条用满足条件的css表达式 …//现在你可能还不明白[and 媒体特征表达式]，不过没有关系，后面我将认真介绍 //媒体特征表达式的用法，你一定会惊叹@media query的强大。 }

用法4：

@media 设备特征表达式 | 设备特征表达式 |….{ …//满足所给出的媒体特征表达式后，调用以下css代码块 …//注意：只要满足设备特征就可以了，不一定要是相同设备。 }

下面，我们用一个例子，来一步一步介绍这四种表达式的用法。

熊孩子的故事

想想这一种场景，你开发了个小有名气的在线阅读网站，不过后来有小孩子吐槽说：“我常常在NDS上看电子书，能不能在NDS上，将背景变为深色，字变成白色，夜里看小说，背景太亮很刺眼。”
这时，你有两种做法：
1、对设备UA进行检测，完全为NDS重新做一个适合手机的站点。（这是传统的做法，虽然现在多数站点都在用，在现在看来，很不聪明了！）
2、利用css3的强大特性，轻松完成（我们当然要选择这种聪明些的做法！）
让我们来考虑考虑实现思路：

首先利用media query检查是否是手持设备 如果是： 背景为黑色，字为白色 如果不是： 不做处理

我们现在来看media query的第一种用法：

@media 设备类型 { //…满足该设备条件的css属性… }

用法1正好符合我们在此情形下的筛选条件，那么我们书写的css如下：

@media handheld{ body{ color:white; background-color:black; } }

我们的html页面便类似这个样子：

代码家
我们来测试Handheld，手持设备和screen显示器设备。

用chrome打开该html，发现如下图：

好像没有看到黑底白字啊？当然啦，你现在是在用电脑显示器来访问的页面，也就是满足了screen设备特征，handheld设备所书写的css都被忽略了。

那我们要如何测试在手持设备中的样式呢？难道一定要用NDS访问么，可是我没有NDS啊?！
当然不是，我们这里要用Chrome的一个设置功能，来覆盖一些属性，模拟手持设备，按照如下操作，便可以调用Chrome中模拟各种设备的功能。
1.首先，点击右键->审查元素

2.而后，在弹出的控制窗口中，点下设置按钮

3.左上角切到overrides中，寻找Emulate选项，勾上后，选中HandHeld，你就会惊奇的发现，网页整个变了个风格。正如我们预期的那样，黑底白字。

做到此处，是否已经对media query有些了解，而且有很强的成就感，不过先按捺住不要激动，这才是media query功能的一部分，还有一些更为实用的用法还没有接触到。还需慢下心来继续看下去。

后来，过了一段时间，上次的那个小盆友又发来吐槽反馈，说：“哈哈哈哈，我买了个iPad2，可是我发现iPad2在横屏看书的时候字体有点儿小啊，能不能在横屏的时候把字改大一点儿？”。
这时候，技术人员抓狂了，这可怎么改啊，iPad2也是screen设备，电脑显示器也是screen设备？！ 让我怎么识别！

冷静

我们下面介绍的东西就能很好的处理这种情形：那就是 设备特征表达式

设备特征表示 看起来是是这个样子的：设备特征：设备特征值

留意一下用法3：

@media [逻辑表达式only或者not] 设备类型 [and 设备特征表达式]{ …//我们现在就要用用法3来识别iPad2 }

现在考虑一下，虽然iPad2和电脑显示器都是screen设备，可是他们之间还是有不同之处的。比如说，ipad是有横屏特征的设备，电脑却没有。
这个问题先搁浅到这里，我们先来研究一下设备表达式究竟是什么，等弄懂后，你自然就知道该怎么做了。

前面说到过，media query是可以识别设备特征的，可是设备特征是什么？想想，屏幕宽度算不算设备特征？设别分辨率算不算设备特征呢？设备色彩支持情况，横竖屏情况？
没错，这些都是我们在使用电子设备时候的设备特征。Media query支持很多种设备特征的识别属性。

扫了一眼表格发现不明白min/max？没有关系，后面会说到。
这张表格来自：zzjyingzi，尊重原创，转载请保留。

留意一下那个蓝色的orientation,这不正是我们可以用来识别ipad横屏的状态么？

我们在原来的html中加上：

@meida screen and (orientation:landscape){ font-size:25px; }

这样，你可以测试一下，在ipad横屏时。会正如我们所预料的那样，25px字体展示。一切都太完美了。
在此之前，你或许需要用js去获取，而后调整属性。现在，只需简单几行就能实现，css3的强大之处当然不止如此，以后我也会给大家介绍更多关于css3的新特性。

正在我们说话之际，小盆友又发来消息：“我最近买了个iPhone，我也要黑底白字，保护眼睛。”

我想你也猜到了，我们这次需要识别的是同为screen设备的iPhone….

Here we go!

先来考虑iPhone与台式机显示器的不同之处：最大的区别就是屏幕大小。

那我们这次就要介绍一个属性，device-width，指代的是设备的宽度，注意，这可不是网页渲染的区域宽度。这个是与设备相关的。

iPhone的device-width就是320px，那么我们继续补充一个media-query在css中。

@media screen and (device-width:320px){ body{ background-color:black; color:white; } }

好啦，加上以后，那个小盆友就每天很happy的看上了小数，可是过了几日，我们又收到了这个倒霉孩子的来信：“我的iPhone坏了…555555….我妈给我买了个小手机先用着，屏幕可小了，烦。。。能不能把这个小屏幕的手机也让黑体白字、”。

忽然觉得技术部门就是为他开的。

好吧，冷静。

这个时候，就要介绍min/max属性了。device-width:320px 其实类似于divice-width==320px;
min/max 其实就是 >= 和 <=
min-device-width : 320px; 等价于 device-width >= 320px;
max-device-width : 320px; 等价于 device-width <= 320px;
明白了吧，我们只要在device-width前加个max 就能轻松解决这个熊孩子的要求了（让iPhone或者iPhone屏幕小的设备都能黑底白字）。来自Apple官方

@media screen and (max-device-width:320px){ body{ background-color:black; color:white; } }

从此之后，这个熊孩子就成了网站的忠实用户。。

关于Media Query的初步介绍就随着这个熊孩子安静下来而在此结束，不过我们的教程还未完结，熊孩子或许有一天又会发信来吐槽。

你可以在这个gist中查看目前多数设备的Media Query语句：点此

作者：代码家
来源：代码家的博客
你可以订阅我的Blog以获取最新的知识文章。
请尊重版权，转载请注明来源！