也可以在单个样式表的 CSS 内直接使用多个媒体查询。清单 2 显示了用于一组导航项的 CSS 类示例，稍后您将在本文中创建它。当设备的屏幕分辨率是 800px 宽或以上时，导航的宽度设置为 300px；当屏幕分辨率为 799px 或以下时，导航的宽度设置为 100%。
清单 2. 使用媒体查询来交付特定于设备的 CSS
01
@media all and (min-width: 800px) {
02
#nav {
03
width: 300px;
04
}
05
}
06
07
@media all and (max-width: 799px) {
08
#nav {
09
width: 100%;
10
}
11
}
关于媒体查询还有另一件很酷的事情，那就是如果您在一个现代 Web 浏览器（包括清单 2 中的 CSS 以及相关的 HTML 元素）中查看一个 Web 页面，该 Web 页面实际上也将响应浏览器的大小。因此，如果浏览器宽度被设置为 799px 或以下，导航的宽度将是 100%；如果浏览器的宽度被设置为 800px 或更大，导航的宽度将被设置为 300px。
成为响应式
媒体查询是一种条件语句，用来确定将什么 CSS 应用到 Web 页面。与 jQuery Mobile 框架一起使用，您可以创建一些强大的移动网站，同时保持独立的桌面布局。jQuery Mobile 框架本身可以用于快速、轻松地创建触摸友好的网站。该框架有大量组件，可以很容易地添加按钮、工具栏、对话框、列表视图等等。然而，当涉及到处理 Web 页面布局时，CSS 仍然是首选的语言。幸运的是，如本文前面所介绍的，CSS3 已引入媒体查询，它为开发人员提供根据设备分辨率改变 Web 页面布局的功能。
结合使用 jQuery Mobile 框架，您可以创建一些响应式布局。出于本文的目的，我用一个简单的示例，其中包括一组导航项和一个网格。导航项和网格将被根据不同屏幕分辨率安排不同的布 局。在 jQuery Mobile 框架在 Web 页面中运行之前，您需要做的第一件事是嵌入与 jQuery Mobile 框架关联的 JavaScript 文件和 CSS（参见 清单 3）。
清单 3. 嵌入 jQuery Mobile 框架
1
<link rel="stylesheet"
2
href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" />
3
<script src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
4
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script>