jQuery-响应式-Web-设计-全-

jQuery 响应式 Web 设计（全）

原文：zh.annas-archive.org/md5/2079BD5EE1D24C66E7A412EFF9093F43

译者：飞龙

协议：CC BY-NC-SA 4.0

序言

网络不再仅限于桌面或笔记本设备。 网络技术现在已经传播到从大桌面监视器到平板电脑，智能手机，智能电视和户外显示器等各种设备。 它还增加了网站的功能和界面以及我们与其交互的方式。

制作响应式网站不再是可选项。 因此，现在是磨练我们使用网格系统框架来提供不同和丰富用户体验的发展技能的时候。

在本书中，我们使用 CSS3 和 jQuery 实现了这一切，它们提供了在不同设备、操作系统和不同浏览器版本之间进行良好集成的选择。 使用 jQuery 的另一个优势是通过使用协作社区维护的插件来加快开发速度。 我们不需要重新发明已经存在的东西！ 此外，改进总是受欢迎的，您对社区的贡献将有助于每个人。

本书内容

第一章，探索响应式网页设计，首先解释了通过为网站生成线框图来创建响应性的概念，并将其适应不同的屏幕。 本章还解释了移动优先的概念。

第二章，设计响应式布局/网格，帮助你创建灵活的网站结构，然后专注于解释响应式网格系统的使用以及其如何改进开发中的灵活性。

第三章，构建响应式导航菜单，对每种导航菜单模式进行了多方面分析和逐步实施；这有助于选择每种情况的正确选项。

第四章，设计响应式文本，解释了将文本转换为相对单位，然后定制成美丽且响应式的标题。

第五章，准备图像和视频，解释了处理不同格式的高分辨率图像。 然后继续解释在智能手机上查看图像时定向重要性的艺术。

第六章，构建响应式图像滑块，解释了四种不同的图像滑块插件及其实现，并展示了有用的触摸库以补充交互。

第七章，设计响应式表格，探讨了管理创建响应式表格的不同方法，解决不同屏幕尺寸调整宽度时面临的困难。

第八章，实现响应式表单，讨论了改善用户体验的表单元素特点以及在移动设备上填写表单的好的、响应式表单框架。

第九章，测试响应性，讨论了在各种浏览器和设备平台上进行响应性测试的方法，以预防意外行为。

第十章，确保浏览器支持，解释了备用方案以及为什么备用方案被认为是重要的。然后继续解释如何检测每个浏览器特性，以及为这些错误提供正确支持。

第十一章，有用的响应插件，展示了用于网站结构、菜单导航等不同插件，补充了其他章节中已经介绍过的解决方案。

第十二章，优化网站性能，解释了使用在线工具分析网站性能的主要方法，并推荐了改进结果的提示。

本书中需要的材料

通过阅读本书获得的所有知识，如果你已经有了想要转换成响应式网站的网站的想法，那么在章节练习中可以完成。

你需要的软件清单包括 Apache HTTP 服务器、Adobe Photoshop CS5 或更早版本、诸如 Sublime Text 2 之类的代码编辑器，以及 Firefox 和 Chrome 等互联网浏览器。另外，为了测试例子和练习，最好是有智能手机或平板电脑等移动设备。

本书适合对象

使用 jQuery 和 CSS3 实现响应式 Web 设计旨在吸引对构建设备无关网站感兴趣的网页设计师。对 jQuery、CSS3 和 HTML5 的一些了解将是有益的。

约定

在本书中，你会发现一些区分不同类型信息的文本样式。以下是一些样式的示例，以及它们的含义解释。

文本中的代码词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入以及 Twitter 用户名如下所示："HTML5 规范包括新的结构元素，如header、nav、article和footer。"

代码块设置如下：

.orientation_landscape .div-example {
  border: 2px solid red;
}

当我们希望引起您对代码块的特定部分的注意时，相关的行或项目都使用加粗：

<svg width="96" height="96">
  <image xlink:href="svg.svg" src="img/svg.png" width="96" height="96" />
</svg>

新术语和重要词语都使用加粗显示。你在屏幕上看到的词语，比如菜单或对话框中的，会在文本中这样显示："点击下一步按钮会将您带到下一个屏幕"。

注意

警告或重要提示会以这样的形式出现。

小贴士

小贴士和技巧会以这样的形式出现。

第一章：探索响应式网页设计

近来，在网站开发环境中，我们经常听到“响应式”这个词，不是吗？别担心，我们将一起看到它的真正含义及其对我们的网站开发的影响。

当开始开发过程时，影响决策的一个因素（有时被忽视）是我们需要用不同的设备和屏幕尺寸来预览网站布局的响应性。一些时间以前，我们习惯于使用一些网站尺寸的定义，例如 1024 像素。这是因为我们认为唯一访问内容的方式是在台式机上。但是，正如你所知，技术给我们带来了越来越多的设备（可以显示网站），改善了我们与网站互动的方式，比如大型台式机显示器、平板电脑、智能手机、智能电视、户外显示屏等等。

移动技术的这些进步和网站导航和查看技术的快速演变，推动大家重新审视网站的有限尺寸的概念，开始考虑一个可以自适应自身并为每种情况提供合适内容的结构。

在本章中，我们将学习：

• 理解响应式网页设计的概念

• 比较响应式、流动和自适应网站

• 使用媒体查询适应屏幕

• 移动优先概念和技巧

• 使用线框工具

• 在线框架中实践移动优先开发

理解响应式网页设计的概念

我不能在没有引用伊桑·马科特的情况下开始这个主题，他在 2011 年出版了《响应式网页设计》一书，这本书已成为前端社区许多其他书籍和文章的参考。

在我对马科特的书的理解中，响应式网页设计的含义是根据可用的屏幕区域为用户提供查看同一网站的不同体验。从技术上讲，它涉及以下三种主要技术的使用：

• 灵活的基于网格的布局

• 弹性图片和视频

• 聪明地使用 CSS 分割网站行为（媒体查询）

关于每种技术的更多细节将在稍后展示，但只是为了直观地澄清这个概念，让我们看看下面的例子，它在小设备（智能手机）上显示网站的左侧，中等设备（平板电脑）在中间，并在大屏幕（台式机）上显示网站的右侧：

注意

还有许多挑战，不仅仅是创建流动的尺寸和应用一些媒体查询。

我们将在整本书中讨论许多次要和主要的挑战。其中一些是：

• 用触摸事件替换鼠标悬停事件

• 方便在表单字段中填充数据

• 优先考虑内容

• 网站加载优化

比较响应式、流动和自适应网站

响应式网页设计与流式设计有些不同。流式设计是自动调整网站的结构和尺寸（通过使用相对单位来设置宽度，如 em 或百分比），但并不为用户提供看到内容布局的多样化方法。

此外，可以说响应式网页设计并不是对所有移动设备挑战的唯一解决方案。正如我们之前所看到的，响应式网页设计只是一个想法，当实现正确时可以让用户获得更好的体验，但它可能并不适用于每个人或每种设备。这就是为什么我们应该提高对新技术的了解。

我非常喜欢的一句话是由Aaron Gustafson写的，《自适应网页设计》一书的作者：

"自适应网页设计是指创建适应用户能力（在形式和功能上）的界面。"

注意

自适应网页设计只为新设备实现新的 HTML5 功能，以提供增强的体验。它在旧设备上缺少这些功能，确保基本设置仍然适用于它们。

有许多方法可以实现自适应特性。以下是实现它们的最常见做法：

• 使用 jQuery 插件在移动设备上启用触摸事件交互（更多内容请参见第六章,"构建响应式图像轮播")

• 将常见表格结构转换为响应式表格（更多内容请参见第七章,"设计响应式表格")

• 仅为桌面定制表单元素的视觉（更多内容请参见第八章,"实现响应式表单")

• 使用地理位置功能为用户提供更相关的内容

• 更改信息结构，设置正确的内容优先级

Diego Eis，一位巴西人，以传播一些最佳实践而享有盛誉，也是Tableless.com.br网站的创始人，在他的一篇文章中对响应式网页设计和非响应式网页设计进行了精彩的比较。想象一下，如果我们计划前往两个或更多目的地，你肯定会准备许多服装组合，比如夹克、裤子、短裤和衬衫，这会导致一个大大的沉重的行李。这是因为你无法知道每个地方的气候情况。同样，为了应对所有情况，有时这可能会稍微降低网站的性能。

用媒体查询调整屏幕

Luke Wroblewski，知名网页设计书籍的作者，在许多文章中是很好的参考，最近发布了由技术公司宣布的设备尺寸分类：

• 4"-5"的智能手机

• 5"-6"的手机/平板混合设备

• 7"-8"的平板电脑

• 9"-10"的平板电脑

• 11"-17"的笔记本电脑和可转换设备（平板电脑/笔记本电脑）

• 20"-30"的台式电脑

例如智能手机等标签只是友好的标签，只要我们知道响应式网页设计使结构响应设备的屏幕分辨率，而不是设备类型。但是，我们必须分析是否最好为特定宽度提供不同的方法。这是此模块的改进功能，其中 CSS2.1 着重于媒体类型，如打印、屏幕和手持设备；在 CSS3 中，重点是媒体特性。

媒体查询大多数被使用，大多数浏览器原生支持（Firefox 3.6 及以上，Safari 4 及以上，Chrome 4 及以上，Opera 9.5 及以上，iOS Safari 3.2 及以上，Opera Mobile 10 及以上，Android 2.1 及以上，以及 Internet Explorer 9 及以上）。现在，问题来了：IE6-IE8 呢？对于这些浏览器，有一个被称为 Respond 的已知轻量级解决方案，在需要支持旧浏览器时非常有用（更多信息请参见 第十章 ，确保浏览器支持）。

在这个主题上保持简洁，以下是我们在指定媒体查询时主要使用的特性：

• 宽度：min-width / max-width

• 高度：min-height / max-height

• 方向：它检查设备是纵向还是横向。

• 分辨率：例如，min-resolution: 300dpi

检查下面的 CSS 代码，以更好地理解媒体查询的使用和语法：

/* Standard desktop screens */
@media only screen and (min-width:1025px) {
 CSS GOES HERE
}
/* Tablets */
@media only screen and (min-width:481px) and (max-width:1024px) {
 CSS GOES HERE
}
/* Smartphones */
@media only screen and (max-width:480px) {
 CSS GOES HERE
}

为了澄清这段代码，下图是对这段代码的视觉解释，其中显示布局可以根据设备屏幕的不同方式显示：

提示

下载示例代码

你可以从你在 Packt 出版社 购买的所有 Packt 图书的账户中下载示例代码文件。如果你在其他地方购买了本书，你可以访问 Packt 出版社的支持页面 并注册，直接将文件通过电子邮件发送给你。

移动优先

让我们从分析此项目的用例开始这一节：

当项目以桌面优先开始时，通常会出现这种结果，而网页设计则会用横幅或图片、不太相关的链接、动画等填充空白。我们可能忽略了用户遵循的明显和基本流程。我们知道有时这些其他项目看起来对项目很重要，但显然这个项目设计需要进行信息架构审查。

在上一个例子中，我们可以注意到（在右侧）与用户的简单沟通可以是多么的简单，减少视觉混乱可能会更有效。这就是趋势：简化。下面 Bill DeRouchey 的一句话概括了这一点：

"首先设计移动应用程序迫使我们剥离至关重要的内容。"

注意

换句话说，移动优先对业务很有好处，因为客观性带来金钱。您将添加到您的网站的内容对最终用户来说是有价值的，是重要的。这些新功能的实施将允许访问者在移动时更快速、更直观地访问内容，从而获得更好的用户体验。

在这种情况下，当应用移动优先概念时，一个特定的链接只能在内部页面中找到。然而，主页的目标是引导用户到正确的页面，按照网站流量信息。对于不相关的链接，在这种情况下是可以接受的。

看一下以下屏幕截图，并注意桌面版本中关于信息组织和重要链接焦点的许多差异：

使用线框工具

线框是一个视觉指南，帮助构建网站结构，其主要焦点在于功能、行为和内容的优先级。它应该是任何项目的第一步，因为它能更容易地分析信息架构和视觉元素的安排。

Wireframe.cc (wireframe.cc/) 是开始我们项目的简单方式。这个工具非常适合快速创建低保真版本。对于详细的作品，有更好的工具，比如 Balsamiq Mockups 或 Pencil。

Wireframe.cc 的使用非常简单。进入工具的网站后，执行以下操作：

1. 在左上角选择设备。

2. 然后点击设置重新定义我们的容器宽度（如果有必要）。

3. 现在点击并拖动来绘制。

4. 在这之后，选择适当的样板。

5. 如果你选择了一个错误的样板，只需双击它进行编辑。

提示

当您完成使用线框时，不要忘记点击保存按钮，这将生成一个 URL 供进一步访问。

练习 1 - 在线框中练习移动优先开发

访问mediaqueri.es/，花点时间获得灵感。让我们通过应用移动优先概念为这些尺寸创建三个网站线框：智能手机、平板和台式机。

以下三个线框将被用作练习 1的参考：

总结

在本章中，我们回顾了响应式网页设计的概念。我们还学习了什么是移动优先。我们学习了媒体查询以及它们在我们网站实现中的不同之处。我们还创建了一个展示我们网站的线框。这将把我们连接到下一章，该章将对这个线框进行编码。

现在，通过学习如何使用三种不同的响应式网格系统：流体基准网格，1140 网格和我最喜欢的 Foundation4 网格，我们继续进行项目。同时，我们也会探讨如何通过使用 JavaScript 来调整网站的行为。所有这些主题将在下一章中进行解释。

第二章：设计响应式布局/网格

“考虑网页响应式设计意味着考虑比例，而不是像素。”

特伦特·沃尔顿之前的引用总结了本章的思想，因为当我们在进行响应式设计时，我们必须考虑流动性、适应性，而不是追求像素完美。这就是检查每个像素的习惯正在快速衰落的原因。

但是，有两种方法可以解决这个问题并保持我们的网站响应性：

• 进行网站转换时使用一些数学方法以确保良好的结果

• 使用响应式网格系统，在其中选择一堆列，并使用相对尺寸保持代码在此列中

移动技术的这些进步以及网站技术的快速发展已经推动了每个人重新审视网站的有限尺寸概念，并开始考虑一个能够自适应并为每种情况提供所需内容的结构。

在本章中，我们将学习以下内容：

• 使用 JavaScript 调整网站

• 如何以百分比格式查看对象给结构带来的灵活性

• 如何吸收响应式网格系统的特点

• 如何编写三种不同的响应式网格

• 如何使用 Photoshop 网格模板

• 如何在开始之前设置viewport的meta标签

• 如何使用 Foundation4 Grid 实现线框

使用 JavaScript 调整网站

正如我们在前一章中看到的，我们可以使用媒体查询来识别当前可用的区域并呈现特定的设计自定义。这个属性非常有用，但在旧版浏览器中不起作用，比如 Internet Explorer 8 及更早版本。有两个主要解决方案我们将会深入了解，它们能很好地处理媒体查询：Adapt.js 和 Respond.js。

让我们进一步分析每种解决方案的特点，看看它提供了哪些功能，除了动态捕获设备尺寸（非常类似于@media查询）作为对需要支持旧版浏览器的项目的替代方案。

Adapt.js

以下是 Adapt.js 的特点：

• 捕获浏览器的尺寸后，Adapt.js 仅在需要时提供所需的 CSS。

• 它拥有非常轻量级的文件

在采用之前应考虑以下几点：

• 这个分析浏览器窗口大小的过程是按需进行的，可能会出现短暂延迟，以渲染正确的 CSS。

• 脚本必须插入到代码的开头（在head标签中），页面的初始加载可能需要更长的时间。

Adapt.js 提供了一些默认的 CSS 文件和媒体查询作为建议，可以在我们的网站上使用。以下是adapt.960.gs/默认提供的文件：

如何做

在您下载并将文件放置在项目中之后，将以下代码片段添加到<head>标签中。在下面的代码中，我们能够更改 CSS 文件的默认路径，动态适应的频率（一次或每次窗口更改时），以及基于范围的 CSS 文件：

<noscript>
  <link rel="stylesheet" href="assets/css/mobile.min.css" />
</noscript>
<script>
  var ADAPT_CONFIG = {
    path: 'assets/css/',
    dynamic: true,
       range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
    '1600px to 1940px = 1560.min.css',
    '1940px to 2540px = 1920.min.css',
    '2540px = 2520.min.css'
    ]
  };
</script>
<script src="img/adapt.min.js" />

Respond.js

Respond.js 文件可以从github.com/scottjehl/Respond下载。以下是 Respond.js 的特点：

• 这种解决方案似乎比 Adaptive.js 更容易

• 它有一个轻量级文件

• 您需要首先检查浏览器是否真的需要此脚本，仅在需要时才执行它

• 有两个有用的 API 帮助我们调试

缺点如下：

• 它还在正确的时间执行正确的 CSS 选择方面存在一定的延迟

如何操作

在您下载并将文件放置在我们的项目中之后，只需在head标签中添加以下代码，它就会执行解决方案：

<script src="img/respond.min.js">

提示

Respond.js 使用我们已经应该在代码中使用的@media查询，并动态应用样式。没有额外的工作！

百分比如何给结构提供灵活性

一些老网站，甚至是最近的网站，都不关心灵活的结构，仍然使用像素作为测量单位。像素为我们提供了更大的结构控制和精度。但是，现在，我们不再控制网站将在何处显示（正如我们在第一章中看到的，探索响应式网页设计），这引发了构建灵活结构的需求，其中元素可以拉伸并适应尺寸。

百分比始终按照其父元素中声明的值运行。因此，如果一个div标签的大小为 50%，其父元素的大小为 600 像素，则div标签的大小将为 300 像素，如下图所示：

同样适用于百分比，其中其父元素的大小为对象的实际大小的 50%，则大小为 50%的div标签看起来像是 25%，保持比例。让我们看下面的图：

但是，问题是：如果我们不设置父元素的宽度会怎样呢？Maurício Samy Silva在他的博客www.maujor.com/blog/2013/03/08/por-que-height-100-nao-funciona/中对此进行了很好的解释。在这种情况下，父元素会采用当前视口的默认宽度。换句话说，随着浏览器窗口的调整，此宽度会自动更改，这一事件正是赋予我们灵活结构的力量。

回到之前的例子，其中div设置为 50%，在可用区域内的视觉上看起来是一半大小，如下图所示：

现在您已经了解了结构的流动性的重要性，另一个重要任务是将填充和边距以及百分比转换。例如，当我们需要在大屏幕上显示大的水平填充时，它会产生影响，因为如果同一个网站在智能手机上看到，并且填充已经定义为像素，它将在屏幕上占据大量空间。

我们可以为手机制定一个例外规则，减少这个空白空间。但是，试想一下，为所有元素做这项工作将需要多少努力！最好的选择是将此间距从像素转换为百分比。

将像素转换为百分比

将像素转换为百分比的主题很重要，因为这是魔法开始展现的地方；换句话说，我们将通过一个例子看到如何放弃像素的绝对大小并将其转换为百分比。如果我们的项目的目的是更好地控制元素的灵活性，那么应该特别使用将像素转换为百分比的过程。

让我们练习将以下基于像素的结构转换为百分比：

以下代码是前一个屏幕截图中详细信息的 CSS 代码示例：

#wrap {
 width:960px;
}
#content {
 width:690px;
 float:left;
}
#right-sidebar {
 width:270px;
 float:left;
}

注意

让我们来看看这个神奇的公式：目标 / 上下文 = 结果。

在前述公式中，目标 是以像素为单位的原始元素宽度，在以下代码中为 690，上下文 是其容器的宽度，在此为 960，结果 是灵活的值：

#wrap {
 width:100%; /* container 960 */
}
#content {
 width:71.875%; /* 690 ÷ 960 */
 float:left;
}
#right-sidebar {
 width:28.125%; /* 270 ÷ 960 */
 float:left;
}

提示

分享一点我的经验，我建议在结果之前放置原始值。当我们想再次转换大小并且忘记了原始像素值时，这将产生差异。

我还想强调不要四舍五入数学结果的重要性。这对于元素的灵活性至关重要，可以防止不希望的断裂。

以下图是转换为灵活结构的结果：

为了帮助简化此转换，有一个名为Flexible Math的工具，可以在 responsv.com/flexible-math/ 找到。只要基于父元素大小进行转换的像素计算（正如我们在前一节中看到的）。

还有另一种转换方式，即从 em 转换为字体大小和行高的像素，但我们将在第四章设计响应式文本中更详细地学习。虽然我们正在谈论 EM，但使用的神奇公式将是相同的，需要在其他确定的点上留意一些。

我们将在第五章中看到，准备图像和视频，不指定 <img> 标签的大小只是缩放图像的第一步。后来，我们将详细了解如何使图像流动，并且还有一些在每种情况下最适合显示图像和视频的方法。

如果我们在数学转换上有很多工作，并且它花费了很多时间，我们应该考虑另一种方法。有一种更方便和更快速的方法来获得这种灵活的结构，其名称是响应式网格系统，我们将在以下部分中看到。

什么是响应式网格系统？

网格系统本身可以被标记为开发工具包或一小组 CSS 文件，这些文件将帮助我们快速开发网站。其中一些具有固定宽度的列（可能会根据使用的工具而变化）。列是网格系统的最小度量单位。大多数网格系统包含 12-16 列。间隔是用于在列之间创建空间的边距。

此外，如果设计基于网格，网格系统会节省开发时间。有时，布局创建可能会受到列的限制，但这并不太常见。网格系统的优势在于它们帮助我们实现更好的可读性，并平衡视觉权重、灵活性和整体页面的凝聚性。

为了更好地理解网格系统的工作原理，请查看以下截图，并注意可以将标题区域的宽度测量为 12 列（全宽），而侧边栏区域仅为 3 列：

何时不应该使用网格？如果您的网站布局使用不规则的列尺寸和不规则的间距，则可能无法实现网格的实施。

现在问题来了：响应式网格系统和非响应式网格系统之间的主要区别是什么？

以下是响应式网格系统的特点：

• 它必须在不同尺寸下具有不同的特征

• 它必须在断点之间流动

• 它必须具有足够的控制权来决定哪些列会在哪一点转换

• 类应该在所有断点上都能理想地有意义

响应式网格系统

现在，我们将看到三种不同的应用系统，但为了我们渐进的理解，我想从描述较不复杂的系统开始，然后再描述具有更多选项和资源的系统。

提示

在选择最适合您项目的网格之前，请阅读所有这些网格系统。此外，还有其他类型的响应式网格，我尚未尝试在实际项目中实施。

流动基线网格系统

此开发工具包的目标是为响应式网站的开发提供便捷和灵活性。Fluid Baseline Grid 代码（fluidbaselinegrid.com/）简单、轻量、非侵入性，并且可以根据项目的需求进行定制。

此网格系统基于三列折叠布局：移动设备一列，平板电脑两列，桌面及以上三列。让我们看看它的用法。

要这样设置代码，我们只需在想要内容填充的结构中使用类 g1，然后对于两列使用 g2，三列使用 g3。看下面的代码示例：

<div id="content">
    <div class="g2">
        ...
    </div>
    <div class="g3">
        ...
    </div>
    <div class="g1">
        ...
    </div>
</div>

以下是该代码的预览：

现在，让我们先看一个网站示例，然后尝试使用类来编写结构：

HTML 结果应该如下：

<div id="content">
    <div class="g3">
        ...
    </div>
    <div class="g1">
        ...
    </div>
    <div class="g1">
        ...
    </div>
    <div class="g1">
        ...
    </div>
</div>

你注意到指南针图像在手机屏幕上是隐藏的吗？在这种情况下，解决方案是在手机 CSS 上隐藏轮播图，然后在平板电脑 CSS 上显示它（以及桌面）。

使用 Fluid Baseline Grid 的主要优势如下：

• 流式列

• 具有美观排版标准的基线网格

• 响应式设计行为

• 使用 Normalize.css 修复常见的浏览器不一致性

• 包含了开始所需的最少文件的简单文件结构

• 对 IE6/7/8 的 Polyfills 支持：Respond.js（媒体查询）和 html5shim（HTML5 元素）

流式列默认为最小三列折叠网格，列宽约为 31%，列之间的间隔为 2%。如果网站设计需要更多列，那也没问题，因为可以在 CSS 代码中进行更改。

基线网格为排版带来了跨浏览器的解决方案，改善了可读性，并在文本内部创建了更好的和谐。主要使用的字体是 Georgia 和 Futura，它们可以轻松更改以匹配项目的需求。

Fluid Baseline Grid 设计为移动优先，为我们的响应式设计实现提供了常见的断点。CSS 代码准备从小屏幕开始定制，并根据设备的可用区域在内容显示上建议差异。只要它基于列，Fluid Baseline Grid 就被分为：移动设备一列，平板电脑两列，桌面及其他设备三列。

1140 网格

1140 Grid（cssgrid.net/）有一个简单的结构。它的目标是在定义每个主要元素的宽度时提供更高的代码开发效率。它被分为 12 列，这些列将根据您的偏好合并或不合并。但是，当设计这个项目时，宽度尺寸被限制在最大 1280 px。如果项目不需要在大设备上显示，1140 Grid 对于所有其他较小的尺寸都非常有效。

为了澄清，以下代码显示了您实际上可以这样做：

<div class="container">
   <div class="row">
       <div class="onecol">
           ...
       </div>
       <div class="twocol">
           ...
       </div>
       <div class="threecol">
           ...
       </div>
       <div class="threecol last">
           ...
       </div>
   </div>
</div>

下面的图示展示了结果：

作为我们知识吸收过程的一部分，让我们回到 Pixelab 示例并使用 1140 Grid 进行编码：

<div id="container">
   <div class="row">
        ...
   </div>
   <div class="row">
        <div class="fourcol">
          ...
        </div>
        <div class="fourcol">
          ...
        </div>
        <div class="fourcol last">
          ...
        </div>
   </div>
</div>

行类将内部列居中，并将1140px定义为max-width。

类.onecol，.twocol，.threecol，.fourcol，.fivecol，.sixcol，.sevencol，.eightcol，.ninecol，.tencol，.elevencol和.twelvecol可用于每个列。此外，它们将在任何组合中使用，以便在行内添加的列总和为十二列或更少。在最后一个元素中，请记得也添加一个类last；这将去除额外的边距。

与 Fluid Baseline Grid 相比，其中一些少许不同之处是 1140 Grid 已经实现了更多的列（为开发者提供更多的选项），但是 Fluid Baseline Grid 的开发者们可以自由地在那里实现它。

除了简单的结构之外，1140 Grid 还因以下特点而备受关注：

• 准备好缩放图像的 CSS 代码。

• 百分比间距。

• 浏览器支持（除 IE6 外）

• 最小文件结构

• 可下载的 PS 模板

Foundation4

Foundation4，foundation.zurb.com，是一个完整的框架，内含许多组件。它们是预定义的，并且被专业地样式化，将作为我们项目的基础。仅关注 Foundation4 的网格组件会让我们惊讶，因为它提供了许多选项。

由于下载区域的存在，这个框架是与众不同的，它展示了下面的截图所示的屏幕，因为它给了开发者们以最适合他们的方式开始他们的项目的自由（如果他们已经对网格有一些通用知识）：

但是，不用担心；如果你仍然在学习，它默认使用最常用的值，如 12 列和 62.5 em（1000 px）的最大屏幕尺寸。

Foundation4 中还有其他好的功能，如下所示：

• 预定义的 HTML 类。

• 小网格和大网格。

• 嵌套我们的网格。

• 偏移。

• 居中的列。

• 源顺序。

• 面向移动端。

• 支持浏览器的 Normalize 和 Modernizr 脚本。

• 不支持像 Internet Explorer 7 及更早版本的浏览器。此外，Internet Explorer 8 对网格和一些 UI 组件（如输入切换器）的支持有限。

• 要在 Internet Explorer 8 中使用 Foundation4，它推动开发者使用其之前版本的补充解决方案，该解决方案可在foundation.zurb.com/docs/support.html找到。

该框架值得更多的关注，因为它有更多的选项和优势。这就是我们详细了解它们的原因。在接下来的例子中，我们将使用工具建议的 12 列作为参考。

Foundation4 拥有一堆预定义的 HTML 类，这些类对我们的开发很有帮助，因为所有的代码都已经创建好了，我们只需要通过类名来调用它。在下面的例子中，我们看到一个小类和元素将占据的列数：

<div class="row">
 <div class="small-3 columns">...</div>
 <div class="small-6 columns">...</div>
 <div class="small-3 columns">...</div>
</div>

下图显示结果：

注意到 3、6 和 3 的和等于 12。另外，还有一个选项可以将类从small更改为large。如果我们交换这些类，当我们减小浏览器宽度达到 768 像素时，每个<div>标签将占据最大宽度。这两个类可能会同时出现——在小于 768 像素的小屏幕上显示内容——而在大屏幕上，宽度就像前面的示例中给出的那样。

在这种情况下，代码将如下所示：

<div class="row">
 <div class="small-6 large-5 columns">...</div>
 <div class="small-6 large-7 columns">...</div>
</div>

Foundation4 Grid 允许我们嵌套到任何深度。这个技术通常用于执行相当复杂的设计实现，或者更好地定位表单元素。以下代码是其用法的一个示例：

<div class="row">
 <div class="small-8 columns">8
   <div class="row">
     <div class="small-3 columns">3 Nested</div>
     <div class="small-9 columns">9 Nested</div>
   </div>
 </div>
 <div class="small-4 columns">4</div>
</div>

以下图显示结果：

我们可以使用offset在行中的列之间创建额外的间距。通过调整这个参数，我们可以对齐列的位置。记住，所有的 offset 都位于元素的左侧。同样，数字的和应该等于 12。让我们在下面的例子中看一下这个，第一个div标签填充了两列，然后有两列的偏移，然后另一个div标签填充了八列：

<div class="row">
 <div class="large-2 columns">2</div>
 <div class="large-8 large-offset-2 columns">8, offset 2</div>
</div>

结果如下所示：

centered column类是用来将特定列（而不是内部内容）定位在行的中间的。Foundation4 提供了两个类：large-centered和small-centered。就像我们之前看到的，小版本将显示为前面没有被大版本覆盖的样子。例如，如果我们想要显示一个占据六列并且居中（适用于小屏幕和大屏幕）的div标签，我们应该在之前使用以下代码：

<div class="row">
 <div class="small-6 small-centered columns">6 centered</div>
</div>

结果如下：

也许以下功能有点令人困惑，但当我们想要将源代码放置在相关内容的顶部时非常有用。要做到这一点，我们只需要使用push和pull类。以下功能也会分别影响每个版本（在函数前使用small或large，即large-push-8）或两个版本一起使用：

<div class="row">
 <div class="small-4 push-8 columns">4</div>
 <div class="small-8 pull-4 columns">8, last</div>
</div>

以下是结果：

Photoshop 网格模板

为了在创建设计时方便查看列，有一个名为 Guideguide 的 Photoshop 插件。

Guideguide 插件(guideguide.me/)支持一些版本的 Photoshop，包括：CS5、CS6 和 CC。但是，如果你使用 Photoshop CS4，该插件的 2.03 版本将可用，但不会再更新新功能。这是一个指导我们为 Photoshop 文档创建自定义参考线的工具。

安装 Guideguide 插件并创建一个空白文件后，当我们在 Photoshop 中进行访问时，它将打开下面截图中显示的窗口；我建议使用所示的初始值填充，如果您对网格不太熟悉的话：

然后，点击GG按钮，它会在我们的文档中创建参考线，在布局创建中非常有用。

在开始之前设置 viewport 的 meta 标签

viewport的meta标签通过显示可视区域的一部分来工作。这种配置在我们设计响应式网站时非常重要，因为如果没有它，移动设备浏览器将向用户显示网站的缩小版本。对于它的使用，没有标准的语法，但是所有常见的移动浏览器都支持以下标签：

<meta name="viewport" content="width=device-width">

其他功能，比如initial-scale可以用来定义viewport的meta标签，可以阻止用户在网站中以放大模式打开，并且 maximum-scale会限制用户放大内容。以下代码是viewport限制用户体验的一个例子，不允许使用缩放功能：

<meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">

2a 练习 - 为线框创建布局设计

现在，我们已经有了线框并了解如何操作网格的列，我们需要根据列中的主要元素调整线框，如下截图所示：

在那之后，该是时候给它上色，并设想为所有设备提供最佳的用户体验。

根据第一章中练习 1的线框，探索响应式网站设计，以下截图显示了布局设计的建议：

当我们正在自定义主要元素时，请记住将其保持在指导方针内，这将使下一步更容易。否则，我们将花费比预期更多的时间来编码它。

下图显示了主要元素如何适应列：

练习 2b – 使用 Foundation4 Grid 结构化我们的网站

在看到了一些响应式网格系统的使用（从简单解决方案开始，然后进入更完整的解决方案），让我们使用 Foundation4 Grid 来结构化我们的代码，快速创建响应，并且不需要编写一行 CSS 代码来完成。同时，请记得在 <head> 标签中配置视口。

使用 Foundation4 Grid，执行以下推荐步骤：

1. 开始编写 HTML 脚本。

2. 确定结构中的行并将 row 类添加到现有元素或新的 div 标记中。

3. 测量每个主要元素将填充多少列，并将此值设置为类中。

让我们看看以下 HTML 是如何完成的：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width" />
 <title>Responsive Web Design using jQuery & CSS3</title>
 <link rel="stylesheet" href="css/foundation.css" />
</head>
<body>
 <header class="row">
   <a class="large-3 columns" href="#">LOGO</a>
   <nav class="large-9 columns">
     <ul>
       <li><a href="#">About</a></li>
       <li><a href="#">Training Options</a></li>
       <li><a href="#">Schedules</a></li>
       <li><a href="#">Rates</a></li>
       <li><a href="#">Contacts</a></li>
     </ul>
   </nav>
 </header>
 <div class="row">
   <section class="small-12 columns">
     <img src="img/960x230" alt="FPO for slideshow" />
   </section>
 </div>

 <div class="row">
   <section id="content" class="large-8 push-4 small-12 columns">
     <article>
         <h2>Page title</h2>
         <p>FPO text: Lorem ipsum dolor sit amet...</p>
         <p><a href="#" class="button learn-more">Learn more</a></p>
     </article>
     <article class="subcontent">
         <h2>Page subtitle</h2>
         <p>FPO text: Lorem ipsum dolor...</p>
     </article>
   </section>
   <aside class="large-4 pull-8 columns">
     <h2>Sidebar title</h2>

     <div class="row">
       <div class="small-4 large-12 columns">
<img src="img/aside-1.jpg" class="img-aside" />
     <span>FPO text: Lorem ipsum dolor...</span> <a href="#">See more</a></div>
       <div class="small-4 large-12 columns">
<img src="img/aside-2.jpg" class="img-aside" />
<span>FPO text: Lorem ipsum dolor...</span> <a href="#">See more</a></div>
       <div class="small-4 large-12 columns">
<img src="img/aside-3.jpg" class="img-aside" />
     <span>FPO text: Lorem ipsum dolor...</span> <a href="#">See more</a></div>
     </div>
   </aside>
 </div>

 <section id="banners" class="row">
   <div class="small-4 columns">Banner1</div>
   <div class="small-4 columns">Banner2</div>
   <div class="small-4 columns">Banner3</div>
 </section>

 <footer class="row">
   <p class="large-2 small-9 large-offset-8 columns">All rights reserved. 2013</p>
   <p class="large-2 small-3 columns">icons</p>
 </footer>
</body>
</html>

在这段代码中，我折断了一行额外的内容，使每一行都容易看到，并且还突出显示了网格使用的类。让我们观察每行的列之和：

1. small = 12 列

2. small = 12 列（4 + 4 + 4）和 large = 12 列（每行一个列）

3. small = 12 列（4 + 4 + 4）

4. small = 12 列和 large = 12 列（2 + 8 + 2）

以下截图显示了在大于 768 px 宽度的设备上没有编写任何 CSS 代码的结果：

下图显示了在宽度小于 768 px 的设备上相同站点的屏幕截图：

请放心；网站看起来仍然很糟糕，因为这只是项目的第一步。我们需要做一些视觉调整来完成我们的任务。

提示

我建议你搜索一些漂亮的图片来使用在你的网站上，改善它的外观和感觉。否则，您可以转到placehold.it/ 创建一个占位符来保留图片的空间。

这是一种很好的方法，可以避免修改解决方案附带的 CSS。在这种情况下，我们将创建一个新的 CSS 文件并将其包含在我们的网站上。在 header 部分，在 Zurb Foundation CSS 文件之后，包含您自己的 CSS 代码：

<link rel="stylesheet" href="css/mystyle.css" />

在这个 CSS 中，我们将自定义分成三个部分，应用级联样式，并避免重复代码的部分：

• 两个版本

• 小版本（小于 768 px）

• 大版本（大于 768 px）

下面的代码用于从我们的网站开始定制。随意使用它，只要它只是匹配布局的建议。

#banners div {
  text-align: center;
  height: 100px;
  line-height: 100px;
  background: #f65050;
}
#banners div:first-child {
  background: #7ddda3;
}
#banners div:last-child {
  background: #506ff6;
}
@media only screen and (max-width: 48em) {
  .subcontent,
  aside span {
    display: none;
  }
  aside .img-aside {
    display: block;
    margin: 0 auto;
  }
  aside div {
    text-align: center;
  }
}
@media only screen and (min-width: 48em) {
 aside .img-aside {
    float: left;
  }
}

摘要

在本章中，我们学习了三种使用 JavaScript 解决方案呈现特定 CSS 代码的不同方法：Adapt.js、Respond.js 和 Breakpoints.js。现在，我们也明白了如何通过数学运算将像素转换为百分比，并发现结果。我们还学习了什么是响应式网格系统，以及如何使用每种类型的响应式网格系统。

最后，我们开始使用网格（基于来自第一章的线框图，探索响应式 Web 设计），编写我们的网站，这与下一章相连接，下一章我们将涵盖不同的方法来实现响应式菜单导航，例如切换菜单、侧栏菜单（如 Facebook 等）等。

第三章：构建响应式导航菜单

当网站正在建设时，header 部分是一个重要的部分。在这个区域有一些常见的元素，如徽标、登录、导航选项、注册选项和搜索字段。但规划这个区域并不太容易，因为如果我们把所有元素放在一起，我们会给用户一个杂乱的导航。另一个选择是为我们的头部保留大量的空间，但这可能会在智能手机上遮挡更多的屏幕上方内容。预期的结果是占用少量的空间来处理您的标题，并有效地处理那个空间以显示这些元素。

在这一章中，我们将分析一些类型的导航菜单，在何种情况下以一种清晰直观的方式使用每种类型，并避免使用户感到沮丧。这就是为什么我们设计我们的导航菜单的方式，让用户能够轻松清晰地看到其中的主要和子项对我们很重要。

在这一章中，我们将：

• 设计一个改善可用性的菜单

• 查看最常用的响应式导航模式以及如何编写每种类型的代码

• 通过做练习来应用我们最近获得的知识

通过改善其可用性来设计一个菜单

在响应式网站上，特别是对于那些使用移动优先概念的网站，内容是用户访问我们网站的主要原因，所以我们必须提供一个合理的空间在屏幕上展示内容之前。

为了提供这个空间，我们需要更好地处理菜单的显示方式，以便根据设备提供另一种视图。

无论如何，目标都是相同的：使用户更容易找到他们正在寻找的内容，而不会对有用的区域产生重大影响。当菜单被组织好时，我们给了用户自由选择通过我们的网站导航到哪里的权利。

事实上，关于这两种界面之间的决斗（顶部和左侧导航菜单）没有一个答案。有时导航在一个上下文中运作良好；然而，在另一个上下文中可能不那么有效。要找出哪种导航最适合我们的站点，了解顶部和左侧导航菜单在哪些不同的上下文中效果最好是很重要的。让我们在五轮比赛中分析这场战斗：

• 扫描：在这方面，左侧导航菜单获胜，因为它占用更少的空间来显示所有项目，并且促进了垂直扫描（对用户更自然）。

• 页面空间：在这方面，顶部导航获胜，因为它使用最小的垂直空间，将内容区域保留给内容。

• 项目优先级：在这一轮中，顶部和左侧导航菜单之间打成平手。顶部导航的项目没有相同的权重，因为最左边的项目将在其他项目之前被阅读，但这取决于内容类型。

• 可见性：在这一轮中，顶部和左侧导航菜单之间存在一种平衡。顶部导航菜单更容易看到，因为它通常靠近标志。在左侧导航中，一些项目可能隐藏在折叠下面。

• 主题和兴趣：在这一轮中，顶部和左侧导航菜单之间存在一种平衡。如果我们的网站针对广泛的受众提供各种内容（例如电子商务网站），左侧导航菜单对这些用户更好，因为他们拥有各种兴趣，并且是选择要查看的项目的人。然而，对于特定主题，顶部导航菜单更合适，因为快速找到高优先级项目更为重要。

最常用的响应式导航模式

规划移动导航并不是一件容易的事情，因为我们需要以响应式的方式提供不显眼且快速访问特定内容，这取决于网站的目标。经过长时间的研究，布拉德·弗罗斯特 在他对流行菜单技术的研究中总结了一些趋势，并建立了菜单类型概念的模式。

根据他的文章（bradfrostweb.com/blog/web/responsive-nav-patterns/），导航模式有：

• 顶部导航

• 底部锚点

• 切换菜单

• 选择菜单

• 仅底部

• 多重切换

• 切换和滑动

• 侧边栏

让我们检查每个，看看它们的样子，并了解哪种方法更适合你的项目。

顶部导航

顶部导航模式是因为它需要一点额外的工作而成为互联网上最受欢迎的模式。要实现这个解决方案，我们只需要保持菜单在顶部，正如我们在下面的截图中所看到的那样：

如何做…

在这种情况下，如前面的截图所示，在智能手机上显示菜单位于标志的上方。因此，让我们编写这个 HTML 脚本来理解这些变化：

<nav id="site-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Email</a></li>
  </ul>
</nav>
<h1 id="logo">LOGO</h1>

如果你喜欢重新排列这些元素（将标志显示在顶部然后是菜单），你需要反转元素的顺序，在代码中将 <h1> 标签移到 <nav> 标签之前。

不幸的是，<nav> 标签不受 Internet Explorer 8 及更低版本的支持。然而，这个标签有很好的语义含义，我推荐使用它。我们将在第十章中看到，Ensuring Browser Support，如何使用 Html5shiv with Modernizr 处理它。通过采用移动优先的概念，并在 CSS 中使用这个第一个代码块，我们可以自定义菜单的显示方式，通过填充水平区域来填充水平边距，并将菜单对齐到中心：

/* mobile-first */
#site-nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
}
#site-nav li {
  display: inline-block;
  margin: 0 5%;
  line-height: 1.5;
}
#logo {
  text-align: center;
  clear: both;
}

对于大于 768 像素的屏幕，菜单宽度减小到 70%，并向右浮动。此外，标志现在向左浮动，宽度为 30%，如下面的代码所示：

提示

这些百分比只是示例的一部分。

/* desktop */
@media only screen and (min-width: 768px) {
 #site-nav ul {
   width: 70%;
   float: right;
 }
 #logo {
   float: left;
   width: 30%;
   clear: none;
 }
}

提示

实施起来非常简单，但是当菜单项超过三行时要小心，因为它将耗费大量重要区域。

页脚锚点

页脚锚点是一个聪明的解决方案，其主要目标是在不影响移动用户在小区域中看到我们的网站的情况下，为内容保留更多有用的空间。为此，需要将主菜单重新分配到页脚，并只在页眉中保留一个锚点链接，用户点击它时将聚焦于菜单。

以下截图表示了这种导航模式仅应用于智能手机，空间较小：

如何做到这一点

让我们从第一个导航模式使用相同的 HTML 代码开始。但是现在我们将菜单移动到 DOM 的底部，就在</body>标签之前插入下面的链接，因为当用户点击它时，网站将聚焦于导航菜单：

<a id="link-to-menu" href="#site-nav">☰ Menu</a>

注意

十进制代码☰是代表菜单的符号，因为它显示了一个有三条线的符号。

在智能手机的 CSS 代码中，我们需要：

• 为菜单项创建一个样式。一些开发人员喜欢逐行列出这些项目（便于触摸），但这取决于你。

• 为页眉按钮创建一个样式（将用户转到菜单）。

CSS 代码如下所示：

/* mobile-first */
#site-nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
}
#site-nav li a {
  display: block;
  border-top: 1px solid #CCC;
  padding: 3%;
}
#site-nav li:last-child a {
  border-bottom: 1px solid #CCC;
}
#link-to-menu {
  position: absolute;
  top: 10px;
  right: 10px;
}

对于平板电脑和桌面（屏幕宽度大于 768 px 的设备），最好的方法是隐藏此页眉按钮。现在，我们需要在页眉上展示菜单，而不对 HTML 做任何更改（我们只是将其移到页脚区域）。

让我们通过设置菜单位置在顶部并隐藏页眉按钮来实现以下代码：

/* tablet and desktop */
@media only screen and (min-width: 768px) {
 #site-nav {
   position: absolute;
   top: 0;
   left: 30%;
   width: 70%;
 }
 #link-to-menu {
   display: none;
 }
 #site-nav li {
   display: inline-block;
   margin: 0 5%;
   padding: 0;
   width: 18%;
   border: none;
   line-height: 1.5;
 }
 #site-nav li a {
   display: inline;
   border: none;
   padding: 0;
 }
 #site-nav li a,
 #site-nav li:last-child a {
   border: none;
 }
}

切换菜单

切换导航模式与以前的模式比几乎具有相同的行为。真正的区别在于当用户点击页眉上的链接时，而不是将用户引导到锚定菜单，菜单会在页眉之后滑下来，从而为用户提供令人印象深刻的效果和快速访问主链接。它的实现相对容易，我们很快就会看到。

提示

为了提高动画性能，尝试使用max-height属性

响应式导航插件

响应式导航插件，responsive-nav.com/，是为小屏幕创建切换导航的轻量级解决方案。我们喜欢三个主要特点，它们是：

• 使用触摸事件（我们稍后会更好地理解它）和 CSS3 过渡效果

• 构建此插件时要考虑到无障碍，并与禁用 JavaScript 一起使用。该插件不需要任何外部库

• 适用于所有主要桌面和移动浏览器，包括 IE 6 及更高版本

如何做到这一点

下载此解决方案的文件后，让我们将以下代码插入到我们的 HTML 的<head>标签中：

<link rel="stylesheet" href="css/responsive-nav.css">
<script src="img/responsive-nav.js"></script>

我们还将使用第一个示例的相同 HTML 代码，但是在 DOM 的</body>闭合标签之前，我们需要插入执行脚本的函数：

<script>
var navigation = responsiveNav("#site-nav");
</script>

现在，让我们从页脚锚点模式中插入相同的菜单样式：

nav ul {
  list-style: none;
  text-align: center;
  padding: 0;
}
.menu-item a {
  display: block;
  border-top: 1px solid #CCC;
  padding: 3%;
}
.menu-item:last-child a {
  border-bottom: 1px solid #CCC;
}

就是这样了。我们完成了。有一些可自定义的选项，可以增强我们的功能实现。随意测试其他选项，但默认情况下已设置为 CSS3 动画，显示时间为 400 毫秒，在自动生成的切换按钮之前显示，或者您可以按照以下方式定义您自己的设置：

<script>
var navigation = responsiveNav("#site-nav", {
  customToggle: "#mybutton"
});
</script>

在下面的截图中，我们将看到响应式导航窗口正在使用，它在智能手机上更改菜单样式，并以不显眼的方式显示菜单：

提示

切换按钮的定制和菜单中的橙色默认情况下不显示。这只是插件创建者在其演示中提出的建议之一。

选择菜单

一种显著减少菜单占用空间的方法是使用此模式，其中所有菜单项都包装在<select>标签中。它避免了一些对齐问题，并确保了跨浏览器解决方案。

然而，该方法存在影响可用性、可访问性和 SEO 的问题。乍一看，主导航菜单的选择菜单看起来不正确，因为它与设计不协调。也许用户会觉得这很尴尬，或者可能会与select表单元素混淆。

TinyNav.js jQuery 插件

TinyNav.js jQuery 插件，tinynav.viljamis.com/，非常有用，可以将<ul>或<ol>导航转换为小屏幕的选择下拉菜单，当用户选择一个选项时，它会自动导航到正确的页面，而无需额外努力。它还可能选择当前页面，并自动为该项目添加selected="selected"。

操作方法

让我们开始使用第一个导航模式的相同 HTML 代码。下载 TinyNav 插件后，我们将在<head>标签中包含以下代码：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/tinynav.min.js"></script>

并在</body>闭合标签之前包含以下代码：

<script>
$(function () {
  $("#site-nav ul").tinyNav()
});
</script>

在我们的 CSS 文件中添加以下代码，该代码隐藏了此导航模式，并在平板电脑和台式机上设置了常见的菜单样式。此外，它还专门为宽度小于 767 px 的设备显示了解决方案：

/* styles for desktop */
.tinynav {
  display: none;
}
#site-nav {
  float: right;
  width: 80%;
  padding: 0;
}
#site-nav li {
  display: inline-block;
  margin: 0 2%;
  padding: 0;
  width: 15%;
  text-align: center;
  line-height: 1.5;
}
/* styles for mobile */
@media screen and (max-width: 767px) {
  .tinynav {
    display: block;
  }
  #site-nav {
    display: none;
  }
}

TinyNav 还提供了一些选项，例如在<select>元素之前插入标签，将菜单选项设置为“活动”的当前页面，正如我之前提到的，并定义在之前未选择其他选项时<select>的起始值。在这里，我们可以看到如何使用这三个选项：

$('#site-nav ul').tinyNav({
  active: 'selected',
  label: 'Menu',
  header: 'Navigation'
});

此导航模式可以在所有设备上实现，无需额外工作。在以下截图中显示的示例中，请注意插件仅影响小型设备：

仅页脚

仅页脚导航类似于页脚锚点方法，除了header部分中的link锚点之外。

在使用此导航模式时要小心，因为用户可能找不到页脚上的菜单，每当他们想要访问其他菜单选项时，他们可能必须滚动到末尾。这种导航模式可能适用于内容较少且需要较少用户努力滚动的网站。

如何操作

简单地将菜单移到 DOM 的底部。

提示

请记住，如果我们像这样更改代码，它将直接影响所有设备上菜单的视觉定位。在应用此技术之前，请确保您的网站不会太长，因为大多数用户希望它位于网站顶部。

多重切换

多重切换模式几乎与切换菜单相同，因为它在头部之后也会滑动下来，但它是为复杂菜单而设计的，其中至少有一个嵌套子菜单。当用户点击头部按钮时，菜单就会弹出到内容上。如果用户点击父类别，则子菜单将滑动下来显示其子项。

如何操作

这是本示例中将使用的 HTML 代码。我们将使用<input type="checkbox">元素作为菜单的状态控制器（打开或关闭），并且用户不会看到它。稍后我将更详细地解释这个技术。

<h1 id="logo">LOGO</h1>
<label class="link-to-menu" for="toggle" onclick>☰ Menu</label>
<input id="toggle" type="checkbox" />
<nav>
 <ul id="site-nav">
   <li><a href="" id="back" class="before"> Back</a></li>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li class="current">
     <a href="#" class="contains-sub after">Projects</a>
   <ul class="submenu">
     <li><a href="#">Project 1</a></li>
     <li><a href="#">Project 2</a></li>
     <li><a href="#">Project 3</a></li>
   </ul></li>
   <li><a href="#">Blog</a></li>
   <li><a href="#">Email</a></li>
 </ul>
</nav>

下一步是自定义菜单样式。由于它需要大量代码，我强烈建议下载本书提供的整个 CSS 源代码作为此模式的建议。

让我解释一下可能会使您困惑的两段代码。在 CSS 文件的开头有带有值“ \0025Bc”（向下箭头）和“ \0025C0”（之前的箭头）的属性，它可能会呈现为箭头字符而不是此代码。此外，#toggle复选框应保留在页面中（我们不能只将其设置为 display:none），但不在可见区域内：

.after:after {
  content: " \0025Bc";
  font-size: 0.5em;
}
.before:before {
  content: " \0025C0";
  font-size: 0.5em;
}
.link-to-menu {
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 100;
}
#toggle {
  left: -9999px;
  position: absolute;
  top: -9999px;
}
#site-nav ul {
  left: 0;
  list-style: none;
  position: absolute;
  right: 0;
  top: 4em;
  z-index: 10;
}
#site-nav a {
  display: block;
  height: 0;
  line-height: 0;
  overflow: hidden;
  text-decoration: none;
  transition: all 0.5s ease 0s;
}

在 CSS 代码中稍微中断一下，因为我想更详细地解释一下子菜单的#toggle复选框的功能。

当单击link-to-menu标签时，<a>标签将其高度设置为3em。此外，我们需要准备样式以增加链接的高度，因为 jQuery 将在具有submenu的<li>元素中输入open类：

#toggle:checked ~ nav #site-nav a {
  line-height: 3em; height: 3em; border-bottom: 1px solid #999;
  position: relative; z-index: 1; }
  #toggle:checked ~ nav #site-nav .submenu li,
#toggle:checked ~ nav #site-nav .submenu a {
  height: 0; line-height: 0; transition: 0.5s; }
  #toggle:checked ~ nav #site-nav .submenu a {
  padding-left: 7%; background: #555; }
#toggle:checked ~ nav #site-nav .submenu.open li,
#toggle:checked ~ nav #site-nav .submenu.open a {
  height: 3em; line-height: 3em; }

还要记得在<head>标签中包含jquery库：

<script src="img/jquery-1.9.1.min.js"></script>

几乎在 DOM 的末尾（</body>结束标记之前），我们将执行以下脚本来管理仅对子菜单插入open类的操作，以控制将显示哪个子菜单：

<script>
$(document).ready(function() {
  $('a.contains-sub').click(function() {
    if($(this).siblings('ul').hasClass('open')){
      $(this).siblings('ul').removeClass('open');
    } else {
      $(this).siblings('ul').addClass('open');
    }
  return false;
  });
});
</script>

期望的视觉效果如下截图所示：

切换和滑动

这种模式类似于多重切换模式，但不仅仅是切换子菜单，而且在单击顶级链接时，子菜单会从左向右滑动。有一个back链接以便用户导航。我真的很欣赏这种交互效果，它肯定会给用户留下深刻的印象。

如何做

让我们使用与多重切换模式相同的 HTML 代码进行此示例（包括从 <head> 标签调用 jQuery 脚本）。

关于 CSS 代码，我们将使用多重切换模式的相同代码，但在文件末尾插入以下代码。切换模式和滑动模式与多重切换模式的主要区别是子菜单的新箭头字符（右箭头）；子菜单显示在但不在可见区域上：

.after:after {
  content: " \0025B6";
  font-size: 0.5em;
}
.submenu {
  position: absolute;
  left: -100%;
  top: 0;
  height: 100%;
  overflow: hidden;
  width: 100%;
  transition: all 0.75s ease 0s;
  z-index: 10;
}
.submenu.open {
  left: 0;
}

使用相同的建议，以下屏幕截图显示了在点击 Projects 链接之前和之后的确切时刻（在这种情况下，仅在智能手机上实现）：

在 DOM 几乎结束时（就在 </body> 结束标签之前），我们将执行几乎与之前看到的相同的脚本，但现在添加了一个功能。

以下是我们在之前的示例中使用的相同代码，用于菜单显示控制

<script>
$(document).ready(function() {
  $('a.contains-sub').click(function() {
    if($(this).siblings('ul').hasClass('open')){
      $(this).siblings('ul').removeClass('open');
    } else {
      $(this).siblings('ul').addClass('open');
    }
    return false;
  });

以下代码的一部分处理添加/移除子菜单的open类的功能。每当通过点击父元素在元素中设置此类时，子菜单可能会水平滑动在屏幕上。

  $('ul.submenu a.contains-sub').click(function() {
    if($(this).offsetParent('ul').hasClass('open')){
      $(this).offsetParent('ul').removeClass('open');
    } else {
      $(this).offsetParent('ul').addClass('open');
    }
    return false;
  });
});
</script>

侧栏菜单

如果你使用过 iPhone 应用或现在遵循侧栏菜单约定的任何其他应用，你就会在原生应用上看到一个侧栏面板。如果你点击菜单按钮，面板将滑动并占用部分有用的设备区域。

jPanelMenu jQuery 插件

jPanelMenu 插件，jpanelmenu.com/，是一个轻量级的 JavaScript 解决方案，它隐藏了您指定的菜单，并在我们单击头部按钮触发操作时显示它。jPanelMenu 有一些有趣的选项可供附加，例如带有持续时间和效果的动画、键盘快捷键和选择方向。我们很快将看到具有这些功能的示例。

所以，下面的屏幕截图是仅针对智能手机实现的侧栏菜单样式建议。像往常一样，我们保留原始的顶部菜单供平板电脑和台式机使用：

如何做

让我们从 <head> 标签中开始包含以下 CSS：

<link rel="stylesheet" href="css/style.css">

然后，我们将使用几乎与页脚导航模式相同的 HTML 代码，我们将菜单移动到 HTML 结构的最后部分（页脚区域），并在页面标题中插入以下链接，因为当用户点击它时，网站将专注于导航菜单：

<header class="main">
  <a id="link-to-menu" href="#menu">☰ Menu</a>
  <nav id="site-nav">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Blog</a></li>
      <li><a href="#">Email</a></li>
    </ul>
  </nav>
</header>

下载 jPanelMenu 后，让我们在 <head> 标签中包含以下代码：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.jpanelmenu.min.js"></script>

也在</body>结束标签之前包括以下代码。此外，该插件还提供一些很酷的选项，如定义菜单出现时使用的效果、方向和持续时间，键盘快捷键以及一些回调函数：

<script>
$(document).ready(function() {
  var jPM = $.jPanelMenu({
    menu: '#site-nav',
    openPosition: '33%',
    duration: '300',
    direction: 'left',
    openEasing: 'easy-in',
    trigger: '#link-to-menu'
  });
  jPM.on();
});
</script>

对于这种模式，不需要特定的 CSS 代码，但仍然需要创建我们自己的 CSS 样式来美观地显示菜单。

练习 3 - 使用切换菜单解决方案自定义菜单

在了解了八种响应式菜单及如何实现它们后，让我们选择切换菜单来在我们的网站上实现。

如果您正在建立自己的网站，请随意分析考虑每种菜单导航模式的所有功能，然后选择最佳选项。

总结

在本章中，我们学习了如何根据不同情况使顶部和左侧导航更有效。我们还学习了使用 CSS3 或 JavaScript 插件来实现八种不同的导航模式。

在下一章中，我们将介绍处理文本的响应式字体大小的方法。此外，我们将使用 CSS3 和三个很棒的 JavaScript 插件来自定义字体系列，为标题添加更多创意。

第四章：设计响应式文本

谈到响应式标题时，我们谈论的是灵活性。因此，在字体大小上使用固定的度量也应该是动态的。过去几年中它是如何实现的与现在的差别在于，早期我们只考虑了两种显示内容的方式：打印和屏幕。尽管时代变化，但对文本适应性的担忧仍然存在。

我们认为排版是我们设计的基础和我们 CSS 的支柱，因为我们网站的主要目标是通过回答用户的问题来向他们提供信息。避免创建十种不同的副标题样式是一个好的做法，为了做到这一点，我们必须根据我们网站的主题计划几个不同的标题。

在本章中，我们将学习：

• 理解并将文本转换为相对单位

• 盒子模型和段落间距

• 为漂亮的响应式标题自定义字体系列

• 自动管理字体大小

理解并将文本转换为相对单位

使用相对单位的主要优势之一是，当用户修改基本元素（来自浏览器）的字体大小时，所有字体大小都会按比例增加/减小，从而产生级联效应。

这些天，几乎每个浏览器都将基本元素<html>的默认设置设为 16 px。然而，如果用户想增大浏览器字体大小以便更容易阅读，这个值可以在用户端进行修改。

在谈论最常用的测量单位之前，我们想要强调两个单位，因为它们的流行度令人印象深刻，它们是：vw（视口宽度）和 vh（视口高度）。

这些视口单位在大多数常用的浏览器中仍然不太受欢迎，但我建议您随时关注www.w3.org/TR/css3-values/或caniuse.com/viewport-units，因为这些单位使得根据浏览器大小调整字体大小的比例更加容易。

因此，最近最常用的相对单位在下一节中给出。

相对单位 – 百分比

百分比是相对于容器元素的，它更多用于创建结构，正如我们在第二章中所学到的 设计响应式布局/网格。然而，使用它设置我们的字体大小也没有问题。示例代码如下：

body {
  font-size: 100%;  /* base 16px /*
}
p {
  font-size: 87.5%; /* 14px ÷ 16 */
}

一些开发人员更喜欢将正文的字体大小定义为固定的 62.5%（10 px）以便计算。在这种情况下，我们可以将子元素定义为 150% 代表 15 px，190% 代表 19 px，依此类推。虽然这种方法使得识别相应值更容易，但它可能只有在字体大小的第一级级联中有所帮助。

相对单位 – em

em 单位是相对于其父元素的计算字体大小。在下面的示例中，我们想要将子元素的字体大小转换为20px：

body {
  font-size: 1em; /* base 16px /*
}
p {
  font-size: 1.25em; /* 20px ÷ 16 */
}

有一个非常好的网站帮助我们进行这个计算，pxtoem.com。让我们看看如何在以下截图中的组件上使用此工具；在左列中，我们定义基础字体，结果显示在中间的列中。此外，对于从 6px 到 24px 的不同尺寸，我们可以使用右列进行转换。

因此，请记住，在最终值前（当我们进行转换时）始终包含 px 值（正如我们在第二章中推荐的那样，设计响应式布局/网格）。我们强调这个提示，因为在处理字体大小时，有很多层叠样式。例如，考虑以下图：

相对单位 – rem

rem 来源于 CSS3，代表根 em，相对于根元素（或 HTML 元素）。换句话说，在<html>元素上重新定义字体大小，所有的 rem 单位都可能按比例缩放此基本元素，而不是其父元素。与 em 相比，这是唯一的区别。

让我们看看如何将前面图中的这些尺寸转换为 rem：

body {
  font-size: 1em; /* base 16px /*
}
section,
section li strong {
  font-size: 14px; /*  fallback for IE8 or earlier  */
  font-size: 0.875rem; /* 14px ÷ 16 */
}
section li {
  font-size: 12px; /* fallback for IE8 or earlier  */
  font-size: 0.750rem; /* 12px ÷ 16 */
}

下面的做法可能节省大量时间，并有助于分析页面是否需要根据内容密度增加更多的空白空间。

尝试在所有主要结构开发之前编写文本排版的文档。我们通过生成包含所有主要 HTML 元素的模板文档，其中包含基于网站设计的正确样式表，来实现这一点。

使用 box-sizing 属性改进元素尺寸

所谓的盒子模型，如下面的屏幕截图所示，需要计算以找出包括边框和填充在内的元素的总宽度，现在已经过时了：

下面的示例显示了将有用区域分为两个带有每个容器边距百分比为 5％和 2px 边框的 div 的概念，这将使宽度计算更加困难：

div.splitted {
  padding: 0 5%;
  border: 2px solid black;
  float: left;
  width: ?; /* real value= 50% - 10% - 4px */
}

在 CSS3 中，我们有box-sizing属性，其值为border-box，意味着此宽度值已经考虑了填充和边框尺寸。虽然在 Internet Explorer 浏览器的 8 版本及更高版本中运行良好，但该属性在 IE6 和 IE7 上并不完全有效。如果您需要为这些浏览器提供支持，有一个补丁可以完成这个补充任务，可以在github.com/Schepp/box-sizing-polyfill找到。

让我们看看它如何简化整个计算，以便在这个示例上工作：

div.splitted {
  padding: 0 5%;
  width: 50%;
  border: 2px solid black;
  float: left;
}

我们可以看到在下面的代码中，我们可能在执行计算和分析屏幕上的干净或空白空间时更少遇到困难。此外，许多人将这种 padding 间距与 em 基于字体大小相关联，因为在某些情况下它可以避免比例计算。

div.splitted {
  padding: 0 0.5em;
  width: 50%;
  border: 2px solid black;
  float: left;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

目前，一些浏览器需要上述前缀，但通过这种方式使用它们，我们已经覆盖了它们。此外，同样的填充可能也适用于垂直间距；例如，请考虑以下代码：

div.splitted {
  padding-top: 1em;
}

为了创建美丽的响应式标题，定制字体系列

字体允许您为用户创建更吸引人的网站，并始终保持主题风格，而无需制作大量标题图像，每个标题都有一个。

提示

选择字体非常重要，因为它可能会影响用户对内容的吸收，或者可能无法展示我们工作的一页或两页以上。

@font-face 是一个 CSS 规则，允许设计师使用未安装在用户机器上的非标准网络字体，并帮助快速更改所有标题。@font-face 方法的重大好处是它不会用图像替换常规字体，并且还为响应式网页设计提供所需的灵活性。

提示

@font-face 只支持使用 EOT 字体的 IE8 或更早版本。此外，Safari iOS 4.1 及更低版本仅支持 SVG 字体。我们将在下一个主题中看到如何轻松提供此支持。

我们真的推荐访问www.google.com/fonts这个网站，以查看各种字体，尤其是字体的作者。请在使用之前阅读每种字体的许可证，确保可以商业使用。

属性 @font-face 的基本用法是定义这个规则样式，font-family 是以后调用字体的标签，src 是字体的位置，以及 font-weight（对于普通字体不需要，但对于其他一切，如粗体和细体，都是必需的）。例如，请考虑以下代码：

@font-face {
  font-family: "Kite One";
  src: url(/fonts/KiteOne-Regular.ttf);
}

然后，只需像其他样式规则中的任何其他字体一样使用它：

p {
  font-family: "Kite One", Helvetica, Arial, sans-serif;
}

然而，还有其他更好的方法。我们将清楚地看到如何使用 Font Squirrel、Fit Text、Slabtext、Lettering 和 Responsive Measure。

使用 Font Squirrel 工具生成

Font Squirrel 有一个很棒的工具，允许我们获取桌面字体文件并生成其网络对应物。此外，为我们特定字体生成正确代码和文件的服务是完全免费*。

*只有服务是免费的。请记住，每个字体系列都有自己的许可证。强烈建议用户在使用之前阅读字体许可证。

在网站 www.fontsquirrel.com/tools/webfont-generator 上，我们可以找到关于其主要特性的更多信息，这些特性包括：

• Font Squirrel 不需要很多 CSS 技能

• 它提供了一个额外的区域来提高加载性能（专家模式）

• 生成的代码/文件支持使用旧浏览器的用户

• 资源工具包完全免费

操作方法

首先访问 Font Squirrel 网站，然后点击 添加字体 以选择您的个人字体或已经拥有正确许可的字体。然后，选择 基本 选项（暂时），并下载您的工具包。

在解压下载的文件后，我们应该在 CSS 文件的开头添加以下代码。以下代码将允许 CSS 文件访问字体文件，并根据情况提供正确的字体：

@font-face{
  font-family: 'kite_oneregular';
  src: url('kiteone-regular-webfont.eot');
  src: url('kiteone-regular-webfont.eot?#iefix') format('embedded-opentype'),
  url('kiteone-regular-webfont.woff') format('woff'),
  url('kiteone-regular-webfont.ttf') format('truetype'),
  url('kiteone-regular-webfont.svg#kite_oneregular) format('svg');
  font-weight: normal;
  font-style: normal;
}

每当我们想要使用新字体时，只需像使用 @font-face 规则一样调用它，如下面的代码所示：

p {
  font-family: 'kite_oneregular', Helvetica, Arial, sans-serif;
}

如果我们回到下载页面，Font Squirrel 还将允许您获取字体的子集，通过选择 优化 和 导出 模式显著减小文件大小。为了展示这种显著性，我们添加了相同的 Kite One 字体，并尝试了所有三种设置。总结结果，字体文件中的字形（字符）的哈希直接与字节大小相关，并且我们想要添加多少资源。

基本 设置保留字符不变。 优化 设置将字符减少到大约 256 个。在某些情况下，Kite One 字体的字符少于这个数字时，不会进行优化。

通过选择 专家 模式并仅包括 基本拉丁 设置，然后手动添加我们需要的字符，我们可以看到最大的节省。

让我们尝试一起按照 专家 Font Squirrel 设置的步骤来做：

1. 点击 添加字体，选择要使用的字体文件。

2. 在 渲染 下，取消选中 修正垂直度量。

3. 在 字体格式 下，如下截图所示，选择 SVG ：

4. 在 子集 下，勾选 自定义子集...。

5. 在 Unicode 表 下，仅选择 基本拉丁。

   提示

   这假设字体只使用英文字符；对于其他语言，请仅添加您需要的字符。

   在某些网站上，诸如 ’、‘、“ 和 ” 等符号也很重要，因此将它们复制并粘贴到 单个字符 字段中，如下图所示：

   

6. 验证 子集预览 中生成的图像，如果需要可以进行调整。

7. 在确认您上传的字体符合网络嵌入的合法资格后，只需点击 下载您的工具包。

FitText 插件

FitText 是一个使字体大小灵活的 jQuery 插件，它是一个越来越受欢迎的实用程序，使得灵活的显示类型更加易于使用。它通过缩放标题文本以填充父元素的宽度来工作。如果您想要快速演示此插件，以分析其灵活性有多惊人，您可以在插件网站 fittextjs.com/ 上查看其使用情况。

操作方法

在插件的 Github 网站github.com/davatron5000/FitText.js上下载此解决方案的文件后，让我们将以下代码插入到我们的 HTML 中：

<h1 id="responsive_headline">My title using FitText</h1>

在 HTML 的底部（在</body>闭合标签之前），我们需要添加 jQuery 和 Fittext 库。然后，您必须执行应用于您的标题的插件：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.fittext.js"></script>
<script>
  $("#responsive_headline").fitText();
</script>

默认情况下，插件将设置字体大小为元素宽度的 1/10。有两种修改此标准字体大小控制的方法：配置压缩器和定义最小和最大尺寸。

通过使用压缩器，您将需要指定压缩值，例如，1.2可以更缓慢地调整文本大小，或者0.8可以更少地调整文本大小，如以下代码所示：

<script>
$("#responsive_headline").fitText(1.2);
</script>

我们还可以通过定义最小和最大字体大小来修改此标准字体大小控制，以便在希望保留层次结构的情况下提供更多控制，如以下代码所示：

<script>
$("#responsive_headline").fitText(1,{ minFontSize: '20px', maxFontSize: '40px' });
</script>

SlabText 插件

SlabText 是一个插件，可以让您构建大、美丽且完全响应式的标题，从而使任何人都能够制作大、粗体且响应式的标题变得更容易。该脚本在调整每一行以填充可用的水平空间之前将标题拆分为行。每行设置的理想字符数通过将可用宽度除以像素字体大小来自动计算。

以下是其特点：

• SlabText 插件完全响应式，并为具有完全响应式特性的手机而构建

• 颜色控制 选择部分的背景颜色、文本和文本阴影颜色

• 额外选项 设置一些填充，并确定文本阴影的长度和 图像叠加 通过 CSS3 背景剪辑上传图像并将其叠加到文本上

• 字体控制 选择您自己的字体，并对字体拥有最终控制权

• 可克隆的 根据需要克隆部分，并创建一大堆克隆

• SlabText 插件允许您手动换行

• 它的压缩版本仅有 4 KB

• 它具有大量水平空间的标题，以在各种浏览器中更好地填充显示器

• 请务必在下载所有@font-face字体之后调用该脚本

因此，让我们从github.com/freqDec/slabText/下载此插件并进行实验。

如何操作

首先，我们需要为header标签添加一个 ID，以便在 JavaScript 中选择，然后在 HTML 代码的闭合</body>标签之前插入<script>标签。请考虑以下示例：

<header>
  <h1 class="page-title">Linux commands: New users adds new users... fast & furious!</h1>
</header>

以下是提出解决方案的脚本：

<script>
$(".page-title").slabText();
</script>

但是，与其保持自动化不如将行分解为不同的部分，修改用户感知和我们网站之间的通信：

<header>
  <h1 id="specific-title"></h1>
</header>

脚本如下：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.slabtext.min.js"></script>
<script>
var stS = "<span class='slabtext'>",
    stE = "</span>",
    txt = [
      "Linux commands:",
      "Newusers",
      "adds new users...",
      "fast & furious!"];
$("#specific-title").html(stS + txt.join(stE + stS) + stE).slabText();
</script>

以下屏幕截图显示了两种状态，在运行强制手动换行代码之前（左侧）和之后（右侧）：

若要了解更多选项，请访问创建者的页面freqdec.github.io/slabText/。

Lettering

Lettering 通过包装每个字符、单词或行，并添加一个类（创建一个可管理的代码）来提供完整的字母控制，以便快速访问 CSS 文件中的字符。它是一个基于 jQuery 的插件，可以更轻松地调整字符之间的间距，创建编辑设计等。

有两个相当令人印象深刻的网站，通过使用定制字母展示出良好的设计和大量的创意。请看以下示例，由lostworldsfairs.com/moon/和lostworldsfairs.com/eldorado/提供：

如何做

从github.com/davatron5000/Lettering.js下载 zip 文件后，让我们通过插入以下简单的 HTML 代码来练习使用这个工具，该代码将在稍后使用的类中使用：

<h1 class="fancy-title">Page Title</h1>

然后，请记住在<head>标签中包含 jQuery 库，如下代码所示：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.lettering.js"></script>

在 HTML 底部（在</body>关闭标签之前），我们需要调用此脚本以指定此插件将影响哪个类：

<script>
  $(document).ready(function() {
    $(".fancy-title").lettering();
  });
</script>

之前的代码将产生以下输出。看一下这些 span 并想象一下你在没有这个插件的情况下是如何构建它的：

<h1 class="fancy-title">
  <span class="char1">P</span>
  <span class="char2">a</span>
  <span class="char3">g</span>
  <span class="char4">e</span>
  <span class="char5"></span>
  <span class="char6">T</span>
  <span class="char7">i</span>
  <span class="char8">t</span>
  <span class="char9">l</span>
  <span class="char10">e</span>
</h1>

现在，结构已经准备好接收这样的样式：

<style type="text/css">
  h1 { font-family: 'Impact'; font-size:50px;
    text-transform:uppercase; text-shadow: 1px 1px 2px #666; }
  .char1, .word1, .line1 { color: purple; }
  .char2, .word2, .line2 { color: orange; }
  .char3, .word3, .line3 { color: yellow; }
  .char4, .line4 { color: blue; }
  .char5 { color: green; }
  .char6 { color: indigo; }
  .char7 { color: violet; }
  .char8 { color: gold; }
  .char9 { color: cyan; }
  .char10 { color: lime; }
</style>

此外，如果标题每个词（而不是字符）都有不同的样式，此插件可以通过定义参数"words"来处理，如下代码所示：

<script>
  $(document).ready(function() {
    $(".fancy-title").lettering("words");
  });
</script>

考虑使用<br />分割每行的不同样式的情况如下：

<h1 class="fancy-title">Page Title <br /> with long text</h1>

对于前面的场景，在脚本中唯一的区别将是参数"lines"：

<script>
  $(document).ready(function() {
    $(".fancy-title").lettering("lines");
  });
</script>

因此，现在我们认为您想知道为什么要付出如此大的努力来创建一个样式，来测量距离，以及知道为每个元素增加多少字体是必要的。我们强烈建议使用在线工具 Kern.js。

Kern.js 工具

Kern.js 是一个在线工具，与 Lettering.js 完美匹配，因为它提供了一个很好的界面，可以通过点击和拖动来调整字母间距、行高和字母位置。当你完成这项任务后，只需复制生成的 CSS 并在我们的样式表中使用即可。

如何使用

进入该工具的网站www.kernjs.com/后，在页面底部有一个链接：拖动到书签栏以安装。将其拖到书签栏将使在我们的网站上激活 Kern.js 工具更加容易。

使用该功能的要求包括在网站的<head>标签中包含特定版本 1.7.2 的 jQuery 和 Kern.js 库。Kern.js 脚本可在github.com/bstro/kern.js下载。

<script src="img/jquery-1.7.2.min.js"></script>
<script src="img/kern.min.js"></script>

当通过书签栏中的Kernjs.com链接打开网站时，可能会显示五个选项在页面顶部：

• 字距调整（水平间距）

• 字体大小的增加或减少

• 调整行高（垂直间距）

• 完全的字母放置调整

• 调整角度旋转

以下截图显示了这些选项：

一旦完成调整，只需点击检查按钮，将此视觉更改转换为准备复制并在站点上执行的代码。

当存在多个自定义元素时要小心，因为此代码可能会覆盖前一个。然而，有一种简单的方法可以避免进一步的问题：为元素规范定义一个类。以下代码是这种情况的一个示例：

<h1 class="fancy-title">Page Title</h1>

响应式测量

Responsive Measure 是一个简单的脚本，允许您传入一个选择器（最好是您的主要内容将放置的容器），该选择器生成生成理想测量所需的理想字体大小，以便您的文本。听起来像是魔法吗？我们将在以下部分中看到如何定制此解决方案及其用法。

如何做到这一点

从github.com/jbrewer/Responsive-Measure下载此解决方案的文件后，让我们将此代码插入到 DOM 开头的<head>标记中：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.rm.js"></script>

在 HTML 底部（在</body>结束标记之前），我们需要调用 Responsive Measure 脚本以执行操作。但是，在执行脚本之前，我们将澄清以下两种控制文本大小的方式：

• idealLineLength：其默认值为66，但我们可以定义我们自己的特定值来表示一行中可以容纳多少个字符和空格。此外，最小字体大小设置为16px，最大设置为300px。参数sampleText可以帮助计算具有平均字符宽度的字符数。

  提示

  要记住，每行 45-75 个字符的范围通常被认为是舒适阅读的安全范围。

  这里是前面提到的代码：

  <script>
  $('section').responsiveMeasure({
    idealLineLength: 45,
    minimumFontSize: 16,
    maximumFontSize: 300,
    sampleText: "n"
  });
  </script>
  

• minimumFontSize 和 maximumFontSize：通过将最小值定义为 13 和最大值定义为 30，例如，来改进字体大小的处理。此外，默认值idealLineLength有时可能会对结果产生一些影响。如果发生这种情况，请定义您自己的值并进行修复，就像我们刚刚在前面的代码中看到的那样。

  所以，以下是代码：

  <script>
  $('section').responsiveMeasure({
    minimumFontSize: 13,
    maximumFontSize: 30,
    sampleText: "n"
  });
  </script>
  

练习 4 – 自定义主页标题

让我们分三步完成这个练习。第二步和第三步只是第一步的补充：

1. 使用 Font Squirrel 生成器创建您的字体面套件。然后，将其实现在您网站的<h1>标记上。如果您不知道要使用哪种字体，我建议您从 GoogleFont 网站下载 Kite One 字体。

2. 使用 Lettering 插件可以更好地控制标题的每个字母、单词或行。之后，增加第一个字母的颜色，将.char1类的color属性从你的 CSS 文件中修改。

3. 点击书签栏上的链接使用 Kern.js 工具。之后，点击工具栏上的第二个按钮，并选择第一个字母以增加其字体大小。然后，点击最后一个按钮生成代码并将其包含在你的 CSS 文件中。

概要

在本章中，我们已经看到了文本的响应式字体大小。此外，我们已经学会了通过使用 Font Squirrel、FitText、SlabText、Lettering 和 Responsive Measure 等解决方案来定制字体族的不同方法。这些解决方案为我们构建响应式网站时所需的图像支持和独立性提供了支持。

在下一章中，我们将讨论图片和视频，并学习如何将它们转换为适应不同设备的响应式和自适应媒体。此外，我们将看到如何考虑不同的播放器技术和设备来有效地处理视频。

第五章：准备图片和视频

最近，用于响应式站点的图像准备一直是最受讨论的问题之一，因为 W3C 尚未批准任何技术。与此同时，社区已经创造了一些各具优势的技术，试图解决这个问题。

我们将从基本图像调整开始本章。这个技术可以轻松地被集成到代码中，但移动用户正在等待更好的体验。

但是，在小型设备（如智能手机和平板电脑）上仅仅调整图像大小并不够有效，因为在这些设备上加载高质量的图像可能需要很长时间。稍后，我们将看到图像断点的重要性及其好处。

此外，我们将关注视频，因为它们在 HTML5 之前已经插入到我们的代码中，避免了从固定到响应式的站点转换上出现的问题。

此外，我们将讨论一些可用的 jQuery 插件以及如何使用它们，通过节省开发时间并改善界面。

在本章中，我们将学到：

• 只使用 CSS 的基本图像调整

• 为什么使用图像断点

• 图像标签的工作原理

• 控制图像艺术方向

• 使用 jQuery 插件和图像断点

• 使用 jQuery 插件创建响应式背景

• 处理高密度显示屏

• 使视频元素具有响应性

只使用 CSS 进行基本图像调整

以下代码可用于使图像在其父容器调整大小时具有缩放自由度。最大宽度设置为原始尺寸的 100%，其高度可以自动按照相同的图像比例进行调整：

img {
  max-width: 100%;
  height: auto;
}

然而，要有效使用这一点，图像必须足够大，以便可以在最大可能的显示器上按比例缩放。然而，为桌面站点优化的图像对于移动互联网速度来说仍然相当沉重。

提示

如果你在 DOM 中使用max-width或height标记来调整 JPG 图像，那么你可能只会在 IE7 或更旧版本的浏览器上看到像素化的图像。然而，有一个简单的代码可以解决这个问题：

img {
  -ms-interpolation-mode: bicubic;
}

这个特定的问题在 IE8 中被解决，在 IE9 中变得过时。

使用图像断点

适应性图片不仅仅是关于缩放图片的问题。它涉及到其他问题，以及在提供最佳用户体验时需要牢记的变量。诸如以下：

• 屏幕分辨率

• 带宽

• 浏览器窗口宽度

尝试确定发送到浏览器的最佳图像可能与每个变量都独立无关。这就是问题所在。例如，仅仅知道屏幕分辨率的值并不意味着用户有足够的带宽接收高清晰度图片。

因此，基于这些事实，我们将如何在我们的 Web 应用程序中制作一张图片，它需要在许多设备上显示良好的质量，而不会造成巨大的带宽浪费？

当我们处理位图图像（非矢量化图像，如 SVG）时，理想的解决方案似乎很简单：为每组分辨率提供不同大小的图片，其中每个图片都适用于某些类型的设备。

通常，我们考虑三种不同的屏幕尺寸来覆盖设备的多样性：

• 480 px：分辨率标准的智能手机（以移动为先）

• 1024 px：iPhone Retina（高像素密度智能手机），平板电脑和分辨率普通的桌面电脑

• 1600 px：iPad Retina（高像素密度平板电脑）和分辨率高的桌面电脑

已经有许多技术试图解决这个问题，并提供解决方案来帮助我们为每个场合提供正确的图片。它们都以略有不同的方式工作，根据您的需求，您将选择最符合您项目需求的选择。我们很快就会看到其中一些。

图片标签的工作原理

面对为用户提供正确图片的需求，W3C 正在努力研究它们。有一个此项倡议的非官方草案，其中包括了 <picture> 标签和不同的来源，以及它在其标准中，以便更容易地对图片进行适应。

注意

没有这个标准，浏览器开发人员无法准备好他们的浏览器以良好地渲染它。今天，前端社区正在尝试使用 CSS 和 JavaScript 来完成相同的任务。

这是 W3C 对 <picture> 标签的定义：

"此规范为开发人员提供了声明图像的多个来源的方法，并且通过 CSS 媒体查询，它使开发人员能够控制何时向用户呈现这些图像。"

他们也考虑到了旧版浏览器，这些浏览器将显示一个简单的图片作为备用内容。以下是标签将被使用的示例：

<picture width="500" height="500">
  <source media="(min-width:45em)" srcset="large1.jpg 1x, large2.jpg 2x">
  <source media="(min-width:18em)" srcset="medium1.jpg 1x, medium2.jpg 2x">
  <source srcset="small1.jpg 1x, small2.jpg 2x">
  <img src="img/small1.jpg" alt="">
  <p>Accessible text for all image versions</p>
</picture>

我建议查看有关此规范的更新信息，请访问picture.responsiveimages.org/。

对响应式图片的艺术指导的控制

这个话题最近已经讨论了很多。作者应该为不同尺寸的图片提供不同的来源，并根据他们的视觉判断，将主要元素聚焦在该特定断点的图片上。这就是艺术指导。

让我通过这个案例来澄清一下。当图片以较大的尺寸显示时，图片中显示的是船上的夫妇和背景中的河流是有意义的。背景有助于解释他们的位置，但总的来说，它没有提供任何相关信息。现在，看看当我们将图片缩小以适应较小的屏幕时会发生什么。这不是艺术指导。

将其缩小到那个尺寸，你几乎认不出这对夫妇。与其简单地调整图片大小，不如裁剪它以摆脱一些背景并集中在它上面更有意义。最终结果是一张在较小尺寸下效果更好的图片。让我们比较左边的图片（艺术方向）和右边的图片如下：

焦点 CSS 框架

焦点点改善了在缩小图像之前对图像最重要部分的聚焦。这样，它允许用户在智能手机上以较大尺寸看到图像的主要部分。所有这些都不需要使用 JavaScript 或 jQuery。

使用焦点，您可以定义一个代表您不想因较小分辨率而错过的部分的区域。被焦点覆盖的部分在缩放时保持可见，无论你将它们缩放到多远。

以下类名允许您裁剪和调整到图像的一个大致区域。请注意，类名中的 X 表示介于一和六之间的数字：

• 左-X/右-X：这些定义图像在水平方向上将关注多少个单位

• 上-X/下-X：这些定义图像在垂直方向上将关注多少个单位

• 纵向：默认情况下，该值设置为横向。但是如果一个图像的高度大于其宽度，则也添加 portrait 类

如何做

从github.com/adamdbradley/focal-point下载 CSS 文件后，让我们将此代码插入到我们 DOM 的 <head> 标签中：

<link rel="stylesheet" href="/css/focal-point.min.css">

后来，我们可能会看到以下演示中的操作：

焦点的原则很简单：想象一个 12 x 12 单位的网格放在图片上：

现在，我们假设这个人的头是图片中最重要的部分，并且我们需要将其定义为焦点。即使这个人的脸在图片的右边，当缩小到较小分辨率时，它仍然会保持焦点。

要在技术上定义焦点，我们只需设置图像的两个类。这些类可以水平和垂直地定位焦点。它将从网格的中心开始，如下图所示：

以下是专注于人脸的代码：

<div class="focal-point right-3 up-3">
  <div><img src="img/guy.jpg" alt=""></div>
</div>

在这个例子中，焦点被定义为从中心向左三个网格单位，然后向上两个单位。focal-point 类与图像周围的 div 一样必不可少。

标签的替代解决方案

我们刚刚看到，W3C 正在努力制定标准，尽快标记图片，这将使您能够为您用于查看我们网站的设备提供更合适的视觉内容。

由于这种功能的迫切需要，社区创建了两个 JavaScript 插件，以实现大多数常用浏览器接受的预期结果。它们是 Foresight 和 Picturefill。

Foresight - 根据屏幕大小选择正确的图像进行显示

Foresight 为网页提供了在请求从服务器请求图像之前，通知用户设备是否能够查看高分辨率图像（例如视网膜显示设备）的功能。

此外，Foresight 会判断用户设备当前的网络连接速度是否足够快，以处理高分辨率图像。根据设备显示和网络连接性，foresight.js 将为网页请求适当的图像。

通过自定义img source属性，使用诸如 URI 模板之类的方法，或者在 URI 中查找和替换值，可以形成为您图像的分辨率变体构建的请求，并具体使用新的 CSS image-set() 函数的混合实现。

基本格式是image-set()函数可能有一个或多个 image-set 变体，每个变体由逗号分隔。每个图像集变体最多可以有三个参数：

• URL：这类似于background-image:url()。

• 比例因子：比例因子参数用作应用于识别图像密度的图像尺寸的乘法器。一些移动设备的像素比是 1.5 或 2。

• 带宽：这可以定义为低带宽或高带宽。

Foresight 还执行快速网络速度测试，以确保用户设备能够处理高分辨率图像，而不会让连接速度慢的用户等待很长时间下载图像。

如何做到

让我们访问网站github.com/adamdbradley/foresight.js并下载文件。然后，我们将在 DOM 的<head>标签中插入以下代码：

<script src="img/foresight.js "></script>

让我们看一个真实的例子，下面的代码中我们正在使用移动优先的概念：

.fs-img {
  width:100%;
  font-family: 'image-set( url(-small|-small-2x) 2x high-bandwidth )';
  display:none;
}

然后，对于窗口，宽度至少为 600 px 和 800 px：

@media (min-width:600px) {
  .fs-img {
    font-family: 'image-set( url(-small|-medium), url(-small|-medium-2x) 2x high-bandwidth )';
  }
}
@media (min-width:800px) {
  .fs-img {
    font-family: 'image-set( url(-small|-large), url(-small|-large-2x) 2x high-bandwidth )';
    max-width:100%;
  }
}

所以，我们用一些词来更好地解释它的工作原理。该代码将查找<img>标签的源代码中名称的片段，并将其替换为另一个名称。之后，站点将在其文件中搜索更改后的名称，验证所需的代码是否存在：

<img data-src="img/castle-small.jpg" data-width="240" data-height="157" class="fs-img" src="img/strong>.jpg">

提示

该引擎用于更改文件名的后缀，使其具有良好的可扩展性，这非常好，因为在创建新的响应式图像时可以避免对代码的大量干预。

如果我们比较这个例子中的图像，查看 KB 的差异，我们将得到 44 KB 的大图像，20 KB 的中图像和 12 KB 的小图像。对于单个图像来说，这不是一个巨大的差异。然而，将其应用到整个站点，可能会大大减少不必要图像的加载。

Picturefill – 最接近 picture 标签的解决方案

Picturefill 是用于响应式图片的 JavaScript 插件，类似于未来的 picture 元素，但现在就可以使用。这个非常轻量级的解决方案使用 span 标签而不是 picture 或 image，以确保其自身的安全性。

Picturefill 本身支持 HD（Retina）图像替换。 Picturefill 还具有良好的性能优势，根据屏幕大小选择正确的图像，而无需下载其他图像。

要获取有关此插件的更多信息，请访问 github.com/scottjehl/picturefill。

如何做

下载此解决方案的文件后，让我们将此代码插入到您 DOM 的 <head> 标签中：

<script src="img/matchmedia.js"></script>
<script src="img/picturefill.js"></script>

这是在 HTML 中要使用的代码。请注意，它要求您指定每个图像及其变体的来源。请参阅以下示例：

<span data-picture="" data-alt="Picture alternative text">
  <span data-src="img/small.jpg"></span>
  <span data-src="img/medium.jpg" data-media="(min-width: 400px)"></span>
  <span data-src="img/large.jpg" data-media="(min-width: 800px)"></span>
  <span data-src="img/extralarge.jpg" data-media="(min-width: 1000px)"></span>
  <!-- Fallback content for non-JS browsers -->
  <noscript>&lt;img src="img/small.jpg" alt="Picture alternative text"&gt;</noscript>
  <img alt="Picture alternative text" src="img/extralarge.jpg">
</span>

或许有些项目需要将其作为解决方案（在 HTML 代码中放置整个规范及其图像变体），但如果网站上有很多图像，可能会带来可扩展性问题和网站维护问题。

使用 jQuery 插件实现响应式背景图片

对于响应式站点来说，定位背景图并不总是一件容易的事情，因为其正确的显示取决于其内容的行为。

为了澄清，让我展示这个问题的一个示例：

问题在于，有时我们会固定内容以保持背景正确，但需要更改。有两个插件对定位此背景非常有帮助：Anystretch 和 Backstretch。

Anystretch – 轻松拉伸背景

Anystretch 是一个 jQuery 插件，允许您向任何页面或块级元素添加动态调整大小的背景图像。最初，Anystretch 是从 Backstretch 派生出来的。

图像将拉伸以适应页面/元素，并随着窗口大小的更改而自动调整大小。有一些选项可以配置它，例如水平定位、垂直定位、速度、元素定位和数据名称。

此插件的另一个优点是，如果我们在加载 Anystretch 后要更改图像，我们只需要再次进行处理，提供新路径即可。

提示

是的，我们可以与 Breakpoints.js 插件一起使用，就像我们在第二章中所看到的设计响应式布局/网格，这样就可以更改图像路径并再次使用 Anystretch，如果需要的话。

如何做

从 github.com/danmillar/jquery-anystretch 下载文件后，让我们使用以下 HTML 代码来澄清其工作原理：

<div class="div-home stretchMe" data-stretch="img/bg-home.jpg">
  <p>main content</p>
</div>
<div class="div-footer stretchMe" data-stretch="img/bg-footer.jpg">
  <p>footer content</p>
</div>

对于这个结构，有两个突出的词语：

• stretchMe：这用于标识那些将由插件处理的元素

• data-stretch：这将通知插件哪个图像可能成为背景

在 DOM 的底部（在 </body> 结束标记之前），我们需要包含 jQuery 代码和 Anystretch 脚本。然后，我们将对所有按照 stretchMe 类名设置的元素执行插件（只是一个建议的名称）。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.anystretch.min.js"></script>
<script>
$(".stretchMe").anystretch();
</script>

这是将插件应用于 div 元素的视觉结果：

到目前为止，这种方法不错，但是如果使用，将对所有响应式背景应用相同的行为。换句话说，如果我们想要更改特性，我们需要单独调用该函数。

提示

如果我们对同一个元素两次调用 anystretch 方法，它将替换现有图像并停止先前的处理。

如果我们查看上一个 HTML 代码，会发现一个名为 div-home 的类，它可以使用不同的选项执行，例如：

<script>
$(".div-home").anystretch('',{speed:300, positionX:'right', positionY:'bottom'});
</script>

注意

speed 参数将配置在下载图像后淡入图像的时间。默认情况下，positionX 和 positionY 对齐在中心，但是插件允许我们更改它。

Backstretch – 创建响应式背景幻灯片

Backstretch 是一个 jQuery 插件，允许用户向任何页面或元素添加动态调整大小的背景图像，它是 Anystretch 插件的基础。

但是，Backstretch 发展了，现在还提供动态调整幻灯片元素的背景图像大小。所有这些背景图像将拉伸以适应页面/元素，并且将随着窗口/元素大小的更改而自动调整大小。

另一个很好的改进是在页面加载后获取将要使用的图像，这样用户就不必等待太长时间才能完成图像的下载。

您可以在 github.com/srobbin/jquery-backstretch 找到要下载的文件。

如何操作

在 DOM 底部（在 </body> 结束标记之前），我们将包括 jQuery 和 Backstretch 库。然后，我们将执行插件，将 Backstrech 附加到元素的背景上：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.backstretch.min.js"></script>
<script>
$.backstretch("path/bgimage.jpg");
</script>

下面是视觉结果：

默认情况下，图像的对齐（垂直和水平）设置为中心，因为对于使用此解决方案的人来说更常见，但是如果需要，我们可以关闭它。另一个包括的选项是 fade 参数，用于配置图像淡入的时间。parameter 持续时间用于幻灯片，它与每个幻灯片显示之前的时间（以毫秒为单位）有关。

我们还可以将 Backstretch 附加到任何块级元素上。默认情况下，<body> 标记将接收此响应式背景。要做到这一点，更好的方法是通过使用以下代码定义一个类来接收此操作，而不是使用上一个代码：

<script>
$(".div-home").backstretch("path/bgimage.jpg");
</script>

或者，要启动幻灯片放映，只需提供一个图像数组和幻灯片之间的时间量：

<script>
  $(".div-home").backstretch([
    "path/bgimage1.jpg",
    "path/bgimage2.jpg",
    "path/bgimage3.jpg"    
  ], {duration: 5000});
</script>

此插件有很好的文档，并提供了用于更好处理的幻灯片 API。可以在 github.com/srobbin/jquery-backstretch#slideshow-api 找到它。

处理高密度显示屏

屏幕密度指的是物理表面上的设备像素数量。通常以每英寸像素 (PPI) 进行测量。苹果为其双倍密度显示器创造了市场术语视网膜。根据苹果官方网站的说法：

“视网膜显示屏的像素密度非常高，以至于您的眼睛无法区分单个像素。”

换句话说，视网膜显示器的像素密度足够高，以至于人眼无法注意到像素化。但是，由于这些显示器正在广泛实施和使用，因此更加重要的是创建支持这些显示器的网站和应用程序。

在下图中，我们比较了视网膜和标准定义显示器之间的像素。在视网膜显示器中，与传统显示器相比，相同空间内的像素是双倍的：

注意

单词“double”并非所有支持高密度图像的设备所使用的确切值。目前，市场上还有其他屏幕密度，其密度值为 1.5 和 2.25。

如何做到

视网膜图像的通常值是普通图像值的两倍。因此，通过使用媒体查询，我们可以测试浏览器是否支持高密度图像。让我们在下面的示例中检查一下：

/* normal sprite image has dimension of 100x100 pixels */
span.bigicon-success {
  background: url(sprite.png) no-repeat -50px 0;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  span.bigicon-success {
    background-image: url(sprite@2x.png);
    /* retina sprite image has dimension of 200x200 pixels */
    background-size: 200px 200px;
  }
}

如果浏览器接受，我们会请求另一张图像来显示。然而，这种用法会产生两次图像请求：一次在检查之前，另一次在媒体查询内部。

现在，让我们看看如何使用 Foresight 只发出一次请求。

如何使用 Foresight 完成

该插件具有在向用户显示任何图像之前检测设备显示的屏幕密度的能力。

让我们在下面的示例中看看：

.fs-img {
  font-family: 'image-set(url(-small | -small-2x) 2x high-bandwidth)';
}

在此示例中，浏览器会检查哪个图像元素具有类fs-img，并在显示任何图像之前（Foresight 的默认行为）检查它是否支持视网膜图像；此外，它还可以检查用户是否处于高带宽状态。

请注意，在请求castle-small.jpg文件之前，例如，它会查找后缀-small并将其替换为-small-2x，然后请求文件castle-small-2x.jpg。

有一个在线工具可以帮助计算图像在视网膜上查看时应该具有的大小。可在 teehanlax.com.s3.amazonaws.com/files/teehanlax_density_converter.html 获取。

制作响应式视频元素

在我们的网站开发中使用 HTML5 之前，视频的使用受限于设备对 Adobe Flash Player 的接受。然而，由于 HTML5 中 <video> 的大力发展，以及苹果公司在其设备上拒绝 Adobe Flash Player 的立场，这种义务不再存在。

目前，这个元素 <video> 在现有设备和现代浏览器（IE9 及以上版本）中得到了很好的接受，使得其在响应式网站上的处理尤其是灵活性更加容易。仅为澄清，以下是 video 标签在 DOM 中通常的样子：

<video id="highlight-video" poster="snapshot.jpg" controls>
  <source src="img/video.m4v" type="video/mp4" /> <!-- for Safari -->
  <source src="img/video.ogg" type="video/ogg" /> <!-- for Firefox -->
</video>

使视频流畅的 CSS 代码非常简单：

video, iframe {
   max-width: 100%;
   height: auto;
}

然而，老旧浏览器和新浏览器之间存在操作差异，并且为了增加内容的可访问性。通常更倾向于使用更安全的方法。这条路就是继续使用嵌入式视频或 <iframe> 标签。我们很快就会看到如何使这些视频更具响应性和灵活性。

现在，让我们专注于当前的技术。好消息是，视频提供商如 YouTube 或 Vimeo 已经支持 <video> 标签，但这仍然不是默认行为。这个在不同设备上使用的代码可能会成为一个问题，因为我们需要根据每种情况来适应代码。

解决适应性问题的方法是他们创建了 FitVids 插件。

FitVids – 响应式视频的快速解决方案

FitVids 是一个轻量级的 jQuery 插件，通过创建一个包装器来自动调整我们响应式网页设计中视频宽度的工作，以保持其比例，否则被嵌入的视频的比例将会是这样：

目前支持的播放器有 YouTube、Vimeo、Blip.tv、Viddler 和 Kickstarter。但如果需要使用我们自己的播放器，有一个选项可以指定自定义播放器。

如何做

在 DOM 底部（在 </body> 结束标签之前），我们需要包含 jQuery 代码和 FitVids 脚本。然后，我们只需要将其执行附加到元素的类或 ID 上，如下所示：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.fitvids.js"></script>
<script>
$(function () {
  $(".video-wrapper").fitVids();
});
</script>

之后，让我们使用这段 HTML 代码只是作为示例来看看它是如何工作的：

<div class="video-wrapper ">
  <iframe width="560" height="315" frameborder="0" allowfullscreen src="img/UM0Cl3wWys0"></iframe>
</div>

以下截图显示了使用 FitVids 的 YouTube、Vimeo 和 Viddler 视频的示例：

练习 – 为特色主页图片创建不同的图像版本

正如我们刚刚看到的，为每个设备加载正确的图像对于我们的响应式网站非常重要。因此，让我们在以下断点中的设计中实践这项技术，展示不同的图像：

• 最大宽度 = 480

• 最大宽度 = 1024

• 最小宽度 = 1025

以下屏幕截图显示了网站以及我正在引用的照片，就像我们在第二章中看到的那样，设计响应式布局/网格。对于这个练习，我指的是盒子内突出显示的图像：

对于这项活动，我建议使用 Foresight 插件，因为它可以更好地可视化图像源和断点。

提示

不要忘记检查您正在使用的特定设备是否支持显示高密度图像。

总结

在本章中，我们学习了将固定图像转换为灵活图像的简单方法，但仅仅理解这一点并不足以使它们适应不同的设备。此外，我们还学习了通过使用 Foresight 和 Picturefill 插件向用户提供正确图像的其他方法。当使用 FocalPoint 框架调整图像大小时，我们还控制了艺术方向，将焦点放在图片中的主要元素上。此外，我们还学会了使用 FitVids 插件使视频尺寸变得流动起来而不感到紧张。

在下一章中，我们将了解哪些幻灯片插件适用于响应式网站，学习如何构建它们，更改一些选项和效果，并给用户留下良好的印象。此外，我们还将了解在移动网站上通常使用和实现的手势。

第六章：构建响应式图片轮播器

图片轮播器被广泛使用，已经成为非常受欢迎的网络元素。在网站上，通过美丽的过渡和动画、标题和描述以及使用自定义时间，可以在线呈现出一个吸引人的业务展示。此外，一个好的图片轮播器可以展示产品橱窗，吸引用户的注意力，并提高其销售额。

在这一章中我们将学习以下内容：

• 不同类型的响应式图片轮播器

• 引入触摸手势在用户体验中

• 使用 JavaScript 插件实现触摸事件

响应式图片轮播器

打开一个网站并在头部区域看到一个图片轮播器是很常见的现象。图片轮播器显示突出内容，在有限的空间内确实非常有用。虽然当通过移动设备查看网站时可用空间更加有限，但轮播器元素仍然能够吸引客户的注意力。

如果与桌面相比，可以用于显示突出内容的区域和用于呈现它的资源的差异真的很大，通常情况下我们不会遇到脚本性能问题，并且每个转换的交互是通过使用箭头标志来切换图片。

当响应式时代开始时，观察了人们通常与图片轮播器互动的方式，并根据渐进增强的概念确定了变化，例如改变每个幻灯片的方式。解决方案是为移动设备的用户提供类似的体验：在支持的设备上对图片轮播器元素进行手势和触摸操作，而不是显示回退。

随着浏览器和技术的不断发展，有许多具有响应特性的图片轮播器插件。我个人最喜欢的插件是 Elastislide、FlexSlider2、ResponsiveSlides、Slicebox 和 Swiper。有很多可用的，找到真正喜欢的一个的唯一方法是尝试它们！

让我们详细了解它们的工作原理。

Elastislide 插件

Elastislide 是一个响应式图片轮播器，它会根据 jQuery 在任何屏幕尺寸上工作的大小和行为进行调整。这个 jQuery 插件处理了轮播器的结构，包括内部百分比宽度的图片，水平或垂直显示它，以及预定义的最小显示图片数量。

Elastislide 使用 MIT 许可证，可以从 github.com/codrops/Elastislide 下载。

当我们实现一个图片轮播器时，仅仅减小容器的尺寸并显示一个水平滚动条并不能优雅地解决小设备的问题。建议是也要调整内部项目的大小。Elastislide 很好地解决了这个调整大小的问题，并定义了我们想要显示的最小元素，而不是仅仅使用 CSS 隐藏它们。

此外，Elastislide 使用了一种名为 jQuery++ 的补充和定制版本的 jQuery 库。jQuery++ 是另一个处理 DOM 和特殊事件非常有用的 JavaScript 库。在这种情况下，Elastislide 使用了一个定制版本的 jQuery++，这使得插件能够在触摸设备上处理滑动事件。

如何操作

由于我们将在同一个轮播图中看到此插件的四个不同应用，我们将使用相同的 HTML 轮播图结构，只需在执行插件之前修改 JavaScript，指定参数即可：

<ul id="carousel" class="elastislide-list">
  <li><a href="#"><img src="img/image-photo.jpg" /></a></li>
  <li><a href="#"><img src="img/image-sky.jpg" /></a></li>
  <li><a href="#"><img src="img/image-gardem.jpg" /></a></li>
  <li><a href="#"><img src="img/image-flower.jpg" /></a></li>
  <li><a href="#"><img src="img/image-belt.jpg" /></a></li>
  <li><a href="#"><img src="img/image-wall.jpg" /></a></li>
  <li><a href="#"><img src="img/image-street.jpg" /></a></li>
</ul>

在 DOM 底部（在 </body> 结束标签之前），我们需要包含 jQuery 和 jQuery++ 库（此解决方案所需），然后再包含 ElastiSlide 脚本：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquerypp.custom.js"></script>
<script src="img/modernizr.custom.17475.js"></script>
<script src="img/jquery.elastislide.js"></script>

然后，在 <head> 标签内包含 CSS 样式表：

<link rel="stylesheet" type="text/css" href="css/elastislide.css" />

好了，现在我们已经有了展示四个不同示例的基础。对于每个示例，当执行插件脚本时，必须添加不同的参数，以便根据项目需求获得不同的渲染效果。

示例 1 – 至少显示三张图片（默认）

在第一个示例中，我们将看到默认的视觉效果和行为，以及是否在其后放置以下代码，包括 ElastiSlide 插件：

<script type="text/javascript">
$('#carousel').elastislide();
</script>

此解决方案提供的默认选项包括：

• 至少显示三个项目

• 滚动效果的速度为 0.5 秒

• 水平方向

• 缓动效果定义为 ease-in-out

• 轮播图将开始显示列表中的第一张图片

下面的截图显示了此代码的实现效果。注意在平板电脑和智能手机上显示的版本之间的差异：

示例 2 – 垂直方向，至少显示三张图片

有一个选项可以使轮播图以垂直方向呈现，只需更改一个参数。此外，我们可以加快滚动效果。请记得包含与示例 1 中使用的相同文件，并在 DOM 中插入以下代码：

<script type="text/javascript">
$('#carousel').elastislide({
  orientation: 'vertical',
  speed: 250
});
</script>

默认情况下，至少显示三张图片。但是，这个最小值可以根据我们将在下一个示例中看到的情况进行修改：

示例 3 – 固定包装器，至少显示两张图片

在此示例中，我们将定义轮播图中可见项目的最小值，当在小屏幕上查看轮播图时，可以注意到差异，并且图片不会缩小太多。此外，我们还可以定义从第三张图片开始显示的图片。

请记得包含与示例 1 中使用的相同文件，并在包含 ElastiSlide 插件之后执行脚本，提供以下参数并将其定位：

<script>
$('#carousel').elastislide({
  minItems: 2,
  start: 2
});
</script>

示例 4 – 图片库中至少显示四张图片

在第四个示例中，我们可以看到许多 JavaScript 实现。然而，此示例的主要目标是展示此插件为我们提供的可能性。通过使用插件回调函数和私有函数，我们可以跟踪点击和当前图像，然后通过创建图像画廊按需处理此图像更改：

<script>
var current = 0;
var $preview = $('#preview');
var $carouselEl = $('#carousel');
var $carouselItems = $carouselEl.children();
var carousel = $carouselEl.elastislide({
  current: current,
  minItems: 4,
  onClick: function(el, pos, evt){
    changeImage(el, pos);
    evt.preventDefault();
  },
  onReady: function(){
    changeImage($carouselItems.eq(current), current);
  }
});
function changeImage(el, pos) {
  $preview.attr('src', el.data('preview'));
  $carouselItems.removeClass('current-img');
  el.addClass('current-img');
  carousel.setCurrent(pos);
}
</script>

为此，与其他插件相比，ElastiSlide 可能没有太大优势，因为它依赖于我们的额外开发来完成这个画廊。因此，让我们看看下一个插件提供了什么来解决这个问题。

FlexSlider2 – 完全响应式滑块

FlexSlider2 是一个轻量级的 jQuery 图像滑块插件，包括淡入淡出和滑动动画、移动设备的触摸手势以及一堆可定制的选项。

自从 2011 年发布以来，FlexSlider2 在开发者社区中一直展示着持续的信心，并且一些已知的CMS（内容管理系统），如 Drupal 和 WordPress，已经导入了此插件以在其系统中使用。

稳定的版本 2.0 也支持使用旧浏览器的用户，自 Safari 4、Chrome 4、Firefox 3.6、Opera 10 和 IE7 开始。同时也支持 Android 和 iOS 设备。

如何做

为了查看此插件提供的各种选项，我们将看到以下三个应用示例中最常用的插件选项。我们将从显示滑块的默认布局开始。然后，我们将看到一个使用导航来支持显示大量图像的情况的滑块，最后一个示例中我们将看到另一种配置 FlexSlider2 提供的图像轮播的方式。

您可以在 github.com/woothemes/FlexSlider 找到可下载的文件；对于附加的插件选项，我们建议您阅读插件官方网站上的完善文档 www.woothemes.com/flexslider/ 。

示例 1 – 基本滑块（默认）

让我们从在<head>标签内包含 CSS 样式表开始：

<link rel="stylesheet" href="css/flexslider.css" type="text/css">

在 DOM 底部（在</body>结束标记之前），我们需要包含两个文件：jQuery 库和 FlexSlider2 脚本。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.flexslider.js"></script>

到目前为止，第一个示例从这里开始，我们正在定义一个简单的无序列表来定义轮播结构。对此只有两个要求，即将flexslider类定义为包装 <div> 和将slides类定义为<ul>。

<div class="flexslider">
  <ul class="slides">
    <li><img src="img/slide-img1.jpg" /></li>
    <li><img src="img/slide-img2.jpg" /></li>
    <li><img src="img/slide-img3.jpg" /></li>
    <li><img src="img/slide-img4.jpg" /></li>
  </ul>
</div>

在包含 FlexSlider2 库后，让我们添加以下代码来执行脚本。我们将只显示轮播中普通图像元素的默认外观和行为：

$(document).ready(function() {
  $('.flexslider').flexslider({
    animation: "slide"
  });
});

此插件附带的样式在智能手机和桌面版本上看起来很漂亮：

示例 2 – 使用轮播滑块作为导航控制器

初始 HTML 结构几乎相同，但现在我们必须为轮播复制幻灯片结构。通过执行 JavaScript 函数，识别这两个元素之间的关系，并连接到期望的行为。

记得包含示例 1 中使用的相同文件，然后将以下代码插入 HTML 代码中。

<div id="slider" class="flexslider">
  <ul class="slides">
    <li><img src="img/slide-img1.jpg" /></li>
    <li><img src="img/slide-img2.jpg" /></li>
    <li><img src="img/slide-img3.jpg" /></li>
    <li><img src="img/slide-img4.jpg" /></li>
  </ul>
</div>
<div id="carousel" class="flexslider">
  <ul class="slides">
    <li><img src="img/slide-img1.jpg" /></li>
    <li><img src="img/slide-img2.jpg" /></li>
    <li><img src="img/slide-img3.jpg" /></li>
    <li><img src="img/slide-img4.jpg" /></li>
  </ul>
</div>

要创建这个图片画廊，我们必须通过使用 ID 来识别插件将影响的元素，避免任何行为冲突。将此示例与示例 1 进行比较，在示例 1 中，FlexSlider2 只实例化了一次，我们对插件脚本进行了两次调用。

在以下代码的第一部分中，正在创建图片幻灯片，并补充一些插件提供的其他选项，比如animation、itemWidth、itemMargin和asNavFor。

在此代码的第二部分中，正在创建导航控制器：

$(document).ready(function() {
  $('#carousel').flexslider({
    animation: 'slide',
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    itemWidth: 210,
    itemMargin: 5,
    asNavFor: '#slider'
  });
  $('#slider').flexslider({
    animation: "slide",
    controlNav: false,
    animationLoop: false,
    slideshow: false,
    sync: "#carousel"
  });
});

提示

asNavFor选项将#slider转换为#carousel的缩略图导航。而sync选项则创建了一个镜像，将在#slider上执行的操作同步到#carousel上。例如，如果用户通过滑块导航，轮播项目将跟随操作，显示相同的活动滑块，反之亦然。

非常简单、专业、且实用！因此，让我们看看这个响应式滑块在小设备和桌面上的带导航控制的视觉效果：

示例 3 – 轮播设置最小和最大范围

记得包含示例 1 中使用的相同文件，然后将以下代码插入 HTML 代码中。请注意，它使用与第一个示例相同的 HTML 结构：

<div id="slider" class="flexslider">
  <ul class="slides">
    <li><img src="img/slide-img1.jpg" /></li>
    <li><img src="img/slide-img2.jpg" /></li>
    <li><img src="img/slide-img3.jpg" /></li>
    <li><img src="img/slide-img4.jpg" /></li>
  </ul>
</div>

然而，为了构建它，我们需要更改 JavaScript 代码，在那里我们会通知不同的参数，如itemWidth、itemMargin、minItems和maxItems，如我们将在以下代码中看到的那样：

$(document).ready(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    animationLoop: false,
    itemWidth: 210,
    itemMargin: 5,
    minItems: 2,
    maxItems: 4
  });
});

注意

itemWidth和itemMargin选项应该用像素进行度量和定义，但不用担心，插件会处理这个固定单位得很好。

此外，minItems和maxItems被用来定义根据设备宽度在屏幕上显示的最小/最大元素数量值。在下一个屏幕截图中，我们将看到前面的代码在移动设备和桌面两个版本中的实际应用：

ResponsiveSlides – 基本幻灯片中的最佳解决办法

ResponsiveSlides 是一个 jQuery 插件，是一个非常轻量级的解决方案，基本上处于两种不同的模式。它可以自动淡化图像，或者作为具有分页和/或导航以在幻灯片之间淡化的响应式图像容器。

ResponsiveSlides 可以在各种浏览器上执行，包括旧版 IE 和 Android 版本 2.3 及以上。它还为不本地支持的 IE6 和其他浏览器添加了 CSS max-width支持。这个属性有助于使其在小屏幕上响应。

这个插件有两个依赖项，分别是 jQuery 库和所有图片必须具有相同的尺寸。

您可以在github.com/viljamis/ResponsiveSlides.js找到可下载的文件以及关于插件选项的更多详细信息。

如何做到这一点

在接下来的部分中，您将找到三个示例，其中我们可以看到这个插件提供的主要功能。在第一个示例中，我们将看到哪些文件是必要的，并且 ResponsiveSlides 的默认选项是什么。

在第二个示例中，我们将添加各种参数来检查这个插件如何可以定制化并满足我们项目的需求。

在第三个示例中，我们将通过图片实现额外的导航，方便用户访问并查看他们想要的特定幻灯片。

示例 1

因此，我们将首先在<head>标签内包含 ResponsiveSlides 主题的 CSS 文件：

<link rel="stylesheet" href="responsiveslides.css">

之后，插件支持使用简单的 HTML 无序列表来制作我们的幻灯片。但是，我们需要为这个<ul>定义一个类名，确保插件能够检测到哪个<ul>必须被转换：

<ul class="rslides">
  <li><img src="img/slide-img1.jpg" /></li>
  <li><img src="img/slide-img2.jpg" /></li>
  <li><img src="img/slide-img3.jpg" /></li>
  <li><img src="img/slide-img4.jpg" /></li>
</ul>

然后，在 DOM 底部（在</body>结束标签之前），我们应该包含 jQuery 库和 ResponsiveSlides 脚本。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/responsiveslides.min.js"></script>

现在，我们只需在网站加载后为带有rslides类的<ul>执行 ResponsiveSlides 脚本。让我们在包含 ResponsiveSlides 的代码之后放置这段代码：

<script>
$(function() {
  $(".rslides").responsiveSlides();
});
</script>

提示

在附带插件文件的demo.css文件中，有一堆 CSS 样式表，这些可能帮助我们自定义幻灯片。这个文件不是必需的，但对视觉有很大的区别，可能对进一步的参考有用。

这是插件的默认视觉效果：

示例 2

因此，我们将像之前的示例一样开始，先在<head>标签内包含 CSS 文件，然后在 DOM 代码底部（在</body>结束标签之前）包含 jQuery 库和 ResponsiveSlides 脚本。

对于这个示例，我们添加了一个包裹幻灯片slider_container的 div，帮助我们定位箭头和每个幻灯片的标题文本。如果某些项目需要这个标题文本来解释幻灯片，ResponsiveSlides 可以很好地处理这个特性。

所以，让我们在下一个幻灯片上测试一下：

<div class="slider_container">
  <ul class="rslides" id="slider-example2">
    <li><img src="img/slide-img1.jpg" />
      <p class="caption">This is a caption</p>
    </li>
    <li><img src="img/slide-img2.jpg" />
      <p class="caption"><strong>Other</strong> caption here</p>
    </li>
    <li><img src="img/slide-img3.jpg" />
      <p class="caption">The <u>third</u> caption</p>
    </li>
    <li><img src="img/slide-img4.jpg" />
      <p class="caption">The fourth caption</p>
    </li>
  </ul>
</div>

然后，请记得在网站加载后为带有slider-example2 ID 的<div>执行 ResponsiveSlides 脚本，将这段代码放在包含 ResponsiveSlides 的代码之后：

<script>
  $(function() {
    $('#slider-example2').responsiveSlides({
        auto: false,
        pager: false,
        nav: true,
        maxwidth: 540,
        speed: 500,
        namespace: "callbacks",
        before: function () {
          /* before event fired */
        },
        after: function () {
          /* after event fired */
        }
    });
  });
</script>

提示

也可以通过将 pager 选项设置为 false 并将 nav 选项设置为 true 来通知插件仅呈现下一个/上一个箭头而无需分页导航。

在下面的屏幕截图中，我们将看到这个示例的标题和导航箭头样式，这些样式来自于与插件一起提供的 demo.css：

示例 3

此示例侧重于创建一个基于缩略图图像和我们之前创建的图像的自定义导航，为用户提供另一种显示幻灯片库的方式。为了构建它，我们将插入其他简单的无序列表，显示缩略图图像并设置一个 ID，以后向插件提供信息：

<ul class="rslides" id="slider-example3">
  <li><img src="img/slide-img1.jpg" /></li>
  <li><img src="img/slide-img2.jpg" /></li>
  <li><img src="img/slide-img3.jpg" /></li>
  <li><img src="img/slide-img4.jpg" /></li>
</ul>
<ul id="pager-example3">
  <li><a href="#"><img src="img/thumb-img1.jpg" /></a></li>
  <li><a href="#"><img src="img/thumb-img2.jpg" /></a></li>
  <li><a href="#"><img src="img/thumb-img3.jpg" /></a></li>
  <li><a href="#"><img src="img/thumb-img4.jpg" /></a></li>
</ul>

同样，我们必须确保 CSS 文件将被包含在 <head> 标签内，然后在 HTML 代码底部包含 jQuery 库和 ResponsiveSlides 脚本。当我们对 #slider-example3 执行 ResponsiveSlides 时，我们将设置 manualControls 选项，并指定我们自定义的缩略图图像结构的分页导航 ID，如下所示：

<script>
$("#slider-example3").responsiveSlides({
  manualControls: '#pager-example3'
});
</script>

以下截图描述了实现此导航功能的视觉效果：

Swiper – 高性能触摸图片滑块

Swiper 是一个轻量级的移动触摸滑块，具有硬件加速转换（在支持的情况下）和惊人的本机行为。它旨在用于移动网站，但在现代桌面浏览器上也非常出色。

这个插件成为我最喜欢的两个原因是：它的性能真的很好，特别是在智能手机上，而且它还可以让桌面用户几乎感受到在浏览器中导航时体验到的触摸手势。

您可以从 github.com/nolimits4web/Swiper/ 下载此解决方案。有关插件选项的更多信息，请访问 www.idangero.us/sliders/swiper/api.php。

如何实现

因此，我们将从在 <head> 标签中引入 JS 和 CSS 文件开始：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/idangerous.swiper-2.2.min.js"></script>
<link rel="stylesheet" href=" css/idangerous.swiper.css">

现在，我们将执行 Swiper 脚本，指定 container 和 pagination 类：

<script>
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    pagination: '.pager',
    paginationClickable: true
  });
});
</script>

注意，这个 CSS 文件只是定制了幻灯片动画。即便如此，我们需要添加以下代码来定制幻灯片结构，以满足我们的需求，补充来自 Swiper 的样式：

<style>
.swiper-container {
  width: 70%;
  height: 300px;
}
.pager {
  position: absolute;
  z-index: 20;
  left: 10px;
  bottom: 10px;
}
.swiper-pagination-switch {
  display: inline-block;
  width: 1em;
  height: 1em;
  background: #222;
  margin-right: 5px;
}
</style>

然后，该插件支持使用简单的 HTML 无序列表来制作我们的幻灯片。此外，我们需要为该结构定义一些类名，以确保插件的正常运行：

<div class="swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide-1">
      <p>Slide 1</p>
    </div>
    <div class="swiper-slide slide-2">
      <p>Slide 2</p>
    </div>
    <div class="swiper-slide slide-3">
      <img src="img/slide-img3.jpg" />
    </div>
    <div class="swiper-slide slide-4">
      <img src="img/slide-img3.jpg" />
    </div>
  </div>
  <div class="pager"></div>
</div>

所有滑块结构都由 swiper-container 和 swiper-wrapper 类包裹。此外，swiper-slide 类定义 div 作为幻灯片项，而 pager 类指定将显示幻灯片分页的 div。

插件开发者提供的网站演示采用的视觉效果很漂亮；但是，这些样式不包括在idangerous.swiper.css中。它仍然依赖于我们对整个幻灯片的自定义，接下来我们将在以下截图中看到：

特色选项

通过分析代码，该插件似乎非常聪明，并且可以快速地渲染到浏览器上。另一个重要的考虑是社区的不断更新，修复了主要和次要的错误。它与其他插件的当前差异是：

• 垂直/水平滑动

• 丰富的 API

• 灵活的配置

• 嵌套的 Swipers

• 3D 流

在插件版本 1.8.5 中，他们引入了 3D 流补充到 Swiper 中。它简单地提供了一个带动态阴影的惊人真实的 3D 画廊，相比其他幻灯片插件有很大的优势。让我们看看如何实现它。

在 Swiper 上使用 3D 流样式

由于它是 Swiper 的补充，我们需要包括与前面示例相同的文件，先从<head>中的 CSS 开始。然后，追加下面这些新的 JS 和 CSS 文件，用于引用 3D 流样式：

<script src="img/idangerous.swiper.3dflow-2.0.js"></script>
<link rel="stylesheet" href="css/idangerous.swiper.3dflow.css">

现在，让我们改变我们之前用于执行 Swiper 的代码。以下代码具有许多参数，这些参数默认情况下附带它，并且它将执行我们的 3D 流脚本：

<script>
$(function(){
  var mySwiper = $('.swiper-container').swiper({
    slidesPerView: 3,
    loop: true,
       tdFlow: {
      rotate: 10,
      stretch: -50,
      depth: 400,
      modifier: 1,
      shadows: true
    }
  });
});
</script>

好吧，看看这个补充可能带给幻灯片视觉上的巨大差异。仅仅通过使用 CSS3 Transform，Swiper 插件就可以为我们提供一种自动显示不同幻灯片效果的方式：

通过访问网站 www.idangero.us/sliders/swiper/plugins/3dflow.php，我们将找到更多示例和其他 3D 流的用法选项。

Slicebox - 当使用幻灯片图像时进行切片动画

Slicebox 是一个 jQuery 插件，用于具有优雅回退（用于不支持新 CSS 属性的旧浏览器）的响应式 3D 图像幻灯片。

该插件的视觉效果真的很酷。一旦幻灯片改变，图像就被切成三到五个部分，并且旋转，呈现出令人难以置信的效果。

如何做

因此，在从github.com/codrops/Slicebox下载插件后，我们将首先在<head>标签内包含 CSS 文件：

<link rel="stylesheet" type="text/css" href="css/slicebox.css" />
<link rel="stylesheet" type="text/css" href="css/custom.css" />

然而，在插件中有一个缺少的 CSS 包装配置，这需要我们自己来完成：

<style>
.wrapper {
  position: relative;
  max-width: 840px;
  width: 100%;
  padding: 0 50px;
  margin: 0 auto;
}
</style>

之后，我们将使用一个简单的 HTML 无序列表来制作我们的幻灯片，并为这个结构定义一些必需的 ID，比如sb-slider，shadow，nav-arrows和nav-dots，以及插件用于阅读的命名代码部分：

<div class="wrapper">
  <ul id="sb-slider" class="sb-slider">
  <li>
    <a href="#"><img src="img/slide-img1.jpg" /></a>
    <div class="sb-description"><h3>Creative Lifesaver</h3></div>
  </li>
  <li>
    <a href="#"><img src="img/slide-img2.jpg" /></a>
    <div class="sb-description"><h3>Honest Entertainer</h3></div>
  </li>
  <li>
    <a href="#"><img src="img/slide-img3.jpg" /></a>
    <div class="sb-description"><h3>Brave Astronaut</h3></div>
  </li>
  <li>
    <a href="#"><img src="img/slide-img4.jpg" /></a>
    <div class="sb-description"><h3>Faithful Investor</h3></div>
  </li>
  </ul>
  <div id="shadow" class="shadow"></div>
  <div id="nav-arrows" class="nav-arrows">
    <a href="#">Next</a>
    <a href="#">Previous</a>
  </div>
  <div id="nav-dots" class="nav-dots">
    <span class="nav-dot-current"></span>
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

此外，还有一些辅助类来补充代码，比如wrapper（用于包装幻灯片）和sb-description（用于显示幻灯片描述）。

在 DOM 的底部（在</body>结束标签之前），包括 jQuery 和 Slicebox 库：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.slicebox.js"></script>

之后，我们将通过插入下一行代码来执行 Slicebox 脚本。

提示

然而，在我看来，这个插件的主要问题是有许多行的代码向我们暴露了。

下面的代码太庞大了，避免出现打字错误，你会发现可以从www.packtpub.com/support下载该代码。

这是移动设备和桌面的效果截图：

引入触摸手势到用户体验

触摸屏设备如今统治着移动平台。大多数智能手机和平板电脑都有许多使用触摸手势的元素，现在这也逐渐应用到我们的桌面开发中。在他的文章跨设备优化触摸中，Luke Wroblewski说：

“那么，考虑到所有屏幕尺寸的触摸意味着什么？两个东西：触摸目标尺寸和控件的放置。”

Luke Wroblewski强调了响应式触摸设计中要考虑的两个最重要的要点：触摸目标尺寸和控件的放置：

• 触摸目标尺寸：它们相对容易实现，任何需要与触摸交互的导航系统都需要有菜单选项，可以被手指不精确的人舒适地使用，以防止意外触碰和错误。一些提到可触摸区域最小尺寸应为 44 像素的文章。

• 控件的放置：控件需要以与人们拿着和使用触摸设备的方式相一致的方式放置。智能手机屏幕的底部区域是我们想要放置应用程序的最常见和重要的交互的地方，以便它们可以快速轻松地到达，如下网站示例所示：

同样地，我们可以看一下平板电脑的姿势，或者人们通常是如何拿着平板电脑的。人们用两只手沿着两侧拿着它们，或者只是在大腿上敲击屏幕：

使用 JavaScript 插件实现触摸事件

有一些重要的 JavaScript 扩展和插件，允许我们将触摸手势集成到我们的响应式网站中，改善用户交互体验。一些例子包括 QuoJS 和 Hammer。

QuoJS – 简单的触摸交互库

这是一个微型、模块化、面向对象和简洁的 JavaScript 库，简化了 HTML 文档的遍历、事件处理和 Ajax 交互，用于快速的移动 Web 开发。

请注意，QuoJS 不需要 jQuery 来工作；然而，它是一个简单而好的插件。

这个轻量级插件，在 gzip 压缩后仅有 5-6 KB，使我们能够拥有强大的写作、灵活性和适应性的代码。你可以在github.com/soyjavi/QuoJS找到可下载的文件，并在quojs.tapquo.com/找到有关一些额外选项的更多详细信息。

QuoJS 有这些手势来帮助我们：

• 单击

• 长按（650ms+）

• 双击

其代码包中还包括了不同类型的滑动、捏和旋转。

怎么做

在 DOM 底部（在 </body> 结束标签之前），包含 QuoJS 脚本；只有这样，我们才能通过创建事件监听器执行脚本。

在下面的例子中，如果用户将手指放在与工具箱 ID 相等的元素上，我们将实现一个动作。

<script src="img/quo.js"></script>
<script src="img/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
  $('#toolbox').hold(function() {
    $(this).toggleClass('open-box');
  });
});
</script>

QuoJS 在语法中使用$$符号，避免与我们可能在网站上使用的$jQuery 符号发生冲突。

Hammer – 一个不错的多点触控库

Hammer 是一个 jQuery 轻量级的多点触控手势库，压缩后只有 3 KB。

Hammer 支持这些手势：

• 轻触

• 双击

• 滑动

• 拖拽

• 捏

• 旋转

每个手势触发有用的事件和插件提供的事件数据。

怎么做

首先，让我们从github.com/EightMedia/hammer.js下载库。在 DOM 底部（在 </body> 结束标签之前），包含 Hammer 脚本，然后我们将能够通过创建事件监听器执行脚本：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.hammer.min.js"></script>

提示

有时，不需要 jQuery 的版本似乎更快，但在所有浏览器中可能不起作用。要切换版本，只需用hammer.min.js替换jquery.hammer.min.js文件。

让我们看一个例子：

<script>
$(document).ready(function() {
  var hammertime = $(".toucharea").hammer();   
  hammertime.on("touch", "#toolbox", function(ev) {
   $(this).toggleClass('open-box');
  });
});
  </script>

在这个例子中，它捕捉了触摸交互，并在对象上应用了open-box类。然而，还有许多其他的触摸事件需要处理，更多关于其用法的细节可以在github.com/EightMedia/hammer.js/wiki找到。

练习 6 – 使用 Swiper 插件创建一个图片幻灯片

只是为了提醒我们，这是我们最初设计的一个截图：

提示

这张图片只是一个建议。你可以找到任何图片来替换它。这里的重点是在一个响应式标签内创建一个响应式图片幻灯片。

现在，只需选择每个幻灯片一张图片，并使用 Swiper 解决方案，在每个幻灯片上插入一个标语：

• 灵活性就是一切

• 一些设计良好的动作

• 肌肉控制使身体均匀发展

• 身体健康是幸福的首要条件

正如我们在第四章中所看到的，设计响应式文本，高度建议在响应式网站中使用@font-face。因此，为了补充这个练习，使用 Google Fonts 提供的免费字体 Titan One 进行标语的自定义。

提示

记得在必要时使用 FontSquirrel 工具包。

摘要

在本章中，我们已经学习了为响应式网站准备的滑块插件，如 Elastislide、FlexSlider、ResponsiveSlides、Swiper 和 Slicebox。我们还学习了如何构建它们，它们的优点和效果特性。尽管许多这些滑块插件已经实现了手势触摸，正如我们在本章中所见，我们还向您展示了如何使用 QuoJS 和 Hammer 库来整合触摸功能。

在下一章中，我们将看到如何在小宽度设备上处理表格。我们将了解如何实现经常使用的每种技术，例如水平滚动、减少可见列和转换为堆叠表格。

第七章：设计响应式表格

HTML 元素表格可能相当宽以显示结构化内容。有时需要将整行数据保留在一起才能使表格有意义。表格默认可以弹性伸缩，但如果它们变得太窄，单元格内容将开始换行；这通常不太干净！

Garrett Dimon 提到了一个有趣的话题，关于调整表格宽度以适应不同屏幕尺寸并确保表格内容的含义的难度：

“数据表在响应式设计方面表现不佳。只是说说而已。”

在本章中，我们将学习创建响应式表格的四种不同方法：

• 可扩展的响应式表格

• 堆叠表格

• 水平溢出

• 完整表格链接

响应式表格

下图显示了关于响应式表格的最常见问题，包括：最小表格宽度超过屏幕尺寸和整个表格尺寸（包括文本大小）的减小：

然而，让我们看看解决这个响应式问题的不同方法。

可扩展的响应式表格

通过 FooTable，我们可以将 HTML 表格转换为可扩展的响应式表格，允许具有小屏幕尺寸的设备保持相同的内容，唯一的变化是您将不得不优先考虑将要显示的内容。其功能是根据断点隐藏您认为不太重要的列。因此，只有在单击/触摸行时才会显示隐藏的数据。

如果我们更深入地研究这个 jQuery 插件，我们将注意到两个重要特性为良好的代码和开发的便利做出了贡献：即时定制（通过来自 DOM 的数据属性）和 断点设置（可能与已在网站上使用的断点设置不同）。

接下来的示例中让我们看看如何在 DOM 中定义它。

如何做

从 github.com/bradvin/FooTable/ 下载插件后，我们将在 <head> 标签中包含 CSS 样式表：

<link href="css/themes/footable.metro.css" rel="stylesheet" type="text/css" />

默认情况下，FooTable 仅使用两个断点：phone 设置为 480 px，tablet 设置为 1024 px。这些断点值不需要与您可能使用的值相同，因为它取决于表格需要多少空间。此外，如果必要，稍后我们将看到如何更改它。

让我们将以下代码作为示例插入到 HTML 代码中，以便练习插件资源：

<table class="expandable-table">
  <thead>
    <tr>
      <th data-class="expand-icon">Contact name</th>
      <th data-hide="phone">Phone</th>
      <th data-hide="phone,tablet">Email</th>
      <th data-hide="phone" data-ignore="true">Picture</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
      <td><img src="img/30x30" alt="Profile image" /></td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
      <td><img src="img/30x30" alt="Profile image" /></td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
      <td><img src="img/30x30" alt="Profile image" /></td>
    </tr>
  </tbody>
</table>

数据属性有助于理解 FooTable 的功能，只需查看 DOM 就可以知道哪些列会在手机或平板电脑上隐藏。

以下是 FooTable 使用的基本数据属性及其功能：

• data-class：这指定要应用于列中所有单元格的 CSS 类。

• data-hide：定义将在列中隐藏哪些断点。可以通过逗号分隔指定多个断点。

• data-ignore：仅在查看详细信息时隐藏内容。通常与data-hide类一起使用，此选项的可接受值可以是true或false。

有关所有数据属性列表的更多信息，您可以访问fooplugins.com/footable/demos/data-attributes.htm。

提示

如果我们使用这些数据属性，应该将它们应用在<th>元素上，插件将在内部单元格中反映其更改。

在 DOM 的底部（在</body>结束标记之前），我们需要包含两个文件：jQuery 和 FooTable 库。之后，插入以下代码来执行脚本：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/footable.min.js"></script>
<script>
  $(function() {
    $(".expandable-table").footable();
  });
</script>

如果我们想要更改 FooTable 的断点，只需在执行前面的脚本时指定自己的值，如下面的代码所示：

<script>
  $(function() {
    $(".expandable-table").footable({
 breakpoints: {
 tablet: 768,
 smartphone: 480,
 mini: 320
 }
    });
  });
</script>

在下面的屏幕截图中，我们将看到如果单击 Bob 的表行会发生什么。让我们比较一下我们在智能手机和平板电脑上的响应式表格：

在此示例中，每个设备上都有一些字段，只有在单击查看特定联系人的更多详细信息时才可见。虽然这种方法可以避免大量数据，但可能很难找到一个联系人，例如，通过电子邮件，因为这需要单击所有联系人才能显示信息。

有一些插件扩展可以解决这个问题。让我们来看看它们。

扩展插件

使用 FooTable 作为解决方案的另一个优点是其可扩展性。该插件是模块化的，允许您通过使用插件增加功能，例如排序、过滤和分页。

排序插件提供对表格列中包含的数据进行排序的功能。为此，我们将包含以下脚本文件：

<script src="img/footable.sort.js"></script>

然后，我们将为想要启用排序的项目设置data-sort-initial="true"，并为不适合排序的项目设置data-sort-ignore="true"，例如图像和电话：

<th data-sort-initial="true">Contact name</th>
<th data-sort-ignore="true">Phone</th>

在下面的屏幕截图中，我们可以看到箭头图标的插入，这是插件用来对特定表头进行排序的：

过滤插件添加了一个搜索字段，允许用户查找他们正在寻找的数据。搜索结果为我们带来了正确的数据，即使它们对观众是隐藏的。为此，让我们在脚本文件中包含以下内容：

<script src="img/footable.filter.js"></script>

在页面上添加一个文本输入框（在表格之前或之后），其 ID 为#filter，然后在表格元素的data-filter=#filter数据属性上指定它。以下是此筛选器的代码：

Filter by: <input id="filter" type="text">

在下面的屏幕截图中，筛选内容，仅显示一个项目，即使找到的值被隐藏：

此外，分页附加组件可以帮助显示总内容的一部分，默认创建含有 10 个项目的分页。为此，我们需要在脚本文件中包含以下代码：

<script src="img/footable.paginate.js"></script>

因此，在上一个表格示例中，在</tbody>之后，我们将添加以下代码，用于接收分页。以下 div 中的pagination类是必需的，其他类如pagination-centered和hide-if-no-paging仅为补充：

<tfoot>
<tr>
  <td colspan="4">
    <div class="pagination-centered hide-if-no-paging pagination"></div>
  </td>
</tr>
</tfoot>

此外，对于此示例，让我们限制每页两个项目，以查看分页的使用，只需在table元素上添加data-page-size="2"。效果如下：

有关这些附加组件和更多插件选项的详细信息，请参阅fooplugins.com/footable-demos/的完整文档。

尽管此插件看起来非常完善，但在某些情况下，内容需要其他界面。让我们看看堆叠表解决方案。

堆叠表

Stackedtable 是一个 jQuery 插件，为我们的响应式表格提供了另一种选项，可从[johnpolacek.github.io/stacktable.js/](http:// http://johnpolacek.github.io/stacktable.js/)下载。

此解决方案将创建表格的副本，并将宽表格转换为在小屏幕上效果更好的两列键/值格式。

Tip

建议仅用于少量行的表格，因为它会大大增加垂直内容。

通过使用简单的媒体查询，我们可以隐藏原始表格并显示堆叠表。让我们看看如何将其付诸实践。

如何使用上一个示例中的表格

我们将首先在<head>标签内包含 CSS 样式表：

<link href="stacktable.css" rel="stylesheet" />

如果我们想要更改断点，目的是将此解决方案用于智能手机，只需进入stacktable.css文件并更改max-width属性：

@media (max-width: 480px) {
  .large-only { display: none; }
  .stacktable.small-only { display: table; }
}

之后，我们将添加上一个解决方案中看到的表格的基础，只需添加一个 ID 和类：

<table id="stack-table" class="large-only">
  <thead>
    <tr>
      <th>Contact name</th>
      <th>Phone</th>
      <th>Email</th>
      <th>Picture</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
      <td><img src="img/30x30" alt="Profile image" /></td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
      <td><img src="img/30x30" alt="Profile image" /></td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
      <td><img src="img/30x30" alt="Profile image" /></td>
    </tr>
  </tbody>
</table>

在 DOM 的底部（在</body>闭合标签之前），我们需要包含两个文件：jquery和stacktable库。然后，插入以下代码执行脚本，并指定表格 ID 和一个类来限制堆叠表仅适用于智能手机，如下所需：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/stacktable.js"></script>
<script>
$('#stack-table').stacktable({myClass:'stacktable small-only'});
</script> 

以下是两个视图的屏幕截图—用于小设备和桌面：

水平溢出

此技术通过冻结第一列来实现，使您可以在其下滚动其他列。这样我们保持每行看到第一列的内容，从而允许左滚动，以查看其余内容，以便更容易进行数据比较。

推荐这种表格用于有更多列的表格，并且第一列的内容比其他列更重要。让我们通过在下一个示例中练习来澄清它将是什么样子。

如何做

我们将从zurb.com/playground/responsive-tables下载解决方案。然后创建一个新的 HTML 文件，并在<head>标签内包含 CSS 样式表：

<link rel="stylesheet" href="css/responsive-tables.css">

现在插入以下 HTML 表格代码，使用比之前更多的列，并添加一个名为responsive的类：

<table class="responsive">
<tr>
  <th>Header 1</th>
  <th>Header 2</th>
  <th>Header 3</th>
  <th>Header 4</th>
  <th>Header 5</th>
  <th>Header 6</th>
</tr>
<tr>
  <td>first column important data</td>
  <td>row 1, cell 2</td>
  <td>row 1, cell 3</td>
  <td>row 1, cell 4</td>
  <td>row 1, cell 5</td>
  <td>row 1, cell 6</td>
</tr>
<tr>
  <td>first column important data</td>
  <td>row 2, cell 2</td>
  <td>row 2, cell 3</td>
  <td>row 2, cell 4</td>
  <td>row 2, cell 5</td>
  <td>row 2, cell 6</td>
</tr>
</table>

在 DOM 的底部（在</body>结束标签之前），我们只需要包含 jQuery 和响应式表格库：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/responsive-tables.js"></script>

让我们看一下下面的屏幕截图，显示了这张表格在智能手机和平板电脑上的情况：

小贴士

当可用屏幕宽度超过 767 像素时，我们的表格开始发生变化。如果我们想修改这个默认值，需要打开responsive-tables.js文件，查找数值 767，并进行更改。

从技术上讲，这很容易做到。然而，我们不能低估它在响应式网站上的效率，因为它有助于在小设备上更好地理解表格信息。

表头方向翻转

如果您发现我们表格的标题行比第一列更重要，并且在使用小设备时需要保持显示标题行，David Bushell通过仅使用 CSS 代码创建了一个有趣的解决方案。

这个 CSS 解决方案将第一列移到另一个地方，不需要任何 JavaScript 库，只需要 CSS3。

让我们从在<head>标签内包含 CSS 样式表开始：

<style>
@media only screen and (max-width: 767px) {

.responsive {
  display: block; position: relative; 
}
.responsive thead {
  display: block; float: left;
}
.responsive tbody { 
  display: block; width: auto; position: relative;
  overflow-x: auto; white-space: nowrap;
}
.responsive thead tr {
  display: block;
}
.responsive th {
  display: block; border: 0; border-top: 1px solid #AAA;   
  background: #CCC; border-right: 1px solid #ccc;
  padding: 8px 10px !important;
}
.responsive tbody tr {
  display: inline-block; vertical-align: top;
  border-right: 1px solid #ccc;
}
.responsive td {
  display: block; min-height: 1.25em; border: 0;
}
table.responsive th:first-child, table.responsive td:first-child,
table.responsive td:first-child, table.responsive.pinned td {  
  display: block;
}

}
</style>

使用更真实的内容，让我们在 HTML 代码中创建这个表格：

<table class="responsive" cellspacing="0" border="1">
  <thead>
    <tr>
      <th>Doctor names</th>
      <th>Values</th>
      <th>Dates</th>
      <th>Cash Money</th>
      <th>Message</th>
      <th>City</th>
      <th>State</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Dr. Jayhawk</td>
      <td>102</td>
      <td>03/30/1940</td>
      <td>$60.42</td>
      <td>PAID</td>
      <td>Atlanta</td>
      <td>Georgia</td>
    </tr>
    <tr>
      <td>Dr. John Smith</td>
      <td>137</td>
      <td>03/18/1953</td>
      <td>$69.68</td>
      <td>PAID</td>
      <td>Orlando</td>
      <td>Florida</td>
    </tr>
    <tr>
      <td>Dr. Wolverine</td>
      <td>154</td>
      <td>03/29/1976</td>
      <td>$86.68</td>
      <td>PAID</td>
      <td>New Orleans</td>
      <td>Louisiana</td>
    </tr>
    <tr>
      <td>Dr. Tarheel</td>
      <td>113</td>
      <td>03/30/1981</td>
      <td>$63.50</td>
      <td>PAID</td>
      <td>San Antonio</td>
      <td>Texas</td>
    </tr>
  </tbody>
</table>

让我们看一下智能手机和平板电脑上的结果：

链接到全表

链接到全表是一种不太常用的技术，因为它并不能完全解决情况。它的工作原理是用一个小模拟表来替换原表，然后只创建一个链接以查看完整的表格。

问题仍然存在，但这次用户可以在屏幕上向左/向右滑动以查看所有内容。有一个媒体查询来处理这种机制，只在小屏幕上显示它。

如何做

首先，让我们从可下载的代码文件中下载full-table.css文件。然后将其插入到 HTML 代码的<head>标签内。尽管这是一个 CSS 解决方案，但这段代码太长了，增加了打错字的机会。

让我们重复使用从上一个示例中复制的表格代码，但对表格元素进行修改，如下所示：

<table id="responsive" class="full-table">

在 DOM 的底部（在</body>结束标签之前），我们需要包含jquery库并插入以下代码，根据一个类名来显示/隐藏解决方案：

<script src="img/jquery-1.9.1.min.js"></script>
<script>
$(function(){
  $("#responsive").click(function(){
    $("html").toggleClass($(this).attr("class"));
  });
});
</script>

在下面的屏幕截图中，我们将看到针对小屏幕的被压缩表格，在点击后将用户引导至完整表格可视化。当屏幕尺寸小于或等于 520 像素时，会出现此效果（如果需要使用 CSS 文件，可以修改此值）。

注意

插件在点击后生成水平滚动条，以查看完整宽度的表格。

练习 6 – 使用 FooTable jQuery 插件创建响应式价格表格

让我们使用 FooTable jQuery 插件和下面屏幕截图中表格的内容创建一个响应式表格。

注意

这个表格的内容并非真实，我们只是用它来练习。

在下面的屏幕截图中，我们可以看到该表格在智能手机和平板电脑上的显示，每个设备使用不同的设计：

您可以首先基于平板电脑的设计创建表格结构，然后使用 FooTable 插件自动化为智能手机实现紧凑的可视化效果。

总结

在本章中，我们学习了处理小设备宽度下宽表的四种不同方式。我们重点关注如何实现每种技术，因为它们的使用取决于表格内容的类型。我们刚刚看到的技术有：可扩展响应式表格（FooTable）、堆叠表格、水平溢出和链接到完整表格。

在下一章中，我们将学习如何使用表单，并学习如何实现自动完成、日期选择器和工具提示等功能。

第八章：实现响应式表单

使用 HTML5 编码在前端网页开发中的景观发生了巨大变化。通过使用适当的字段类型和本地验证，构建更好的表单的机会更多了，这是 SEO 的最佳情况。所有这些功能正在逐步被所有现代网络浏览器采用。

通过使用 jQuery，我们可以增强页面上的 HTML5 体验，增加补充功能以改善用户体验。

在本章中，我们将学习以下内容：

• 表单输入的类型和属性

• autocomplete 特性

• datepicker 特性

• tooltips 特性

• 使用 IdealForms 的响应式框架

表单输入的类型和属性

使用 HTML5 输入类型带来了开发的两个主要优势：减少开发时间和改善用户体验。许多现代浏览器已经采用了这些新的输入类型和属性，整个网络社区都受益于此，促进了其使用的传播。

最常用的 HTML5 输入类型包括email、date、tel、number和time。此外，HTML5 自带的最常见属性包括placeholder、required、autocomplete和multiple。我们将在第十章中看到，确保浏览器支持，并不是所有的网络浏览器都以相同的方式支持 HTML5 特性，并且需要 jQuery 的干预来提供适当的支持。

但是，它仍然依赖于 jQuery 技术来显示诸如autocomplete等更复杂的验证。通常情况下，jQuery 插件与新的 HTML5 输入类型非常配合，几乎对响应式网站来说是必不可少的。在开始实现功能之前，让我们创建一个基本的表单；这是第一步，将在后续示例中使用。创建一个带有基本标签的空 HTML 站点结构，然后保留 jQuery 包含，很快就会用到它：

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Responsive form</title>
</head>
<body>
<script src="img/jquery-1.9.1.min.js"></script>
</body>
</html>

为了逐步学习，每个特性都将独立呈现；只有之前的基本代码将被重复使用。

我们将看到的这些插件并不是服务器端验证的替代品；它们只会让用户体验更好，减少服务器请求，并提供更好的交互界面。

带有 Magicsuggest 的自动完成特性

Magicsuggest 是一个灵活的自动建议下拉框，在用户开始在字段中输入时提供建议。使用这个特性将减少打字的必要性，特别是在移动设备上，每输入一个字母都很麻烦。

默认情况下，Magicsuggest 具有一些很好的功能，例如按住 Ctrl 键选择多个项目，并在输入文本后使用 Enter 键添加新输入。

JSON 数据源用于填充下拉框。这里有一些可用的选项：

• 没有数据源：当设置为null时，下拉框将不会提供任何建议。如果允许FreeEntries设置为true（默认值），它仍然可以使用户输入多个条目。

• 静态源：它使用 JSON 对象数组、字符串数组甚至单个 CSV 字符串作为数据源。

• URL：我们可以传递组件将获取其 JSON 数据的 URL。数据将使用POST AJAX 请求获取，该请求将输入的文本作为查询参数。

• 函数：我们可以设置一个返回 JSON 对象数组的函数。函数只需要一个回调函数或返回值就可以成功。

如何实现它

让我们从nicolasbize.github.io/magicsuggest/下载文件。下载后，我们将在已创建的基本代码内的<head>标签中包含 JavaScript 和 CSS 文件：

<script src="img/magicsuggest-1.3.1.js"></script>
<link rel="stylesheet" href="css/magicsuggest-1.3.1.css">

然后，插入以下代码片段来创建具有这些城市的 JSON 数据，然后执行 Magicsuggest 脚本，如果必要的话，同时给予一些选项：

<script type="text/javascript">
$(document).ready(function() {
  var jsonData = [];
  var cities = 'New York,Los Angeles,Chicago,Houston,Paris,
Marseille,Toulouse,Lyon,Bordeaux, Philadelphia,Phoenix,
San Antonio,San Diego,Dallas'.split(',');
  for(var i=0;i<cities.length;i++) jsonData.push({id:i,name:cities[i]});
  var city = $('#field-city').magicSuggest({
    data: jsonData,
    resultAsString: true,
    maxSelection: 1,
    maxSelectionRenderer: function(){}
  })
});
</script>

下一步是在<body>标签内添加city字段。

<label for="field-city">City: </label>
<input id="field-city" type="text"/>

如下截图所示，当点击选择字段时，我们将立即看到建议功能的出现：

在前面的例子中，我们只实现了基本用法。然而，此插件还有其他有趣的实现方式，可能会在未来符合您的需求，例如：

• 右侧标签选择

• Gmail 风格组合

• 列过滤器组合

• 使用图像的自定义模板下拉框

日期和时间选择器功能

移动用户已经有一个非常熟悉的日期和时间输入界面。然而，我们将学习一个 jQuery 插件，它可能有助于通过在所有设备上显示相同的功能来保持网站的身份。

Pickadate – 响应式日期/时间选择器

Pickadate 是一个响应式的 jQuery 插件，非常有趣，同时也适用于移动设备，并且轻量级。无论是什么浏览器或设备，都可以提供自定义界面。

这是一种在填写表单时方便插入正确日期的好方法，因为它可以避免打字错误，并向用户提供更好的指导，显示月份的完整日历。

怎么做

从amsul.ca/pickadate.js/下载文件后，我们将从已创建的基本代码内的<head>标签中开始包含 JavaScript 和 CSS 文件：

<script src="img/picker.js"></script>
<script src="img/picker.date.js"></script>
<script src="img/picker.time.js"></script>
<link rel="stylesheet" href="lib/themes/default.css" id="theme_base">
<link rel="stylesheet" href="lib/themes/default.date.css" id="theme_date">
<link rel="stylesheet" href="lib/themes/default.time.css" id="theme_time">

提示

如果需要支持旧浏览器，建议包含legacy.js文件。

之后，我们需要执行datepicker和timepicker的脚本。

<script>
$('.js__datepicker').pickadate();
$('.js__timepicker').pickatime();
</script>  

下一步是在<body>标签内插入一个日期字段和另一个时间字段。插件要求类名需要被突出显示。

<fieldset class="fieldset js__fieldset">
  <div class="fieldset__wrapper">
    <label>Schedule detail:</label>&nbsp;
    <input class="fieldset__input js__datepicker" type="text" placeholder="What date?">&nbsp;&nbsp;
    <input class="fieldset__input js__timepicker" type="text" placeholder="What time?">
  </div>
</fieldset>

以下是在智能手机和平板电脑上激活datepicker插件的屏幕截图：

以下是用户点击时间字段时的屏幕截图：

pickadate插件非常完善，提供了其扩展以添加对以下支持：

• 翻译（包括从右到左的语言）

• 不同的格式

• 日期/时间限制

您可以在amsul.ca/pickadate.js/date.htm#options找到关于这些扩展的更多信息。

工具提示功能

tooltip是在网页上元素的标签和输入字段之间常见的一种方式，用于呈现有关元素的附加上下文信息。其作用是提供有关特定字段的更多信息。

随着工具提示作为用户与网页元素交互的一种常见方式，设计和交互良好的工具提示变得更加重要。

通常，将鼠标指针放在元素上即可显示工具提示，并显示消息。由于大多数移动设备没有指针，因此必须通过显示触摸时的工具提示的插件来处理此问题。

Tooltipster - 现代工具提示功能

Tooltipster 是一个强大而灵活的 jQuery 插件，可让您轻松创建语义化和现代化的工具提示。

如何操作

我们将从calebjacob.com/tooltipster/下载 tooltipster 文件，并将 JavaScript 和 CSS 文件包含在已创建的基本代码的<head>标签中：

<script src="img/jquery.tooltipster.min.js"></script>
<link rel="stylesheet" href="css/tooltipster.css" />

要激活插件，我们将添加tooltipster库并将其配置为对具有.tooltip类的所有元素执行（在本例中，只有一个实例，但您可以在页面中使用多个）：

<script>
$(function() {
  $('.tooltip').tooltipster();
});
</script>

之后，我们将添加一个问号图像，并在我们想要在其上显示工具提示的每个元素上定义tooltip类：

<img class="tooltip" title="This is my image's tooltip message!" src="img/question-mark.png" />

以下是点击/触摸元素后插件的屏幕截图：

我们还可以通过编辑tooltipster.css文件来修改默认插件主题，或者通过在script调用中指定类来覆盖现有主题。

<script>
$(function() {
  $('.tooltip').tooltipster({
    theme: '.my-custom-theme'
  });
});
</script>

使用 IdealForms 创建响应式表单

IdealForms，位于github.com/elclanrs/jq-idealforms，是一个用于构建和验证响应式 HTML5 表单的框架。此外，它具有键盘支持，在用户转到下一个字段时快速验证，并为大多数浏览器提供占位符支持。

IdealForms 框架还具有分页选项，可在填写大型表单时大大改善用户体验。让我们逐步练习以了解其用法。

如何实现它

创建一个新的 HTML 文件，并复制我们在本章开头已经编写的基本代码。然后，我们将在 <head> 标签中包含 CSS 样式表。

<link rel="stylesheet" href="css/jquery.idealforms.min.css"/>

让我们将以下示例代码插入 HTML 结构中，其界面使用 <section> 标签分为两个标签页：

<form id="form">
  <div><h2>Profile form:</h2></div>

在第一个标签页中，我们将添加用户名、密码和电子邮件字段：

<section name="First tab">
  <div><label>Username:</label>
  <input id="username" name="username" type="text" /></div>
  <div><label>Password:</label>
  <input id="pass" name="password" type="password" /></div>
  <div><label>E-Mail:</label>
  <input id="email" name="email" data-ideal="required email" type="email" /></div>
</section>

在第二个标签页中，我们将添加文件、语言和电话字段。

<section name="Second tab">

  <div><label>Image:</label>
  <input id="file" name="file" multiple type="file" /></div>
  <div id="languages">
  <label>Languages:</label>
  <label><input type="checkbox" name="langs[]" value="English"/>English</label>
  <label><input type="checkbox" name="langs[]" value="Chinese"/>Chinese</label>
  <label><input type="checkbox" name="langs[]" value="Spanish"/>Spanish</label>
  </div>
  <div><label>Phone:</label>
  <input type="tel" name="phone" data-ideal="phone" /></div>
</section>

最后，我们将添加一个提交按钮。

  <div><hr/></div>
  <div><button type="submit">Submit</button>
</form>

在 DOM 底部（在 </body> 结束标记之前），我们需要包含 jquery 和 idealforms 库。

<script src="img/jquery.idealforms.js"></script>

然后，插入以下代码，这将执行开始创建一个函数的脚本，该函数在用户填写不正确值时会弹出警告。

<script>
  var options = {
    onFail: function() {
      alert( $myform.getInvalid().length +' invalid fields.' )
    },

在这里，我们将设置哪个表单元素将被验证。

    inputs: {
      'password': {
        filters: 'required pass',
      },
      'username': {
        filters: 'required username',
        data: { //ajax: { url:'validate.php' } }
      },
      'file': {
        filters: 'extension',
        data: { extension: ['jpg'] }
      },      'langs[]': {
        filters: 'min max',
        data: { min: 2, max: 3 },
        errors: {
          min: 'Check at least <strong>2</strong> options.',
          max: 'No more than <strong>3</strong> options allowed.'
        }
      }
    }
  };

完成验证后，我们将执行idealforms JavaScript，加载之前设置的所有验证。

  var $myform = $('#form').idealforms(options).data('idealforms');
</script>

就这样！客户端验证已经实现。

以下是在智能手机设备上查看时该框架运行情况的截图：

同一页面可能在桌面上查看，并且默认布局非常适配。

练习 8 – 使用 IdealForms 框架创建联系表单

让我们基于先前完整的逐步示例并使用 IdealForms 框架作为此表单基础来创建一个响应式联系表单项目。

所以，和以往一样，让我们开始包括 CSS 文件和以下字段：姓名、电子邮件、理想的第一课（日期），以及如下截图所示的电话：

日期字段未在 IdealForms 中提及，因为默认情况下，它使用 jQueryUI 解决方案。然而，我建议使用 Pickadate 插件，因为与 jQueryUI 相比，它更轻量级，并且还有助于强化我们之前学到的示例。

摘要

在本章中，我们学习了如何通过使用一些 jQuery 插件来完善代码与 HTML5 表单元素很好地配合，例如autocomplete的 Magicsuggest，datepicker的 Pickadate，以及在必要时的tooltips的 Tooltipster。此外，我们还体验了如何使用 IdealForms，一个响应式表单框架，来构建联系表单界面。

在下一章中，我们将使用工具和脚本来测试网站，以确保其在所有设备上的响应性。彻底理解下一章对于检查我们在旧浏览器或移动设备上实现可能出现的错误并进一步修复它们至关重要。此外，测试阶段对于避免客户报告的未来意外非常重要。

第九章：测试响应性

事实证明，在设备本身上检查设计没有比在我们的测试模拟器中消耗更多的时间，浏览器工具是使测试变得更快的解决方案，但不会能够复制一个与真实情况完全相同的网站。

尽管它们会非常接近，但我们可以将这种类型的测试定义为仅作为初始测试过程，然后在真实设备上进行测试，以确保所有功能都运行良好。

在本章中，我们将学习以下内容：

• 使用浏览器工具模拟设备

• 在设备模拟器上测试

• 响应式网站单元测试的提示

使用浏览器工具模拟设备

浏览器工具将无法模拟我们通常在设备上看到的方式，但它们有助于 CSS 断点测试，并显示您的响应式网站在 iPad、iPhone 或任何基于屏幕尺寸测量的 Android 手机等最流行设备上的外观。

屏幕调整大小不会捕捉浏览器及其渲染引擎之间的不一致性。例如，使用 Chrome 调整浏览器大小并不会告诉您仅在 Safari 移动浏览器上发生的 CSS 问题。

让我们来看看几个网站，这将帮助您作为开发人员确定您的网站在特定设备上的表现如何。

使用 Viewport Resizer 网站工具

Viewport Resizer 是一个网站工具，它在开发或发布网站后测试响应式网站时提供了便利。

在工具网站上列出的优点中，我们想要强调一些：

• 在运行时添加自定义屏幕尺寸

• 设备指标的视觉预览（鼠标悬停）

• 视口信息（大小、纵横比、方向和用户代理）

• 打印支持：仅 WebKit（Chrome 和 Safari）

不幸的是，这个工具在任何版本的 Internet Explorer 浏览器中仍然无法工作，这对于查找 Windows 手机上的视觉问题会很有帮助。

无需下载或安装它。您只需要访问 lab.maltewassermann.com/viewport-resizer 并将标有 点击或收藏 按钮的链接保存到您的收藏链接列表中。

以下是我们的网站在智能手机上使用此工具时的呈现示例：

使用调查者网站工具

调查者是一个网站工具，它遵循了上一个工具的基础，并使得在正在开发的网站和已经发布的网站上测试响应性成为可能。

您可以通过访问 surveyor.io 并指定要查看的 URL 和屏幕尺寸来测试网站（没有预定义的值可供选择）。

然后，您可以在所有断点上并排测试您的响应式设计，帮助您更好地了解正在使用的断点设计，促进所有比较。

提示

有时，此浏览器工具显示的滚动条可能会误导我们对网站分析，显示出实际上不存在的问题。在这种情况下，值得检查网站以及接下来的这个工具。

观察这个网站，并比较该网站被调整到平板电脑和智能手机版本之间的区别：

使用 ScreenFly 网站工具

这个工具也遵循了我们之前看到的网站调整大小的模式，在这种模式下，开发者输入 URL（它也适用于开发项目），并选择我们想要在网站上检查的分辨率。

这个工具为开发者提供了一些精确的屏幕尺寸模板供选择，以及市场上最常见的设备型号。而且它不需要记住所有模板，这让使用更加方便。或者，如果您想自定义自己的尺寸，只需点击自定义屏幕尺寸按钮即可。

访问网站quirktools.com/screenfly，您可以提供要测试的网站。默认情况下，它会在 Netbook 10 预览中显示您的网站，模拟设备宽度。您可以通过点击标题按钮并选择特定型号来选择其他设备。

ScreenFly 工具还有另一个有趣的功能，即共享链接，以便更轻松地进行客户和开发人员之间的沟通（仅适用于已经发布的网站）。

这对于改善客户和开发人员之间的沟通非常有用，展示某些功能或问题。为了做到这一点，只需点击共享按钮，并将链接发送给其他人。通过访问此链接，对方将看到类似于这样的屏幕：

Opera 移动模拟器

尽管 Opera 移动浏览器已经不再处于巅峰时期，但根据StatCounter.com网站的数据，它仍然占移动设备访问量的 16.62％。这也是为什么在这个移动浏览器中至少检查我们网站的主要基本功能仍然很重要的原因。

Opera Software 公司为开发人员提供了良好的支持，他们提供了一个内置 Mobile Opera 浏览器的模拟器。其浏览器也构成了模拟器的基础，您可以使用它来测试各种不同的移动设备。您可以在www.opera.com/developer/mobile-emulator下载该应用程序。

安装好后，只需选择所需的设备，如下面的屏幕截图所示，并点击启动按钮：

响应式网站设计测试技巧

有了这些响应式设计工具，我们已经准备好创建适用于任何设备的灵活设计。

但在测试时，注意以下提示很重要：

• 不要在没有进行测试的情况下完成整个网站。最好的方法是在每个功能实施后立即进行测试，这样可以更容易找到问题所在。

• 回归测试非常重要，以防止级联错误。在测试完实现的功能后，请检查之前所做的内容是否没有在网站的其他部分引入新问题。

  注意

  回归测试在对网站的现有区域进行增强之后寻找软件 bug。

• 检查图像和图标质量以及网站内容在结构上的流畅性。

• 对响应式网站进行性能分析，特别是在移动设备上查看时（我们将在下一章中专门看到这一点）。

练习 9 - 让我们在不同的屏幕尺寸下测试我们的网站

我们将选择我们之前看到的工具之一来测试我们的网站。

这是使用 Surveyor 工具模拟智能手机和平板电脑断点的屏幕截图：

在测试时，首先记录下所有发现的视觉问题，以及已实现的功能，然后立即开始修复它们。这个过程可以确保你不会失去注意力和浪费时间。

总结

在本章中，我们已经专注于通过使用工具和脚本来测试网站，以确保其在所有设备上的响应性。我们已经了解了通过使用网站工具，如 Viewport Resizer、Surveyor 和 ScreenFly 来检查我们的实现中可能存在的错误的重要性。此外，我们通过在原生 Opera Mobile 浏览器中打开网站来模拟许多移动设备并测试 Opera Mobile 模拟器。

在下一章中，我们将确保跨浏览器解决方案提供回退。我们将学习如何处理旧的浏览器，并通过展示优雅降级来呈现正确的设计。

第十章：确保浏览器支持

不同的浏览器具有自己的专有功能以及以自己的方式实现的标准功能的子集，这给我们带来了很多工作，以使这些功能适用于所有浏览器。

这些差异的原因是 W3C 规范不断更新，而且随着浏览器之间的不断竞争，它们始终试图将自己的产品推广为具有更好的功能性。

然而，jQuery 具有良好的跨浏览器兼容性，并且具有灵活性，可以弥补每个浏览器中功能实现的差距。这些桥梁被称为Polyfills。

Polyfills 是本章的主要内容，我们还将了解到：

• 检查浏览器支持的功能

• polyfill 的含义

• 了解特性检测工具

• 用于 HTML5 和 CSS3 的 Polyfill 实现

检查浏览器支持的功能

在网站开发中，经验确实为程序员带来了很大的灵活性。虽然这些知识很快就会过时，但我们必须及时了解新的功能、选择器和增强功能，一旦它们与浏览器兼容。

根据我们的浏览器和设备，检查技术和功能的兼容性的三个主要网站是：CanIUse.com, MobileHTML5.org, 和 QuirksMode.org。

CanIUse.com

CanIUse.com 网站是这些参考网站中最著名的网站，我们可以在其中检查支持 HTML5、CSS3、SVG 等在桌面和移动浏览器中的兼容性表。

如果您访问 caniuse.com，您将会看到它的数据是基于 StatCounter GlobalStats 收集的统计数据，而且数据是不断更新的。

阅读注释和已知问题选项也是很重要的（如下面的屏幕截图中所示），因为我们是社区的一部分，对整个开发网站的演进做出了很大的贡献。这些选项突出了应该考虑的例外情况或报告问题以及在特定场景中他们必须使用的技术。

MobileHTML5.org

MobileHTML5.org 网站专注于移动和平板浏览器上 HTML5 功能的兼容性，通过在真实设备上进行测试来进行区分。这很重要，因为正如我们在前一章中所看到的，模拟的桌面浏览器视图与在移动设备上测试网站之间的视觉差异很小。

但是，当涉及到硬件和设备操作系统时，这些差异会显著增加，只有在真实设备上测试网站时，我们才可能发现潜在问题。

所列设备的种类令人印象深刻。以下截图展示了一些市场份额不再很大的旧设备的功能，甚至显示了最近推出的操作系统，如 FirefoxOS。

请自行访问网站 mobilehtml5.org，并检查更新的列表。

QuirksMode.org

在 [QuirksMode.org](http:// QuirksMode.org) 网站上，我们可以通过在使用之前检查指定的选择器或伪类是否被浏览器接受，来防止在开发过程中出现未来的坏惊喜。否则，我们必须在一开始定义的每个浏览器上进行检查。

QuirksMode.org 网站仅专注于存储和更新几乎每个 CSS 选择器和属性的浏览器支持信息。正如我们在 www.quirksmode.org/css/selectors 上看到的，此信息分为以下几类：

• 组合器

• 属性选择器

• 伪元素

• 伪类

以下是 QuirksMode.org 网站上检查伪元素技术的一部分：

定义回退

回退是在开发网站时的支持流程的一部分。其目标是为我们应用于网站的技术提供替代方案，但并非所有浏览器都支持此特定功能。

此术语可以分为 polyfills 和 webshims。

Polyfill 是一种特定的代码，用于模拟不原生支持某项特性的浏览器。Polyfills 总是尝试模仿原始浏览器特性，但有几种情况下可能会导致轻微的副作用，如增加加载时间或降低性能。

一个 polyfill 的例子是 html5shiv 脚本，我们只需将其放入代码中，它就会像没有任何变化一样起作用。我们稍后会谈论 html5shiv。

Shims 提供了一个回退，但通常具有自己的 API，并且可能需要修改代码以使 shim 起作用。这就是为什么我们有像 yepnope.js 这样的库来加载这些内容（如果需要的话）。我们稍后会看到使用 yepnope.js 的示例。

让我们看看两个功能检测工具，在我们提供回退时可能会有用。

功能检测工具

功能检测是我们能够为网站用户提供的渐进增强的第一步。

然后，我们必须测试浏览器是否已经实现了给定的功能。如果是这样，我们就不需要重新实现已经存在的任何东西，但如果浏览器确实缺少该功能，则建议为其提供正确的支持。

有时我们必须支持尚未完全实现特定功能的浏览器。然而，新功能在查看网站时会产生影响，并且网站的流行度通常会增加。

CSS Browser Selector +

与 Modernizr 相比，跨浏览器响应式设计助手更简单，因为它的唯一功能是在网站加载时检测功能，并将其标记在代码中，使用放置在<html>标签中的类。

它易于实现，因此允许我们编写特定的 CSS 代码，并解决仅限于某些操作系统或浏览器的视觉问题，这是 CSS hacks 的终结！

此 JavaScript 库主要识别的主要项目是：

• 浏览器及其版本

• 渲染引擎

• 平台和操作系统

• 设备

• 屏幕检测的max-width和min-width

• 浏览器方向检测

• 语言检测

通过访问ridjohansen.github.io/css_browser_selector/网站自己尝试这个工具，并通过检查<html>元素来查看类。

这样，就可以解决特定浏览器的问题，甚至帮助创建类似这样的回退。考虑以下示例：

.orientation_landscape .div-example {
  border: 2px solid red;
}

提示

我们拥有的用于创建异常的自定义代码越少，实施未来更新和更改就越好。如果可能的话，最好是确定错误的根本原因，而不仅仅是修复浏览器之间的视觉差异。

如何操作

下载后，我们只需在<head>标签内的代码中包含css_browser_selector.js文件：

<script src="img/css_browser_selector.js"></script>

通过检测，可以加载脚本或不同的功能，但这不包括在此解决方案中。为了解决这个问题并访问更多类型的功能检测，建议使用更完整的解决方案：Modernizr。

Modernizr

Modernizr 是一个 JavaScript 库，用于检测用户浏览器中的 HTML5 和 CSS3 功能，使得为每种情况编写条件化的 JavaScript 和 CSS 变得容易，无论浏览器是否支持某个功能。

它通过向html元素添加类来实现我们将来在 CSS 中选择的目的。此外，它创建了一个 JavaScript 对象，其中包含稍后用于支持数十个测试的结果。当从modernizr.com下载 Modernizr 时，我们可以选择下载完整开发版本或只包含我们打算使用的部分的定制构建版本。

提示

Modernizr 的网站建议下载一个定制版本，该版本具有适合项目的功能，而不是使用来自 CDN 的完整版本，因为大多数情况下定制版本比完全开发的版本要小。

之后，我们可以像这样在头部部分的代码中包含the modernizr.custom.85330.js文件：

<script src="img/modernizr.custom.85330.js"></script>

让我们观察一下在 Firefox 上查看时 <html> 标签中所有检测到并准备使用的功能的类是如何排列的：

<html lang="en" class=" js no-flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">Now, let's look at the features detected, but this time viewed on Internet Explorer 8:<HTML class="ie8 js no-flexbox no-flexboxlegacy no-canvas no-canvastext no-webgl no-touch no-geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets no-rgba no-hsla no-multiplebgs no-backgroundsize no-borderimage no-borderradius no-boxshadow no-textshadow no-opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections no-csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent no-video no-audio localstorage sessionstorage no-webworkers no-applicationcache no-svg no-inlinesvg no-smil no-svgclippaths" lang=en xmlns:html5shiv>

这样，我们可以编写这种代码，在这种情况下，我们可以确保如果您的浏览器不支持boxshadow属性，我们可以制作两个边框模拟阴影效果：

.box {
  border:1px solid #DDD;
  border-bottom: 1px solid #AAA;
  border-right: 1px solid #AAA;
}
.boxshadow div.box {
   border: none;
   -webkit-box-shadow: 1px 1px 3px #777;
      -moz-box-shadow: 1px 1px 3px #777;
           box-shadow: 1px 1px 3px #777;
}

下面的代码示例演示了如何在边框上创建阴影效果：

现在，让我们看看当解决方案需要在需求网站上添加另一个库时，我们可以使用 YepNope.js 做些什么。

YepNope.js

YepNope.js 是一个用于异步条件加载外部 JavaScript 和 CSS 资源的 JavaScript 库。

以下是一个示例，说明了如何使用 Modernizr 测试 CSS 动画，以及在浏览器不支持CSSTransforms时使用 YepNope 作为回退：

<script>
  Modernizr.load({
    test: Modernizr.csstransforms,
    yep : 'css/cssTransform.css',
    nope: ['css/noTransform.css','js/jQuery.pseudoTransforms.js ']
  }); 
</script>

html5shiv

html5shiv 库可以在较旧版本的 IE 浏览器中启用对 HTML5 元素的支持，特别是 6 到 8，并为 IE9 提供了一些基本支持。

另外，这个解决方案还有另一个名为html5shiv-printshiv.js的文件，其中包含了一个可打印版本。它还允许通过 IE6 到 IE8 打印使用 HTML5 元素及其子元素时进行样式设置。

您可以通过简单地选择 Modernizr 下载页面上显示的选项来使用此功能，当该库包含在项目中时，如果浏览器不支持该 html5 元素，它将应用该 polyfill：

Polyfill 实现

已经开发了数百种 polyfills 和 shims。并且随着新功能、元素或增强功能的创建，这个列表会不断增长。

现在我们将看到一些 polyfill 的实现，但是重要的是在开始创建新的 polyfill 之前，你要检查github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills网站，看看是否已经开发了一个 polyfill。

MediaElements.js

MediaElements 是一个 polyfill，用于在旧版本浏览器中使用 Flash 技术模拟本机 HTML5 MediaElement API，从而为正在查看的<video>和<audio>元素创建一致的播放器设计。

在下面的示例中，我们将应用此库来改善浏览器在显示视频时的一致性。然而，要使每个浏览器都能播放您的音频/视频，还有很多工作要做，因为它们需要在不同格式（如.mp4、.webm和.ogg）的文件中托管多个版本。

如何做到

从www.mediaelementjs.com下载最新版本后，我们可以在<head>标签内包含 JavaScript 库和stylesheet文件：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="../build/mediaelementplayer.min.css" />

以下代码用于为不同的浏览器提供更多的可访问性：

<video width="640" height="360" id="player2" poster="../media/echo-hereweare.jpg" controls="controls" preload="none">
  <!-- MP4 source must come first for iOS and webkit browsers -->
  <source type="video/mp4" src="img/echo-hereweare.mp4" />

  <!-- WebM for Firefox and Opera -->
  <source type="video/webm" src="img/echo-hereweare.webm" />
  <source type="video/ogg" src="img/echo-hereweare.ogv" />

  <!-- Fallback flash player -->
  <object width="640" height="360" type="application/x-shockwave-flash" data="../build/flashmediaelement.swf">    
    <param name="movie" value="../build/flashmediaelement.swf" /> 
    <param name="flashvars" value="controls=true&amp;file=../media/echo-hereweare.mp4" />     
    <img src="img/echo-hereweare.jpg" width="640" height="360" alt="" title="No video playback capabilities" />
  </object>   
</video>

然后，你可以通过以下方式为文档中的任何<video>或<audio>元素初始化播放器：

<script>
$('video').mediaelementplayer({
  success: function(player, node) {
    $('#' + node.id + '-mode').html('mode: ' + player.pluginType);
  }
});
</script>

在下面的截图中，显示了其默认视频播放器 UI 的示例：

当执行播放器时，有许多选项可供配置。这些选项可以在mediaelementjs.com/#options找到。

SVG

可缩放矢量图形（SVG）是一种用于矢量图形的图像格式。它的使用具有许多优点，如文件大小压缩良好，可在不失清晰度的情况下缩放到任何大小，在视网膜显示屏上显示效果良好，并通过为设计师提供更多控制权来实现更多交互性。

然而，浏览器对其的接受尚不完整，需要备用方案。 Alexey Ten 制定了一种非常有趣的技术，因为它解决了诸如 Internet Explorer 8 和 Android 2.3 等浏览器的问题。

让我们了解一种更好的覆盖 SVG 实现的方法。

如何实现

有一些不同的方法可以在网站上放置 SVG 文件。我们将使用以下方法来处理它们：背景图像，作为 svg 标签和作为 img 标签。

将 SVG 作为背景图像

Modernizr 具有 SVG 测试。因此，您可以声明具有 Modernizr 注入到 HTML 元素中的类名的备用方案：

.my-element {
  background-image: url(image.svg);
}
.no-svg .my-element {
  background-image: url(image.png);
}

将 SVG 作为

这是一种新技术，在旧浏览器中无法很好地理解突出显示的术语，并显示 .svg 文件的地方显示 .png 文件：

<svg width="96" height="96">
  <image xlink:href="svg.svg" src="img/svg.png" width="96" height="96" />
</svg>

将 SVG 作为简单的 标签

通过使用 Modernizr，我们将测试浏览器是否支持 SVG，然后再插入代码。如果不支持，则脚本将查找具有相同名称的 .png 文件，并显示该文件而不是 .svg 文件。

<img src="img/image.svg" onerror="this.src=image.png">

<script>
if (!Modernizr.svg) {
  $('img[src$=svg]').each(function(index, item) {
    imagePath = $(item).attr('src');
    $(item).attr('src',imagePath.slice(0,-3)+'png');
  });
}
</script>

然而，为了保持网站的正常运行，需要一致的 URL 和文件名模式，否则脚本将无法定位到正确的资源。

Respond.js

Respond.js 是一个快速且轻量级的 min-width / max-width 的 polyfill，它使媒体查询得以支持，它将样式表重新解释为 Internet Explorer 6 到 8 浏览器可以理解的格式，加载完成后。

我们的所有媒体查询不需要任何额外的更改。我们只需确保我们的 @media 语句编写正确即可。

小贴士

如果您有一些 CSS 文件，请确保在 CSS 文件之后包含 respond.min.js。

如果我们的 CSS 使用 @import 或以内联方式编码，则 Respond.js 无法读取它。相反，请使用典型的 <link> 方法。例如：

<link rel="stylesheet" href="css/style.css" media="screen and (max-width:480px)" />

如何实现

在 DOM 底部（在 </body> 结束标记之前），我们需要包含 Respond.js 库，可以从 github.com/scottjehl/Respond 下载。如果您有 CSS 文件，请确保在 CSS 文件之后包含 respond.min.js：

<script src="img/respond.min.js"></script>

已经完成。

总结

在本章中，我们确保为观众提供了备用方案以确保可访问性。我们学习了如何通过使用 CSS 浏览器选择器和 Modernizr 来检测浏览器特性和支持的功能。这些库通过提供支持来执行渐进增强给我们带来了很大的帮助。此外，我们还学习了有关 HTML5 的有趣的 polyfill，例如 html5shiv、MediaElements，以及 SVG 和 FileAPI 的技术。本章还包括了对 CSS 的有用 polyfill Respond。

在下一章中，我们将看到成千上万个插件，用于创建一个良好的响应式网站，这些插件补充了我们迄今为止阅读过的所有章节。

第十一章：有用的响应式插件

随着技术和趋势的不断发展，每天都会出现新的插件，这些插件对于开发响应式网站变得越来越有帮助。通过诸如www.smashingmagazine.com/、bradfrostweb.com/blog/ 和 www.lukew.com/ff/等博客及时了解它们非常重要。

在本章中，我们将重点介绍不同的插件，涵盖以下主题：

• 网站结构的插件，例如 Columns、Equalize 和 Packery

• 用于菜单导航的插件，例如 Sidr、EasyResponsiveTabstoAccordion、FlexNav 和其他杂项插件

网站结构的插件

在第二章中，我们已经看到了 Fluid Baseline Grid System、1140 Grid 和 Foundation 4 等插件，它们构成了一个开发工具包，将帮助我们快速开发网站。我们需要记住的目标是创建一个连贯的网站，并且避免浪费时间重新创建已经完成的事情。

还有一些其他的额外插件，例如 Columns、Equalize 和 Packery，之前没有提及，为了集中精力构建我们的网站，但它们非常有用。

使用 Columns 创建简单的响应式结构

让我们从 Columns 插件开始，它的目标是提供一种快速创建响应式布局的方式，就像网格系统一样。它的简单性使其轻巧，并且学习曲线非常快。Columns 使用 MIT 许可证，在 IE9 和现代浏览器上运行良好。如果要使用 IE8，将需要为 HTML5 和媒体查询提供 polyfills。

此插件建议用于只需要简单且快速的响应式结构实现的小型网站。这并不意味着它不适用于中型和大型网站，但在这种情况下，其他框架可能提供更多的选项和解决方案，这些网站可能需要。

此外，还有一个选项可以根据屏幕尺寸自动调整字体大小的最小和最大值。

实现这个功能，我们需要从github.com/elclanrs/jquery.columns/访问该网站并下载这个解决方案的文件。

然后，让我们将以下代码插入到我们 DOM 的 <head> 标签中：

<link rel="stylesheet" href="css/jquery.columns.css">

现在，让我们使用这个 HTML 代码作为一个示例来说明插件的使用，但随意尝试在您当前的 HTML 结构上使用这个插件。请注意，类似 row-1 和 col 这样的类以及类似 content-1 和 content-2 这样的 ID 将根据断点定义结构将如何显示：

<section id="slider" class="row-1">
  <div class='col'>
    <img src="img/1344x250" class="responsive" />
  </div>
</section>
<section id="content-1" class="row-2">
  <div class='col'>
    <h2>Maui waui</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class='col'>
    <h2>Super duper</h2>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
</section>
<section id="content-2" class="row-4">
  <div class='col'>
    <h3>Something</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class='col'>
    <h3>Nothing</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div>
  <div class="col">
    <h3>Everything</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div> 
  <div class="col">
    <h3>All of it</h3>
    <p>Lorem ipsum dolor sit amet...</p>
  </div> 
</section>

通过定义类，例如 row-2 或 row-4，我们正在定义该部分内有多少列，并且 ID 将在稍后更改这些列的显示时提供更多的控制。

基本上，对于这个例子，我们将使用两个断点：480（插件的标准）和 1024。在 DOM 底部（在 </body> 结束标签之前），我们需要包含 jQuery 代码和 Columns 脚本。然后，我们将通过调用 quickSetup 函数并配置列和断点来运行插件。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.columns.js"></script>
<script>
$.columns.quickSetup({
  fontSize: [14, 16]
});
$.columns.setCols({
  'content-1': [ [1024, 1] ],
  'content-2': [ [1024, 2] ]
});
</script>

在此示例中，当屏幕尺寸大于 1024 像素时，content-2 部分从每行四列开始。然后，当屏幕尺寸小于 1024 像素时，我们设置每行 2 列，并且当尺寸小于 480 像素时，设置每行 1 列。

让我们看看应用于父元素在桌面和平板电脑屏幕上的插件的可视结果：

此外，该插件允许动态添加列。但是，要反映此更改，需要在添加到 DOM 后的代码中调用 $.columns.refresh()。

使用 Equalize 调整元素尺寸

当将页面自定义为看起来像卡片时，当加载动态内容时可能会出现一个常见问题，即尺寸可能会变化。我们希望保持所有项目的外观相同。

如果我们将列表项元素浮动到左侧，则每个项的内容将影响到断行，并且而不是从左侧开始的第二行将开始缩进。因此，不良布局卡片断裂的问题将如下所示：

或者如果我们定义了所有项目的相同尺寸，我们将失去动态尺寸。类似的情况也发生在元素的宽度上。

Equalize 用于使元素的高度或宽度相等。它是一个轻量级且非常有用的 jQuery 插件，只需要指定父元素的 ID 或类即可执行。基本上，它通过计算更大元素的尺寸并将其定义为其他元素来工作，避免了任何浮动问题。

此外，它接受所有以下 jQuery 尺寸方法来调整元素的大小：height、outerHeight、innerHeight、width、outerWidth 和 innerWidth。最常用的是 height，它是插件的默认设置。

让我们尝试重现之前看到的相同例子，以查看这个插件的运行情况。目标是实现 Equalize 插件，调整所有项为较大元素的相同尺寸，并保持浮动工作的响应性，而没有不必要的断点。

从 github.com/tsvensen/equalize.js/ 下载后，我们将从源代码中添加以下 HTML 代码开始：

<ul id="equalize-height">
  <li>equalize</li>
  <li>equalize content height</li>
  <li>equalize</li>
  <li>equalize</li>
  <li>equalize</li>
  <li>equalize content</li>
  <li>equalize</li>
  <li>equalize</li>
  <li>equalize content height </li>
  <li>equalize</li>
</ul>

然后，在 DOM 底部（在 </body> 结束标签之前），我们需要包含 jQuery 和 Equalize 库。之后，我们将执行用于 equalize-height ID（<li> 元素的父元素）的脚本。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/equalize.min.js"></script>
<script>
$(function() {
  $('#equalize-height').equalize();
});
</script>

查看以下图中的预期情况：

使用 Packery 实现卡片网站布局

Packery 是一个使用算法在基于卡片的网站布局上填充空白间隙，优雅地调整它们的 jQuery 插件。基于卡片的布局趋势随 Google+而来，正在赢得全球粉丝。

注意

Packery 插件有一个针对非商业、个人或开源项目的 GPL v3 许可证。如果你想在公共网站上使用它，需要支付$25。

它的实现并不太困难，正如我们将在它的使用示例中看到的那样。但是为了做到这一点，我们首先需要从github.com/metafizzy/packery下载它。

让我们从创建一个空的 HTML 文件开始。打包的源文件包括了你使用 Packery 所需的一切。所以，在下载后，让我们在<head>标签中包含建议的自定义 CSS，以更好地处理卡片的尺寸：

<style>
img {max-width: 100%; height: auto;}
@media screen and (min-width: 1024px) and (max-width: 1280px) {
  /* DESKTOP - 4 columns */
  #container > div { width: 25%; }
  #container > div.w2 { width: 50%; }
  #container > div.w4 { width: 100%; }
}
@media screen and (min-width: 768px) and (max-width: 1023px) { 
  /* TABLET - 3 columns */
  #container > div { width: 33%; }
  #container > div.w2 { width: 66%; }
  #container > div.w4 { width: 100%; }
}
@media screen and (max-width: 767px) {
  /* SMARTPHONE - 1 column */
  #container > div { width: 100%; }
}
</style>

之后，让我们使用这段HTML代码，其中每个项目代表一张卡片：

<div id="container" class="js-packery">
  <div class="w4"><img src="img/1280x250"></div>
  <div class="w2"><img src="img/640x250"></div>
  <div><img src="img/320x250"></div>
  <div><img src="img/320x250img "></div>
  <div><img src="img/320x250 "></div>
  <div><img src="img/320x250 "></div>
  <div class="w2"><img src="img/640x250 "></div>
  <div><img src="img/320x250 "></div>
  <div><img src="img/320x250 "></div>
</div>

在 DOM 的底部（在</body>结束标签之前），我们需要包含 jQuery 和 Packery 库。此外，我们将初始化 Packery 脚本，告知容器 ID，用于重新定位的子元素的类，以及列（或间距）之间所需的空间。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/packery.pkgd.min.js"></script>
<script>
var $container = $('#container');
$container.packery({
  itemSelector: '#container > div',
  gutter: 0
});
</script>

这是平板电脑和台式机的视觉结果：

菜单导航的插件

在第三章建立响应式导航菜单中，我们已经看到了八种不同的流行菜单技术，每种都用于自己的目的。不幸的是，没有一种"万金油"菜单可以在所有情况下很好地工作。

为了始终与渐进的用户体验紧密相连，我们必须研究如何通过新的 JavaScript/jQuery 插件来改进我们的网站作为一个产品，常常可以找到。

我们将看到三个补充插件，与我们之前见过的插件相比，它们在方法上带来了一些小的差异。它们是 Sidr、EasyResponsiveTabstoAccordion 和 FlexNav。

使用 Sidr 创建侧边菜单

Sidr 是一个用于创建侧边菜单的 jQuery 插件，在响应式网站上非常常见。它还允许多个 Sidr 菜单（在两侧），以及与外部内容一起使用。

让我们尝试通过创建一个标准的 HTML 文件，并添加插件中包含的 CSS 文件来实现以下示例，可以从github.com/artberri/sidr下载。我们会发现两种显示菜单的选项，一种是暗色调（jquery.sidr.dark.css），一种是浅色调（jquery.sidr.light.css）。我们可以使用它们或扩展它们来覆盖一些样式。

所以，在<head>标签中包含其中一个后，我们可能会设置初始样式，以在屏幕大小高于 767 像素时隐藏菜单标题。

<link rel="stylesheet" href="css/jquery.sidr.light.css">
<style>
  #mobile-header {
    display: none;
  }
  @media only screen and (max-width: 767px){
    #mobile-header {
      display: block;
    }
  }
</style>

现在，让我们使用以下 HTML 代码作为示例来说明插件的使用方法：

<div id="mobile-header">
  <a id="responsive-menu-button" href="#sidr-main">Menu</a>
</div>
<div id="navigation">
  <nav>
    <ul class="nav-bar"> 
      <li><a href="#">Menu item1</a></li>
      <li><a href="#">Menu item2</a></li>
      <li><a href="#">Menu item3</a></li>
      <li><a href="#">Menu item4</a></li>
      <li><a href="#">Menu item5</a></li>
      <li><a href="#">Menu item6</a></li>
    </ul>
  </nav>
</div>

在 DOM 底部（在 </body> 结束标签之前），我们需要包含 jQuery 和 Sidr 库。之后，我们将通过将 Sidr 的执行与负责打开侧边菜单的菜单按钮绑定来绑定 Sidr 的执行。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.sidr.js"></script>
<script>
$('#responsive-menu-button').sidr({
  name:   'sidr-main',
  source: '#navigation'
});
</script>

我们定义的 #sidr-main ID 将是侧边栏菜单 <div> 的 ID，而 #navigation 是我们选择在此侧边栏内显示的菜单的 ID。

在下面的截图中，我们将看到此实现的结果。单击菜单链接后，将在小于 767 像素的屏幕上显示浅色主题菜单（此值由我们自定义）：

了解 EasyResponsiveTabstoAccordion

EasyResponsiveTabstoAccordion 是一个轻量级的 jQuery 插件，特别是在小型设备（如平板电脑和智能手机）上显示时，可以优化普通、水平或垂直选项卡为手风琴。

此插件的目标是根据屏幕尺寸调整元素。此外，它通过首先显示第一个选项卡的内容，然后显示其他选项卡的内容，优先显示内容阅读。此插件实现的效果完全使用 jQuery 实现，有助于提供跨浏览器兼容性。

更好地理解其工作方式的方法是实践。从 github.com/samsono/Easy-Responsive-Tabs-to-Accordion/ 下载后，让我们创建一个标准的 HTML 文档，并将 CSS 文件添加到 <head> 标签内：

<link rel="stylesheet" href="css/responsive-tabs.css">

现在，我们将使用以下 HTML 代码作为选项卡内容的样本：

<div id="mytab">          
  <ul class="resp-tabs-list">
    <li>Tab-1</li>
    <li>Tab-2</li>
    <li>Tab-3</li>
  </ul> 
  <div class="resp-tabs-container">                  
    <div>Lorem ipsum dolor sit amet…</div>
    <div>Integer laoreet placerat suscipit…</div>
    <div>Nam porta cursus lectus…</div>
  </div>
</div>

然后，在 DOM 底部（在 </body> 结束标签之前），我们需要包含 jquery 和 easyResponsiveTabs 库。然后，我们将通过提供容器元素的 ID 来执行脚本：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/easyResponsiveTabs.js"></script>
<script>
$(document).ready(function () {
  $('#mytab').easyResponsiveTabs({
    type: 'default', //Types: default, vertical, accordion
    width: 'auto',
    fit: true,
    closed: 'accordion',
    activate: function(event) {
      // Callback function if tab is switched if need
    }
  });
});
</script>

当在智能手机和屏幕尺寸大于 768 像素时，此插件的可视结果如下：

当执行脚本时，会有一些可选参数需要提供，例如：

• type: 'default'：可以设置为 default、vertical、accordion

• width: 'auto'：可以设置为 auto 或任何自定义宽度

• fit: true：它有助于将整个内容适配到容器中

• closed: false：它在启动时关闭面板

• activate: function(){}：这是一个回调函数，用于包含一些在选项卡更改时触发的自定义代码

使用 FlexNav 为您的菜单增加灵活性

FlexNav 是一个 jQuery 插件，可以简化复杂且响应式的导航菜单的创建，而无需编写大量代码。它采用了首先适配移动端的方法，只需轻触目标即可在触摸屏上显示子菜单。

除了以设备无关的方式控制这些嵌套子项之外，该插件还改进了通过键盘 tab 支持导航的可访问性，并为旧浏览器提供了回退。

有关其实现，您将在 github.com/indyplanets/flexnav 中找到可下载的文件。从标准 HTML 文档开始，需要在包含 CSS 文件的 <head> 标签中添加此代码：

<link href="css/flexnav.css" rel="stylesheet" type="text/css" />

现在，我们将在简单的无序列表中包含以下 HTML 代码，添加类和数据属性：

<ul class="flexnav" data-breakpoint="800">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a>
    <ul>
      <li><a href="#">Sub 1 Item 1</a></li>
      <li><a href="#">Sub 1 Item 2</a></li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li><a href="#">Sub 1 Item 1</a></li>
      <li><a href="#">Sub 1 Item 2</a></li>
      <li><a href="#">Sub 1 Item 3</a></li>
    </ul>
  </li>
</ul>
<div class="menu-button">Menu</div>

然后，在 DOM 底部（</body> 结束标记之前），我们将包含 jQuery 和 FlexNav 库。之后，我们将通过通知要转换为响应式的菜单元素的 ID 或类来执行脚本。

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.flexnav.min.js"></script>
<script>
$(".flexnav").flexNav();
</script>

这是在智能手机和平板电脑上查看时该插件可能提供的视觉示例：

当我们执行脚本时，也可以向插件提供一些选项，例如：

• 'animationSpeed':'250': 这设置了接受 fast/slow 的动画速度

• 'transitionOpacity': true: 这指定了默认的不透明度动画

• 'buttonSelector': '.menu-button': 这指定了默认菜单按钮类

• 'hoverIntent': false: 仅用于 hoverIntent 插件

• 'hoverIntentTimeout': 150: 仅用于 hoverIntent 插件

例如：

<script>
$(".flexnav").flexNav({
  'buttonSelector': '.exclusive-button'
});
</script>

杂项

我们将看到的以下插件没有特定的类别。它们是 SVGeezy、Prefix free、Magnific Popup、Riloadr 和 Calendario。

SVGeezy

SVGeezy 是一个 JavaScript 插件，用于处理 IE8 及更早版本以及 Android 2.3 及更早版本等浏览器的 SVG 图像。它的工作非常简单，因为它只会在我们的网站上检测到 SVG 图像，并自动搜索另一种图像（例如 PNG 格式）作为其回退。

回退图像必须具有相同的文件名。更改仅涉及文件格式。此格式可以在初始化脚本时指定。

如果您需要为这些旧浏览器提供支持，我们将看看如何做。首先，让我们访问并从 github.com/benhowdle89/svgeezy 下载解决方案。

然后，创建一个新的标准 HTML 文档，并在 <img> 标签内添加 SVG 图像，如下所示：

<img src="img/mylogo.svg" />

稍后，在 DOM 底部（</body> 结束标记之前），我们将包含 jQuery 和 SVGeezy 库。然后，我们将通过提供两个参数来执行插件：

• 第一个定义了一个类名，如果我们没有 SVG 回退图像或者根本不想为该特定图像提供回退，我们可以使用该类名。

• 第二个意味着如果浏览器不支持显示 SVG 图像，则会提供图像的扩展名。PNG 扩展名是最常见的。

<script src="img/svgeezy.js"></script>
<script>
svgeezy.init('nocheck', 'png');
</script>

注意

我们还可以将 nocheck 改为 false，让插件检查所有图片。

Prefix free

Prefix free 为我们提供了只使用无前缀的 CSS 属性的便利；插件会在必要时为 CSS 代码添加当前浏览器的前缀，从而使前缀代码独立存在。这样，我们就不需要再记住哪些属性需要前缀了，而且可能还可以避免以后重构代码，只是为了去掉或添加新的前缀。

注意

这个插件不一定具有响应性，但是由于它的目标是让现代浏览器更易访问，所以要防止使用旧的前缀，并在需要时不要忘记使用它们。

开始使用它并不难。首先，让我们从 github.com/LeaVerou/prefixfree 下载它。

对于这个例子，让我们重新使用一些你已经有的 HTML，并在 DOM 的 <head> 标签中包含 prefixfree.js：

<script src="img/prefixfree.js"></script>

提示

这个插件建议将其包含在头部，以减少出现的闪烁效果（也称为 FOUC 效果）。

这是之前和之后的比较，我们可以注意到我们节省了多少行代码。

这就是我们通常编写代码的方式：

#element {
  margin: 0;
  -webkit-box-shadow: 1px 2px 3px #999;
  box-shadow: 1px 2px 3px #999;
  border-radius: 10px;

  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  -ms-transition: all 1s;
  transition: all 1s;

  background: -webkit-linear-gradient(to top, orange 50%, #eee 70%);
  background: -moz-linear-gradient(to top, orange 50%, #eee 70%);
  background: -o-linear-gradient(to top, orange 50%, #eee 70%);
  background: -ms-linear-gradient(to top, orange 50%, #eee 70%);
  background: linear-gradient(to top, orange 50%, #eee 70%);
}

这个也显示了，当使用 Prefix free 时，我们如何编写相同跨浏览器的代码：

#element {
  margin: 0;
  box-shadow: 1px 2px 3px #999;
  border-radius: 10px;
  transition: all 1s;
  background: linear-gradient(to top, orange 50%, #eee 70%);
}

我们节省了很多行代码。难以置信，不是吗？在你的文档上试试，看看有哪些好处。

Magnific Popup

Magnific Popup 是一个用于创建可响应的弹出窗口的 jQuery 插件，可以有多种用途，比如：

• 在叠加窗口中显示单个图像/图片库

• 带视频或地图的弹出窗口

• 模态弹出窗口

• 具有 CSS 动画的对话框

它专注于性能，并为任何设备的用户提供最佳体验。关于 Internet Explorer 浏览器，Magnific Popups 与版本 8 及更早期兼容。它通过提供一个轻量且模块化的解决方案来实现这一点，可以从 dimsemenov.com/plugins/magnific-popup/ 下载，并点击 构建工具 链接。

使用 CSS3 过渡而不是 JavaScript 动画显著改善了动画的性能。此外，这个插件有一种可扩展的微模板引擎，可以重用现有的元素，从而在使用相同模式的弹出窗口时加快弹出窗口的加载速度（例如图片库）。

让我们通过实践尝试这个例子。首先，我们将创建一个新的标准 HTML 文档。下载解决方案后，让我们将 CSS 文件添加到 <head> 标签中。这个文件不是它的工作所需，但里面有一些有用的样式，负责良好效果：

<link rel="stylesheet" href="css/magnific-popup.css">

现在，我们将在代码中添加这两个链接，显示一个简单的图片弹出窗口和一个视频弹出窗口。

<p><a class="image-link" href="image-sample.jpg">Open popup</a></p>
<p><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open video</a></p>

然后，在 DOM 的底部（在</body>关闭标签之前），我们需要包含jquery和magnificPopup库。之后，我们将执行脚本两次，并为每个目的通知类（我们先前指定了一个链接）：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.magnific-popup.min.js"></script>
<script>
$(document).ready(function() {
  $('.image-link').magnificPopup({type:'image'});
  $('.popup-youtube').magnificPopup({
    type: 'iframe',
    mainClass: 'mfp-fade'
  });
});
</script>

下面是在智能手机和平板电脑上查看的简单图像弹出实现的可视化：

在插件文档中可以详细了解到许多使用类型，位于dimsemenov.com/plugins/magnific-popup/documentation.html。

Riloadr

Riloadr 是一个响应式图像加载器插件。在本节中，我们将看到它与 jQuery 一起使用的工作方式，尽管这并不是必需的，因为它与框架无关。

该插件是在响应式布局中传送上下文图像的替代解决方案，该布局在不同分辨率下使用不同大小的图像以改善页面加载时间和用户体验。

Riloadr 在图像标记元素中使用data-src和data-base属性，而不是常见的src属性。因此，这样我们就能在浏览器渲染网站之前处理图像元素并选择最佳图像进行显示。

有一些突出的特点使其与其他竞争对手区分开来，例如：

• 对图像加载过程的绝对控制

• 可以使用 CSS 属性（例如，minWidth，maxWidth和minDevicePixelRatio）设置无限断点

• Riloadr 不会为相同的图像发出多个请求

• 您可以创建不同的 Riloadr 对象（命名组），并根据需要对每个对象进行配置

• 带宽测试，只有设备具有足够快的连接才能下载高分辨率图像

从github.com/tubalmartin/riloadr下载后，该插件的建议是将 CSS 和 JavaScript 文件放在<head>标签内：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/riloadr.jquery.min.js"></script>

一旦加载了 Riloadr，我们可以设置其图像组：

<script>
var group1 = new Riloadr({
  breakpoints: [
    {name: '320', maxWidth: 320},
    {name: '640', maxWidth: 320, minDevicePixelRatio: 2},
    {name: '640', minWidth: 321, maxWidth: 640},
    {name: '1024', minWidth: 641}
  ]
});
</script>

注意

minDevicePixelRatio的配置与支持高 DPI 图像的设备有关，并加载用于 640 像素的图像（尺寸是正常尺寸的两倍）。

现在，我们只需在 HTML 代码中添加这个<img>标签，使用data-src和data-base。

注意，在data-base上，我们将使用{breakpoint-name}作为 Riloadr 捕获的动态值，并在先前定义的断点上标识该值。这个名称可以用作按尺寸存储图像的地方，而不会搞乱：

<div>
  <img class="responsive" data-base="images/{breakpoint-name}/" data-src="img/image-name.jpg">
  <noscript>
    <img src="img/image-name.jpg">
  </noscript>
</div>

渲染上述代码时，浏览器将检测屏幕大小并选择正确的断点以适合其尺寸。然后，它将被我们之前定义的变量名称的内容替换，本例中为 320。如果浏览器识别到变量名称的内容是 640，则会发生同样的事情，这更适合。

注意

如果浏览器不支持 JavaScript 或发生了错误，<noscript> 标记将显示我们定义的图像。

以下截图显示了 Riloadr 的效果，仅在浏览器需要时加载具有不同尺寸的图像（取决于分辨率为 320 和 640 像素的断点）：

Calendario

Calendario 是一个 jQuery 响应式插件，旨在提供适合改善用户与日历交互的布局，保持日历结构流动，以便轻松适应不同的屏幕。

在大屏幕上，它显示基于网格的布局，而在较小的屏幕上，它将其转换为垂直的月份天数堆叠，大大简化了其可视化。

注意

这个解决方案目前不适用于所有浏览器，因为其中一些浏览器不支持新的 CSS 属性，比如 calc()。这些浏览器包括 Internet Explorer 8、Opera Mini 和 Android 浏览器。

Calendario 可在 github.com/codrops/Calendario 获得。

让我们首先添加插件中包含的 CSS 文件：

<link rel="stylesheet" type="text/css" href="css/calendar.css" />
<link rel="stylesheet" type="text/css" href="css/custom_1.css" />

现在，我们将包含这个结构化的 HTML，稍后添加类和 ID 以供 JavaScript 处理：

<div class="custom-calendar-wrap custom-calendar-full">
  <div class="custom-header clearfix">
    <h2>Calendario</h2>
    <div class="custom-month-year">
      <span id="custom-month" class="custom-month"></span>
      <span id="custom-year" class="custom-year"></span>
      <nav>
        <span id="custom-prev" class="custom-prev"></span>
        <span id="custom-next" class="custom-next"></span>
      </nav>
    </div>
  </div>
  <div id="calendar" class="fc-calendar-container"></div>
</div>

然后，在 DOM 的底部（在 </body> 结束标记之前），我们将需要包含 jQuery 和 Calendario 库。然后，我们将通过设置容器 ID 来初始化脚本，并创建两个有用的函数，用于通过日历进行月份导航：

<script src="img/jquery-1.9.1.min.js"></script>
<script src="img/jquery.calendario.js"></script>
<script> 
$(function() {
  var cal = $('#calendar').calendario(),
    $month = $('#custom-month').html(cal.getMonthName()),
    $year = $('#custom-year').html(cal.getYear());

  $('#custom-next').on('click', function() {
    cal.gotoNextMonth( updateMonthYear );
  });
  $('#custom-prev').on('click', function() {
    cal.gotoPreviousMonth(updateMonthYear);
  } );

  function updateMonthYear() {        
    $month.html(cal.getMonthName());
    $year.html(cal.getYear());
  }
});
</script>

以下是在智能手机/平板电脑和桌面上查看此日历的屏幕截图：

以及它在桌面上的显示方式：

总结

在本章中，我们学习了三个类别的补充插件，这些插件补充了前几章的内容。对于结构插件，我们学习了如何使用 Columns 来创建简单的响应式结构，使用 Equalize 更好地分配页面上浮动元素的位置，以及使用 Packery 来创建卡片布局网站。我们还学习了使用 Sidr、EasyResponsiveTabstoAccordion 和 FlexNav 来显示菜单和选项卡的不同方法。在 杂项 部分，我们看到了如何使用 SVGeezy、Prefix free、MagnificPopup 插件、Riloadr 和 Calendario。

在最后一章中，我们将看到不同的技术来检测网站加载速度。性能主题非常广泛，但由于有效处理这一指标非常重要，因此在创建响应式网站时，我们将看到一些提高性能的技术。

第十二章：提高网站性能

加载时间是导致用户放弃页面的主要因素。如果页面加载时间超过 3-4 秒，用户会转到其他地方。

对于移动设备上的页面，需要快速加载的需求更加迫切，因为用户觉得页面加载时间比桌面设备上更长，这也是当前大多数网站（根据 KISSmetrics 的文章 加载时间 数据显示为 73%）的情况。

加载时间的一大部分被花在执行客户端处理和加载资源，如样式表、脚本文件和图像上。

在本章中，我们将学习通过以下方式改进响应式网站的性能:

• 使用内容交付网络

• 减少 HTTP 请求

• 缩小有效负荷的大小

• 优化客户端处理

• 使用工具检查网站性能

使用内容交付网络

内容交付网络（CDN）是分布在多个位置的一组网络服务器，从用户的角度来看，可以加快页面加载速度。

用于向特定用户传递内容的服务器通常是基于网络接近性的，并且此内容传递是以最快的响应时间完成的。此外，它会将内容缓存到浏览器中，以便下次不必再次检索，从而节省向服务器发出请求。

使用 CDN 服务提供商是一种具有成本效益的方法，一些已知的服务提供商包括 Akamai Technologies、Mirror Image Internet 和 Limelight Networks。

减少 HTTP 请求

减少页面包含的组件数量，从而减少加载网站所需的 HTTP 请求数量，这不仅与每个文件的 KB 数量有关。还有一个问题是每个 HTTP 连接在将文件返回给浏览器之前，服务器处理每个请求所消耗的短时间。

我们将看到一些减少请求数量的技术:

• 使用条件加载器

• 将多个脚本合并成一个脚本

• 将多个 CSS 文件合并成一个样式表

• 使用 CSS 精灵

使用条件加载器

条件加载器，如 RequireJS 或 yepnope.js，在本书之前我们已经谈到过，它们只会加载所需的代码。

合并和缩小资源（JavaScript 和 CSS）

理想的结果是在生产中整个网站将只有一个 CSS 文件和一个 JavaScript 文件。

解决这个问题的方法是将一堆 JavaScript 文件合并成一个，减少请求并加快页面首次加载速度，尽管在移动设备上可能无法有效缓存。

缩小是消除不必要字符的最佳做法，如额外空格、换行符、缩进和注释。根据我的个人测试，这种改进可以平均减少文件大小 20%。

提示

这个值并不准确，因为它取决于文件的大小、白色空间的数量等。

这种组合可以很好地提高性能，主要是因为它通常在网站显示内容之前执行。

有几个在线工具可以执行这项任务。我个人最喜欢的是 YUI 压缩器，你可以通过访问 refresh-sf.com/yui/ 和 Google Minify（code.google.com/p/minify/）来执行。

使用 YUI 压缩器的步骤非常简单。你只需要选择将要合并和压缩的文件，然后点击压缩按钮即可。

CSS 精灵

正如我们所知，使用 CSS 精灵是图像合并的一种做法，因为它涉及将主题图像合并到一个图像中。通过合并（背景）图像，我们可以减少图像文件的总体大小，从而减少向服务器发出的 HTTP 请求数量。

提示

如果你使用 Photoshop 来创建图像精灵，一旦你创建了这些精灵，请保存 PSD 源文件以便进行进一步的更改。稍后，如果你想要在这个图像精灵中包含新的图标，可以在此图像的空白区域展开并/或右键单击。

以下是 Google 图像精灵的示例：

有两个在线工具我认为最好用来创建精灵图像：Stitches (draeton.github.io/stitches/) 和 SpriteCow (www.spritecow.com/)。

如何使用 SpriteCow 创建精灵

这个工具会生成你需要放在 CSS 文件中的初始 CSS 代码。

首先，你需要创建带有所有按钮和图标的图像（正如我们在前面的图像中看到的）。然后，在 www.spritecow.com/，有一个名为打开图像的按钮，将上传这个精灵。

然后点击选择精灵工具，并用它包围你想要自定义的图标的正方形进行选择。如果你的选择不太接近图标，不要担心，因为有一个自动调整可以改善这个选择。试试吧！

减小负载大小

在去除额外的 HTTP 请求之后，现在是尽可能减少剩余文件大小的时候了。这不仅可以加快页面加载速度，还有助于节省带宽消耗。

减少动态和静态资源的负载大小可以显著减少网络延迟。

我们将看看一些实现这一目标的做法，比如渐进式 JPEG、自适应图像、图像优化，以及更好地使用 HTML5 和 CSS3。

渐进式 JPEG

渐进式 JPEG 并不新鲜。它曾被认为是最佳实践之一。然而，随着互联网速度的提高，这个功能一度变得不明显。但是，现在，在移动设备上带宽有限的情况下，这个做法又浮出水面了。

将普通 JPEG 图像保存为基线和使用渐进选项之间的区别在以下截图中表示：

就尺寸而言，与普通 JPEG 图像相比，中等图像的渐进式尺寸大约增加了 10%。加载时间几乎相同或稍微增加了一些毫秒。

但是，与自适应图像相比，渐进式 JPEG 的预览效果使访问者感觉页面加载更快。

在移动设备上，加载不必要的高分辨率图像是对带宽、处理时间和缓存空间的巨大浪费。为了加快页面呈现速度并减少带宽和内存消耗，应该用较小版本的图像替换图像。

然而，正如我们在第五章中所学到的那样，准备图像和视频，强烈建议使用诸如 Foresight 或 Picturefill 等解决方案，因为它们首先检查请求设备是什么，然后允许浏览器下载任何图像。

图像优化

图像通常包含一定量的无用数据，这些数据在保持质量的同时也可以安全地移除。图像优化有两种方法：无损和有损压缩。

无损压缩可能会删除额外信息，例如嵌入的缩略图、数据中的注释、关于照片的元数据、相机型号、ISO 速度、闪光灯是否打开或关闭、镜头类型和焦距，可能会节省 5 到 20% 的文件大小。

优化图像的过程非常简单，因为它只需要选择哪些图像需要更改。

有很多在线工具可用于实现这一点。就我个人而言，我更喜欢使用离线工具来移除这些信息，因为它在图像的法律权利上提供了更多的安全性。

对于 PNG 图像，我推荐使用 PngGauntlet (pnggauntlet.com)；对于 Mac，使用 Imageoptim (imageoptim.com)。

Imageoptim 也适用于 JPEG，但对于 Windows，我们可以使用 RIOT (luci.criosweb.ro/riot/) 来优化 JPEG 图像，这几乎和 Imageoptim 一样好。然而，如果图像看起来太大，比如高分辨率图片，最好的选择是 JPEGmini 工具 (www.jpegmini.com/)。

使用 HTML5 和 CSS3 简化页面

HTML5 规范包括新的结构元素，如header、nav、article和footer。使用这些语义元素比使用通用的嵌套div和span标签得到更简单和更高效的解析页面。

当使用 CSS3 功能时，几乎会出现与使用图像相同的情况，这些功能可以帮助创建轻量级页面，为视觉元素提供动态艺术支持，例如渐变、圆角边框、阴影、动画和转换。我们知道，在 CSS3 之前，每个提到的效果都需要一个代表该效果的图像，并且需要加载许多图像。考虑以下示例：

测试网站性能

我们将看到两个专注于分析网页并提出改进性能建议的浏览器工具，PageSpeed Insights 和 YSlow，基于一套极其专业且在不断发展的高性能网页规则。

此外，还有两个我推荐使用的在线工具，可以运行简单测试或进行高级测试，包括多步事务、视频捕获、内容阻止等功能——WebPageTest 和 Mobitest。

提示

测试网站性能是维护快速站点的关键；尽管这超出了本书的范围，但如果您想进一步探索这一问题，可以参考Sanjeev Jaiswal的Instant PageSpeed Optimization和Steve Sounders的Even Faster Web Sites，了解更多信息。

PageSpeed Insights

PageSpeed Insights 是由谷歌开发的在线工具，旨在帮助开发人员优化网站性能。它评估页面对多种不同规则的符合性，这些规则涵盖了前端最佳实践。

PageSpeed Insights 提供了描述如何最佳实施规则并将其纳入开发流程的提示和建议。

您可以尝试访问developers.google.com/speed/pagespeed/insights/网站，自行使用此工具。

您可以在以下截图中注意到，每个显示的通知都有一个摘要内容，并且可以展开以获取更多详细信息和进一步的链接：

YSlow

YSlow 是由 Yahoo!开发的浏览器插件，也专注于分析网页并提出改进性能的建议。它的一些特性如下：

• 根据预定义规则集或用户定义的规则集对网页进行评分

• 建议如何提高页面的性能并详细解释原因

• 总结页面的组件，便于更快地搜索关键问题

• 显示页面的整体统计信息

• 提供性能分析工具，包括 Smush.it™（用于图像优化的在线工具）和 JSLint（查找脚本中常见错误的代码检查器）

这个插件的网站可以从developer.yahoo.com/yslow/访问，显示了每个最佳实践规则的默认权重的表格，这样我们就可以在其他问题之前优先处理关键问题(yslow.org/faq/#faq_grading)。

让我们看一下它的界面以及每个规则是如何描述的。通常，在开始修复之前，关于规则的简要解释（如下面的截图所示）就足够了：

WebPagetest

WebPagetest 是一个最初由 AOL 开发的工具，现在由 Google 支持。我们可以通过访问www.webpagetest.org/来使用它，并进行简单测试或执行高级测试，包括多步事务、视频捕获和内容阻止。

丰富的诊断信息包括资源加载的瀑布图、页面速度优化检查，并提供改进建议，这些建议可能在我们输入网站 URL 后实现。然后我们将通知我们想要测试的站点，我们想要测试的语言环境，以及我们想要使用的浏览器。以下是 WebPagetest 的测试结果截图：

Mobitest

Mobitest 是一个很棒的工具，模拟了真实的移动设备加载网站，捕获页面大小、总加载时间和其他与性能相关的统计数据。虽然它是一个很好的检查工具，但它不能替代您从带宽有限的手机连接获得的真实统计数据。

访问mobitest.akamai.com/后，运行性能测试只需一个步骤，即输入网站 URL，选择设备/位置选项并提交。

有时候完成报告需要很长时间，所以这个工具取决于队列中排在我们前面的测试数量。

以下是一个生成的报告示例：

尽管这个站点很轻量，但仍然有可以实施的改进。让我们看看加载活动过程的生成图表，即瀑布图示例：

Mobitest 提供的瀑布图（水平条形图）演示了每个资源逐步请求、服务器处理和返回的过程。

因此，在第二行中，加载在另一个网站托管的静态图像需要很长时间，可以通过添加expires头部和使用 CDN 来改进。

摘要

在本章中，我们学习了一些最佳实践，比如使用 CDN 来改善内容传递和缓存静态图片，通过条件加载、文件合并、CSS 精灵减少 HTTP 请求，通过优化图片来减小载荷大小，将 JPEG 图像保存为渐进式，并且使用 HTML5 和 CSS3 简化页面结构。此外，我们还学习了如何使用 PageSpeed，YSlow，WebpageTest 和 Mobitest 等工具进行性能测试。