移动设备响应式网站之CSS媒体查询
http://www.ibm.com/developerworks/cn/web/wa-cssqueries/index.html
简介
现今每天都有更多的手机和平板电脑问市。消费者能够拥有可想象到的各种规格和形状的设备，但是网站开发人员却面临一个挑战：如何使他们的网站在传统浏览器、手机和平板电脑浏览器上有很好的效果，如何在各种大小的屏幕上提供一流的用户体验,答案是：采用响应式设计。响应式设计可以随所显示的屏幕大小而改变。实现响应式设计的主要方法是使用 CSS 媒体查询。
在本文中，将探索如何将媒体查询用于桌面网站、移动电话和平板电脑。同时还将了解如何检测媒体查询支持，以及如何为尚未支持此项技术的浏览器提供可靠体验。
先决条件
本文中的代码样例被设计为可运行于支持 CSS 媒体查询的网页浏览器中，这些浏览器包括 Mozilla Firefox、Apple Safari、Google Chrome 和 Opera。请参阅?参考资料，获取展示了桌面和移动浏览器中的 CSS3 媒体查询的浏览器兼容性支持的完整列表。
?回页首
响应式设计
响应式设计可根据所显示的屏幕大小而改变, 它呈现的每个屏幕看起来并不相同。按照可用的屏幕属性，响应式设计提供了 UI 的最佳效果。
例如，如果网站布局上有一个占据 25% 的屏幕宽度的侧边栏，那么该侧边栏在不同大小的屏幕上的呈现是不同的。该侧边栏在较大的桌面监控器上是宽屏的，在较小的 智能手机屏幕上是极其窄的。而在最高的或最小的屏幕上，侧边栏很可能不再是可用的 UI 组件。
有了媒体查询，您就可以编写 CSS，自动将设计更改为提供不同屏幕大小的最佳 UI 体验。
?回页首
媒体查询
从 CSS 版本 2 开始，就可以通过媒体类型在 CSS 中获得媒体支持。如果您曾经使用过打印样式表，那么您可能已经使用过媒体类型。清单 1 展示了一个示例。
清单 1. 使用媒体类型
?
在清单 1 中，
media?属性定义了应该用于指定每种媒体类型的样式表：
screen?适用于计算机彩色屏幕。print?适用于打印预览模式下查看的内容或者打印机打印的内容。作为 CSS v3 规范的一部分，可以扩展媒体类型函数，并允许在样式表中使用更精确的显示规则。媒体查询?是评估 True 或 False 的一种表达。如果为 True，则继续使用样式表。如果为 False，则不能使用样式表。这种简单逻辑通过表达式变得更加强大，使您能够更灵活地对特定的设计场景使用自定义的显示规则。
媒体查询包含一个媒体类型，后跟一个或多个检查特定条件（如最小的屏幕宽度）的表达式。样式表中的媒体查询看起来如清单 2 中的示例所示。
清单 2. 媒体查询规则
?回页首
有用的媒体特性
媒体很多特性，比如宽度、颜色和网格，您可以在媒体查询中使用它们。对每个可能的媒体特性进行描述不在本文讨论范围内。关于媒体查询的文档 The World Wide Web Consortium's (W3C) 提供了这方面的一个完整清单。（请参阅?参考资料）。
要设计响应式网站，只需要了解一些媒体特性：方向、宽度和高度。作为一个简单媒体特性，方向的值可以是?
portrait?或landscape。这些值适用于持有手机或平板电脑的用户，使您可以根据两个形状因素来优化内容。当高度大于长度时，则认为屏幕是纵向模式，当宽度大于高度时，则认为屏幕是横向模式。清单 8 显示了一个使用?orientation?媒体模式查询的示例。
清单 8.?orientation?媒体查询?回页首
常见媒体查询
因为 Apple 首次向市场推出了用户智能手机和平板电脑产品，所以下列大多数媒体查询都是基于这些型号的设备。
如果目标是横向模式智能手机，则使用：?
@media (min-width: 321px) { ... }如果目标是纵向模式智能手机，则使用：?
@media (max-width: 320px) { ... }如果目标是横向模式 Apple iPad，则使用：?
@media (orientation: landscape) { ... }如果目标是纵向模式 iPad，则使用：?
@media (orientation: portrait) { ... }您可能已经注意到了，iPad 上使用的是?
?orientation?媒体特性，而?width?用于 Apple iPhone 之上。主要是因为 iPhone 不支持orientation?媒体特性。您必须使用?width?模拟这些方向断点。请参阅?参考资料，获取有关常见媒体特性的更多信息。回页首
SASS 中的媒体查询
Ruby on Rails 中的内置支持有助于推进 Syntactically Awesome Style Sheets (SASS) 的盛行，使其在 Web 开发社区中迅速走强。关于 SASS 的详细讨论已超出了本文的讨论范围，但我会在基于 SASS 的样式表中简要介绍使用媒体查询的基础知识。请参阅Resources，获取有关 SASS 的更多信息。
SASS 行为中的媒体查询与普通 CSS 中的完全相同，但有一个例外：它们可以嵌套在其他 CSS 规则中。当一个媒体查询嵌套在另一个 CSS 规则中时，会将规则置于样式表的顶层，如清单 11 所示。
清单 11. 嵌套的媒体查询?回页首
组织您的媒体查询
现在，我们已经了解了如何编写媒体查询，是时候考虑采用以一种合乎逻辑的、有组织的方式将媒体查询部署到您的 CSS 代码中了。确定如何组织媒体查询很大程度上是一种个人偏好。这一小节将探讨两种主要方法的优点和缺点。
第一个方法是为不同屏幕大小指定完全不同的样式表。优点是规则可以保存在独立样式表中，这使得显示逻辑能够清楚地划分出来，更便于团队进行维护。另一个优势是源代码分支之间的合并变得更为容易。但优点同时也是缺点。如果要为每个媒体查询创建单独的样式表，则无法将一个元素的所有样式表放在同一文件夹的同一位置。当改变一个 CSS 中的一个元素时，需要创建多个位置进行查看，这使得网站 CSS 的维护变得更加困难。
第二个方法是在现有样式表中使用媒体查询，该样式表就在定义其余元素样式表的位置的旁边。这种方法的优势是可以将所有元素样式保存在同一个位置。当在团队模式下工作时，这种做法可以创建更多源代码合并工作，但这是所有基于团队的软件开发都可以管理且常见的一部分。
没有所谓正确或错误方法。您只需选择最适合您的项目和团队的方法即可。
?回页首
浏览器支持
到现在为止，您可能已经相信 CSS 媒体查询是一个强大的工具，而且想知道哪些浏览器支持 CSS 媒体查询。以下是这方面的好消息和坏消息。
对于大多数专业 Web 开发人员来说，这意味着您需要提供一个解决方案，以便在 Internet Explorer 中支持媒体查询。
下列解决方案是一个名为 respond.js 的 JavaScript polyfill。
带有 respond.js 的 Polyfill
Respond.js 是一个极小的增强 Web 浏览器的 JavaScript 库，使得原本不支持 CSS 媒体查询的浏览器能够支持它们。该脚本循环遍历页面上的所有 CSS 引用，并使用媒体查询分析 CSS 规则。然后，该脚本会监控浏览器宽度变化，添加或删除与 CSS 中媒体查询匹配的样式。最终结果是，能够在原本不支持的浏览器上运行媒体查询。
由于这是一个基于 JavaScript 的解决方案，所以浏览器需要支持 JavaScript，以便运行脚本。该脚本只支持创建响应式设计所需的最小和最大?width?媒体查询。这并不是适用于所有可能 CSS 媒体查询的一个替代。在?参考资料?部分，可以阅读关于该脚本特性和局限性的更多信息。
Respond.js 是您可以选择的诸多可用开源媒体查询 polyfills 之一。如果您觉得 respond.js 无法满足您的需求，在进行一个小小的研究之后，您就会发现几个替代方案。
?回页首
结束语
有了 CSS 媒体查询，您就可以轻松地将特定屏幕大小作为目标，并创建一个可靠的用户体验，不管使用何种浏览器或设备来访问您的网站。这些技术是响应式设计的重中之重，响应式设计是一个新兴移动 Web 设计和开发实践。在您的网站上尝试使用媒体查询并不涉及实际成本（除了只是增强您的现有 CSS 文件），为何不尝试一下使在平板电脑、手机或电子阅读器上访问您网站的访客有良好的体验。
?
参考资料
学习
获得产品和技术
讨论
关于作者
Jeff Bail 曾为美国政府财富 500 强企业和一些新企业构建网站和 Web 应用程序，这些新企业涉及保险、教育、卫生和健康行业。最近，Jeff 为 iPhone 和 Android 创建了移动 Web 应用程序，并为 MapMyFITNESS 社区的数百万健身爱好者提供了新功能。