01-媒体查询

第2 章　媒体查询

当万维网只能通过台式机或笔记本电脑浏览器去访问的时候，编写CSS是相当简单的。尽管那时也需要考虑跨浏览器和跨平台的问题，但至少我们能够合理地推断所有人在访问网站时，使用的设备从根本上看都是类似的。然而，在过去的这些年，我们看到了iPhone或iPad这样的设备在数量上急剧增加，所以，人们浏览网站使用的可能是宽屏桌面显示器或者狭窄的掌上屏幕，如果还是把内容以同样的方式呈现给每个人，实在不合乎情理。

长期以来，在CSS中有一种方法可以为不同的媒体类型提供不同的样式，这种方法使用的是link元素的media属性：

但是，如果屏幕尺寸有可能在3.5英寸到32英寸之间时，使用这种方式如同运用钝刀一般。对于这个问题，CSS3通过媒体查询模块（Media Queries Module，http://www.w3.org/TR/css3-mediaqueries/）提供了解决方案。媒体查询提供一种查询语法去扩展媒体类型，这种查询语法可以更加具体地为用户的设备提供样式。虽然媒体查询如此强大，但它在整个CSS3规范中实际上也只是众多最具革命性的特性之一。媒体查询可以给你一种自由，让网站真正地与设备无关，不管用户如何访问网站，都为他们提供最佳的合适体验。

媒体查询模块处于候选推荐标准状态，所以可以认为它已经准备好进行实现了。该模块在Firefox、WebKit和Opera上已经得到良好的实现，在Internet Explorer上要从第9版之后才能得到实现。