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. 使用媒体类型
<link rel="stylesheet" type="text/css" href="site.css" media="screen" />
<link rel="stylesheet" type="text/css" hre
|
