使用 jQuery Mobile 进行响应式 Web 设计

响应式网页设计 (RWD)

过去几年，用于访问 Web 应用程序的设备数量呈爆炸式增长。我们现在有手机、平板电脑、台式机、笔记本电脑、电视等，都可以用于访问网站。所有这些设备的尺寸都大相径庭。为所有这些不同尺寸和种类的设备编写单独的应用程序几乎是不可能完成的任务。因此，我们需要以一种能让网站根据其显示屏幕的尺寸进行调整的方式来设计网站。解决此问题的技术就是响应式网页设计。

响应式网页设计是一系列技术和方法的组合，旨在使单个应用程序在各种设备上尽可能实用。下面是 Google 新闻网站在不同设备上的显示示例。

响应式设计的支柱

流式网格

网格是 Web 世界中管理布局空间的一种方式。流式网格是指使用相对尺寸的弹性网格布局。传统上，网格采用固定宽度列，宽度以像素为单位指定。但对于响应式网页设计，网格列的宽度应相对于其容器。这有助于响应式 Web 应用程序适应不同的屏幕尺寸。在响应式网页设计中，宽度大部分时间以百分比表示。

媒体查询

媒体查询评估设备浏览器的功能，并根据符合查询条件的这些功能应用样式。媒体查询使 Web 应用程序能够根据浏览器功能进行调整以获得最佳查看效果。

弹性图片和媒体

此功能使图片和其他媒体能够根据不同的设备尺寸和显示分辨率进行调整。调整图片和媒体最基本的技术是使用缩放或 CSS overflow 属性。尽管这些技术能使图片适应设备尺寸，但图片下载仍会占用用户的移动带宽。为了获得更好的用户体验，可以为不同的设备使用不同的图片和媒体集。

jQuery Mobile 框架

jQuery Mobile 框架是一个开源跨平台 UI 框架。它使用 HTML5、CSS3 和非常流行的 jQuery JavaScript 库构建，并遵循开放 Web 标准。它提供触控友好的 UI 小部件，这些小部件专为移动设备设计。它拥有一个强大的主题框架来为您的应用程序设置样式。它支持 AJAX 执行各种任务，例如页面导航和过渡。

jQuery Mobile 如何支持 RWD？

统一的用户界面

jQuery Mobile 通过设计 HTML5 和 CSS3 提供统一的用户体验。单个 jQuery 代码库将在所有受支持的平台上一致呈现，无需任何自定义。

渐进增强

渐进增强定义了兼容性层，允许任何用户访问网站的基本内容、服务和功能，同时为更好支持标准的浏览器提供增强体验。jQuery Mobile 完全使用此技术构建。下面是使用 jQuery Mobile 构建的页面在基本手机和功能丰富的手机上的显示示例。

CSS 选择器

jQuery Mobile 有一组预定义的 CSS 类，它根据设备的当前方向或大小将这些类应用于 HTML 元素。

方向类

如果设备处于横向模式，jQuery Mobile 将向 HTML 元素应用 .landscape 类。同样，如果设备处于纵向模式，jQuery Mobile 将向 HTML 元素应用 .portrait 类。可以在应用程序 CSS 中覆盖这些方向选择器，以定义应用程序在设备方向上的新样式。例如，如果我们希望在纵向模式下具有图像背景，我们可以使用以下 CSS 规则

.portrait section {
       background-image: url(images/portrait-background.png);
}

上述规则将在设备处于纵向模式时设置背景图像。在横向模式下，应用程序将具有默认背景。

断点类

除了方向更改之外，jQuery Mobile 还提供用于处理不同屏幕尺寸的 CSS 选择器。jQuery Mobile 将这些称为断点类。jQuery Mobile 在 320 像素、480 像素、1024 像素等处定义了屏幕尺寸断点。对应于这些尺寸，jQuery Mobile 中定义了 min-width 和 max-width CSS 类，如 min-width-320px、min-width-480px、max-width-1024px 等。

与方向类一样，jQuery Mobile 会根据屏幕尺寸将这些断点类应用于 HTML 元素。这些可以在应用程序 CSS 中定义以覆盖默认行为。例如，如果我们想根据屏幕尺寸使用不同的背景图像，可以使用以下 CSS

.min-width-320px section, .max-width-480px section {
    background-image: url(images/login-bg-320.jpg);
}

.min-width-480px section, .max-width-768px section {
    background-image: url(images/login-bg-480.jpg);
}

如果屏幕宽度在 320 到 480 像素之间，上述 CSS 将加载 login-bg-320.jpg；如果屏幕宽度在 480 到 768 像素之间，则加载 login-bg-480.jpg。

灵活的布局

在 jQuery Mobile 中，大多数组件和表单元素都设计为弹性宽度，以便它们舒适地适应任何设备的宽度。此外，表单元素和标签根据屏幕尺寸以不同的方式呈现。在较小的屏幕上，标签堆叠在表单元素的顶部，而在较宽的屏幕上，标签和元素被设计为在 2 列网格布局中位于同一行。

网格布局

jQuery Mobile 内置了灵活的网格布局。网格宽度为 100%，完全不可见，并且没有内边距或外边距。因此，它们不会干扰放置在其中的组件的样式。jQuery Mobile 网格布局可用于创建两到五列的布局。列宽根据屏幕宽度和列数进行调整。有预定义的布局用于创建网格。它们被命名为 ui-grid-a（2 列网格）、ui-grid-b（3 列网格）、ui-grid-c（4 列网格）和 ui-grid-d（5 列网格）。在网格容器内，子元素按顺序分配 ui-block-a/b/c/d/e，这使得每个“块”元素并排浮动，形成网格。

jQuery Mobile 中网格的默认行为是并排布局列。但为了使应用程序响应屏幕尺寸，我们需要在较小的屏幕上堆叠列。jQuery Mobile 提供了一种 CSS 样式来实现这一点。样式名称是 ui-responsive。当此样式添加到网格容器时，如果屏幕宽度小于 560 像素，网格列将堆叠；在更大的屏幕上，网格将以多列布局表示。

    

响应式表格

这是 jQuery Mobile 新增的功能。它允许我们以一种在手机和桌面设备上都看起来不错的方式显示大量表格数据。响应式表格有两种模式

重排 (Reflow)：此模式默认情况下垂直堆叠行中的单元格，以便数据在手机上易于阅读。需要应用额外的样式才能使表格以传统的行-列格式显示。这是使用 data-role='table' 定义的表格的默认模式。

列切换 (Column Toggle)：此模式在较窄的宽度下隐藏低优先级列。列优先级使用 <th> 元素中的 data-priority 属性指定。优先级可在 1（最高）和 6（最低）之间。如果某列缺少 data-priority 属性，则该列始终显示。表格旁边会添加一个“列...”按钮，允许用户显示/隐藏列。

类似于网格布局，预设断点 ui-responsive 也可以应用于表格。这将使表格具有响应性。

媒体查询

除了预设的断点，CSS3 媒体查询可以轻松地与 jQuery Mobile 配合使用。由于 jQuery Mobile 是一个用于 HTML 网站的 JavaScript 框架，媒体查询与 jQuery Mobile 无缝协作。可以轻松地为 jQuery Mobile 应用程序定义和应用新的媒体查询。例如，如果我们希望当屏幕宽度为 720 像素或更小时网格堆叠，我们可以像下面这样定义媒体查询

/* stack all grids below 45em (720px) */
@media all and (max-width: 45em) {
    .grid-breakpoint .ui-block-a,
    .grid-breakpoint .ui-block-b,
    .grid-breakpoint .ui-block-c,
    .grid-breakpoint .ui-block-d,
    .grid-breakpoint .ui-block-e {
        width: 100%;
        float: none;
    }
}

结论

正如我们所看到的，jQuery Mobile 的构建考虑到了响应式设计。它提供了许多开箱即用的功能来支持响应式设计。jQuery Mobile 的优点之一是它提供了一个经过充分测试的基础框架，可以在各种屏幕尺寸和浏览器上正常工作。这使得使用 jQuery Mobile 开发应用程序变得更加容易，因为您可以专注于应用程序功能，而无需担心跨浏览器兼容性和屏幕尺寸问题。