jQuery Mobile 框架是一个 java script 库，您可以用它来轻松地创建了一个移动版本的网站，将现有的 Web 页面转换成触摸友好的网站和应用程序。jQuery Mobile 框架允许用户通过 Web 浏览器直接连接到触摸友好的应用程序，这无疑将改变移动应用程序在手机及平板设备上的访问和分布方式。还有许多其它的移动开发选项，但它们与 jQuery Mobile 正采用的方法的不同之处是，它们的目标是针对各种移动平台。
智能手机和平板设备的采用率不断暴涨，jQuery Mobile 框架可以帮助开发人员满足日益增长的移动 Web 体验需求。提供移动 Web 体验要求 Web 开发人员和设计人员掌握一套新的技能。 在 2010 年，Nielsen 预计每两个美国人中就有一个会拥有智能手机，与 2008 年的结果（每 10 个人里只有一个拥有智能手机）相比，这是一个巨大的增长；并且，在 2011 年 6 月，AMI-Partners 预测 “平板在企业（员工人数介于 1 和 1000 之间）中的采用率到 2015 年将增长 1000%”。由于这些设备采用率的增加，对于能创建移动 Web 体验的 Web 开发人员和设计人员的需求将会非常强劲。jQuery Mobile 框架对于创建移动 Web 体验而言是一个优秀的解决方案，因为它增加了移动网站的生成速度，并可支持多种移动平台。
陷阱和解决方案
jQuery Mobile 框架对于创建手机或平板版本的 Web 页面而言是一个优秀的解决方案，但它完全依赖于对网站的内容附加特定的数据角色属性。在比较少见的情况下，有可能无法将这些属性附加到 HTML 标记，并可能要求您创建一个单独的移动网站。然而，本文将通过一些预见和规划，向您展示如何结合使用 jQuery Mobile 框架和级联样式表版本 3 (CSS3) 的媒体查询，来创建一个响应式设计，并确定布局如何对用户的设备作出反应。目的是创建一个单一的网站，可以针对用户设备的屏幕分辨率显示适当的布局，从而 动态地响应用户的设备。
响应式设计是根据用户设备的屏幕分辨率来响应用户设备的一种设计。这意味着，无论用户是在移动、平板还是桌面设备上浏览 Web 页面，设计都将根据该设备的屏幕分辨率显示特定的布局，从而适当地响应设备。虽然 jQuery Mobile 框架提供了一种方法，可快速、轻松地创建移动版本的网站，但它目前没有（而且很有可能永远也不会）提供一种固有的方法来根据设备的屏幕分辨率动态响应用户 的设备。事实上，jQuery Mobile 网站作出声明，原有的 Media Query Helper Classes 特性 在 beta 中已被弃用，并且已从最新的版本中删除。实际上，该框架的创建者反而推荐使用 CSS3 媒体查询。CSS3 媒体查询和 jQuery Mobile 框架的结合使用，可以实现一个能适应移动、平板和桌面环境的响应式设计。该框架的文档实际上结合使用了 jQuery Mobile 框架和 CSS3 媒体查询来实现自己的响应式设计。就对不同屏幕分辨率的反应方式而言，该文档实际上与您在本文中将会创建的示例相当类似。
凭借对媒体类型的使用，CSS 自版本 2.1 起包括了与设备相关的编码措施。使用媒体类型的一种常见方式是为桌面计算机屏幕和 Web 页面的打印版本分别定义单独的样式表。CSS3 通过引进媒体查询，将设备相关的编码措施这个概念再推进了一步。媒体查询可以用于确定与 Web 页面交互的设备类型，并使开发人员能够确定正在查看 Web 页面的设备的物理属性。无需多说，媒体查询已经成为交付特定于设备的样式表的一种流行方式，正如您在 清单 1 中所看到的，这些代码会根据屏幕分辨率交付特定于手机和平板设备的样式表。
清单 1. 使用媒体查询交付特定于设备的样式表
也可以在单个样式表的 CSS 内直接使用多个媒体查询。清单 2 显示了用于一组导航项的 CSS 类示例，稍后您将在本文中创建它。当设备的屏幕分辨率是 800px 宽或以上时，导航的宽度设置为 300px；当屏幕分辨率为 799px 或以下时，导航的宽度设置为 100%。
清单 2. 使用媒体查询来交付特定于设备的 CSS
媒体查询是一种条件语句，用来确定将什么 CSS 应用到 Web 页面。与 jQuery Mobile 框架一起使用，您可以创建一些强大的移动网站，同时保持独立的桌面布局。jQuery Mobile 框架本身可以用于快速、轻松地创建触摸友好的网站。该框架有大量组件，可以很容易地添加按钮、工具栏、对话框、列表视图等等。然而，当涉及到处理 Web 页面布局时，CSS 仍然是首选的语言。幸运的是，如本文前面所介绍的，CSS3 已引入媒体查询，它为开发人员提供根据设备分辨率改变 Web 页面布局的功能。
结合使用 jQuery Mobile 框架，您可以创建一些响应式布局。出于本文的目的，我用一个简单的示例，其中包括一组导航项和一个网格。导航项和网格将被根据不同屏幕分辨率安排不同的布 局。在 jQuery Mobile 框架在 Web 页面中运行之前，您需要做的第一件事是嵌入与 jQuery Mobile 框架关联的 java script 文件和 CSS（参见 清单 3）。
清单 3. 嵌入 jQuery Mobile 框架