jQuery Mobile 框架是一个 JavaScript 库，您可以用它来轻松地创建了一个移动版本的网站，将现有的 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. 使用媒体查询交付特定于设备的样式表
<span style="font-family:'Courier New';">1</span> | <link |
<span style="font-family:'Courier New';">2</span> | rel="stylesheet" |
<span style="font-family:'Courier New';">3</span> | type="text/css" |
<span style="font-family:'Courier New';">4</span> | media="screen and (max-device-width: 799px)" |
<span style="font-family:'Courier New';">5</span> | href="mobile-tablet.css" <span style="font-family:'Courier New';">/></span> |
本示例中的 <span style="font-family:'Courier New';">media</span> 属性包含一个被设置为 <span style="font-family:'Courier New';">screen</span> 的媒体类型值，以及一个媒体查询（在括号中）。这个特定的媒体查询，检查用户当前设备的屏幕分辨率是否小于或等于 799px。如果是，则交付这个手机/平板样式表；否则，不交付这个样式表。您可以在单个 Web 页面中包括多个样式表链接，每一个样式表链接都有自己的媒体查询，根据您所需要的多种不同的分辨率，有所不同地呈现您的页面。我注意到，最常见的基于分辨 率的样式表似乎有三种，一种用于手机和平板设备、一种用于较低分辨率的桌面显示器，还有一种用于较高分辨率的桌面显示器。如果您准备使用清单 1 中的代码，分辨率小于 799px 的所有设备将使用这个样式表，所以这是一个完美的示例，说明如何可以针对手机和平板设备使用一种样式表，而台式计算机则使用不同的样式表。 |
也可以在单个样式表的 CSS 内直接使用多个媒体查询。清单 2 显示了用于一组导航项的 CSS 类示例，稍后您将在本文中创建它。当设备的屏幕分辨率是 800px 宽或以上时，导航的宽度设置为 300px；当屏幕分辨率为 799px 或以下时，导航的宽度设置为 100%。
清单 2. 使用媒体查询来交付特定于设备的 CSS
<span style="font-family:'Courier New';">01</span> | @media all and (min-width: 800px) { |
<span style="font-family:'Courier New';">02</span> | #nav { |
<span style="font-family:'Courier New';">03</span> | width: 300px; |
<span style="font-family:'Courier New';">04</span> | } |
<span style="font-family:'Courier New';">05</span> | <span style="font-family:'Courier New';">} </span> |
<span style="font-family:'Courier New';">06</span> | <span style="font-family:'Courier New';"> </span> |
<span style="font-family:'Courier New';">07</span> | @media all and (max-width: 799px) { |
<span style="font-family:'Courier New';">08</span> | #nav { |
<span style="font-family:'Courier New';">09</span> | width: 100%; |
<span style="font-family:'Courier New';">10</span> | } |
<span style="font-family:'Courier New';">11</span> | <span style="font-family:'Courier New';">}</span> |
关于媒体查询还有另一件很酷的事情，那就是如果您在一个现代 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 框架
<span style="font-family:'Courier New';">1</span> | <link rel="stylesheet" |
<span style="font-family:'Courier New';">2</span> | href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.css" <span style="font-family:'Courier New';">/> </span> |
<span style="font-family:'Courier New';">3</span> | <script src="http://code.jquery.com/jquery-1.6.2.min.js"></script> |
<span style="font-family:'Courier New';">4</span> | <script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.min.js"></script> |
jQuery Mobile 框架包括一个 <span style="font-family:'Courier New';">listview</span> 组件，您将使用它显示您的导航项。要创建一个列表视图，只需将一个 <span style="font-family:'Courier New';">data-role</span> 属性添加到其值为 <span style="font-family:'Courier New';">listview</span> 的导航列表 <span style="font-family:'Courier New';">ul</span> 元素中。jQuery Mobile 框架还包括一些有用的工具，允许您创建多列的网格布局。在 清单 4 中，我已经包含了一个两行三列的网格，这是使用 <span style="font-family:'Courier New';">ui-grid-b</span>、<span style="font-family:'Courier New';">ui-block-a</span> 和 <span style="font-family:'Courier New';">ui-bar</span> 类组合构造的。 |
jQuery Mobile 的详细介绍：请点这里
jQuery Mobile 的下载地址：请点这里
