HTML5-响应式媒体指南-全-

HTML5 响应式媒体指南（全）

原文：zh.annas-archive.org/md5/5e4ba79c565570d09e9822b78c22b9c1

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

	网页设计即响应式设计。响应式网页设计是正确的网页设计。
	--安迪·克拉克，Stuff and Nonsense

对一百名用户进行一次简单的民意调查，你可能会发现其中很大一部分人在过去某个时候曾从移动设备上浏览过互联网。过去几年中，这些设备用于访问互联网的使用量急剧增加。这突显了设计适用于各种不同设备和平台的网站的需求。

早在 2010 年，由伊森·马科特首次提出这个术语，响应式网页设计是设计此类网站的艺术。响应式网页设计的关键要素是添加图片和视频。在这本书中，我们将探讨你需要在网站上添加响应式媒体时使用的技巧和窍门。我们将看到缺乏共同的 W3C 标准意味着这个领域对不同解决方案开放，为不同的平台提供支持意味着理解它们的限制并为每种类型的设备做出适当的调整。

我们将通过一系列实际示例，包括图片和视频，了解测试的重要性，以确保你的内容在任何设备上都能按预期显示。然后，我们将利用一些现实世界中的技巧和窍门，使用流行的框架，如 WordPress 或 Less CSS——你会发现添加响应式媒体实际上并不复杂！

然而，问题是——你准备好开始了吗？

本书涵盖的内容

第一章, 使用响应式图片, 以响应式媒体为起点开启我们的旅程，我们将探讨如何使用响应式媒体。我们将通过广泛的话题来介绍基础知识，包括视网膜图片、提供回退支持、使用不同的图片格式以及适应移动和桌面平台之间的差异。

第二章, 添加响应式视频内容，从第一章 使用响应式图片 的内容继续，我们将探讨如何将响应式视频添加到我们的网站上。我们将介绍可用的不同格式以及确定使用哪种格式的技巧，如何根据视口空间确定视频的大小，提供回退支持，以及为不同的平台做出适当的调整。

第三章, 混合内容，通过查看混合响应式内容的考虑因素或陷阱，帮助我们将其全部整合在一起，并探讨如何通过使用预加载器来控制内容何时加载和渲染在屏幕上，从而减少延迟。我们将通过一个示例来混合同一页面上的响应式图像和视频，以便我们可以看到它在实际中的工作方式，并考虑可能需要为不同平台做出的让步。

第四章, 测试响应式媒体，深入探讨了测试我们的创作以确保它们正常工作的世界。我们将看到不需要复杂的工具，因为我们的大部分工作可以在浏览器中完成；我们还将介绍一些解决性能缓慢问题的技巧，以及我们如何快速轻松地做出更改以帮助提高速度。

第五章, 使用框架，通过查看在流行框架中使用响应式媒体的三个真实世界示例来结束本书。我们的示例包括查看 WordPress、Less CSS 和 Bootstrap 的一些技巧和窍门（以及插件），我们将探讨在 WordPress 中使用、向启用 Bootstrap 的网页添加响应式媒体以及如何使用 Less CSS 更好地管理我们的 CSS 样式。

你需要这本书的内容

为了完成这本书中的大多数示例，你只需要一个简单的文本或代码编辑器以及一个浏览器（最好是安装了 Firebug 的 Firefox）。我推荐安装 Sublime Text——版本 2 或 3——尽管如果你有自己的特别偏好，那也可以。

一些示例使用了额外的软件，如 WordPress 或 Crunch，每个软件的详细信息都包含在相应的章节中，以及从源下载应用程序的链接。

这本书面向的对象

这本书是为那些希望提高制作响应式媒体内容技能的前端开发者而写的，作为构建响应式网站的一部分。为了最大限度地利用这本书，你应该对 HTML、CSS、JavaScript 有良好的实际知识，并且最好能够舒适地使用 jQuery。

书末的一些示例使用了流行的工具，如 WordPress、Less CSS 和 Bootstrap。虽然假设你对每个工具都有一些先前的了解，但技巧和窍门并不复杂，相对容易掌握。

惯例

在这本书中，你会发现许多不同风格的文本，用于区分不同类型的信息。以下是一些这些风格的示例及其含义的解释。

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 昵称如下所示："为 HD/Retina 图像提供支持并使用<picture>标签。"

代码块设置为如下：

img { max-width: 100%; height: auto; float: left; padding: 10px; }
#description { box-sizing: border-box; }
#peytoe { ... padding: 0px 10px 10px; width: 66%; }

当我们希望将您的注意力引向代码块中的某个特定部分时，相关的行或项目将以粗体显示：

  <title>Demo - Setting a viewport using CSS</title>
 <meta name="viewport" content="width=360">
  <link href="css/viewport-css.css" rel="stylesheet">

任何命令行输入或输出都如下所示：

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

新术语和重要词汇以粗体显示。您在屏幕上看到的单词，例如在菜单或对话框中，在文本中显示如下：“点击齿轮，然后选择共享和嵌入地图。”

注意

警告或重要提示以如下框中显示。

技巧

技巧和窍门如下所示。

读者反馈

我们始终欢迎读者的反馈。告诉我们您对本书的看法——您喜欢或不喜欢什么。读者反馈对我们很重要，因为它帮助我们开发出您真正能从中获得最大价值的标题。

如要向我们发送一般反馈，请简单地发送电子邮件至 <feedback@packtpub.com>，并在邮件主题中提及本书的标题。

如果您在某个主题上具有专业知识，并且您对撰写或为书籍做出贡献感兴趣，请参阅我们的作者指南www.packtpub.com/authors。

客户支持

现在您是 Packt 图书的骄傲拥有者，我们有一些事情可以帮助您从您的购买中获得最大价值。

下载示例代码

您可以从www.packtpub.com上下载示例代码文件，这是您购买的所有 Packt Publishing 书籍的账户。如果您在其他地方购买了本书，您可以访问www.packtpub.com/support并注册，以便将文件直接通过电子邮件发送给您。

下载本书的颜色图像

我们还为您提供了一个包含本书中使用的截图/图表颜色图像的 PDF 文件。这些颜色图像将帮助您更好地理解输出中的变化。您可以从以下链接下载此文件：www.packtpub.com/sites/default/files/downloads/6968OT_ColorImages.pdf。

勘误

尽管我们已经尽最大努力确保内容的准确性，但错误仍然可能发生。如果您在我们的书中发现错误——可能是文本或代码中的错误——如果您能向我们报告这一点，我们将不胜感激。通过这样做，您可以避免其他读者的挫败感，并帮助我们改进本书的后续版本。如果您发现任何勘误，请通过访问www.packtpub.com/submit-errata，选择您的书籍，点击勘误提交表单链接，并输入您的勘误详情来报告。一旦您的勘误得到验证，您的提交将被接受，勘误将被上传到我们的网站或添加到该标题的勘误部分下的现有勘误列表中。

要查看之前提交的勘误表，请访问www.packtpub.com/books/content/support，并在搜索字段中输入书籍名称。所需信息将显示在勘误部分。

盗版

在互联网上，版权材料的盗版是一个跨所有媒体的持续问题。在 Packt，我们非常重视我们版权和许可证的保护。如果您在互联网上发现我们作品的任何非法副本，请立即提供位置地址或网站名称，以便我们可以追究补救措施。

请通过 <copyright@packtpub.com> 联系我们，并提供涉嫌盗版材料的链接。

我们感谢您在保护我们作者和我们提供有价值内容的能力方面的帮助。

问题

如果您对本书的任何方面有问题，请通过 <questions@packtpub.com> 联系我们，我们将尽力解决问题。

第一章. 与响应式图像一起工作

“一张图片胜过千言万语……”

这些词用于 1913 年俄亥俄州皮夸的皮夸汽车供应公司的广告中，至今仍具有现实意义。唯一的区别是技术的出现——随着手机、平板电脑和便携式设备的日益普及，需要在较小的设备上显示内容。虽然文本可能很容易显示，但图像则不然，但它们仍然同样重要。在本章中，我们将探讨一些你需要学习的技巧和窍门，以便在多种不同的设备上以正确的大小和质量显示图像。

创建响应式图像可以像所需的那样简单或复杂。在本章中，我们将涵盖一系列主题，包括：

• 与流体图像、图标和精灵一起工作

• 适应供应商前缀、图像格式和不同平台

• 适应高清/视网膜图像并使用<picture>标签

• 确定可用的视口以供使用

• 使用 CSS、JavaScript 或数据标签解决媒体查询

• 构建响应式轮播图和创建响应式地图

好奇吗？让我们开始吧！

开始

在本章中，我们将使用项目区域进行操作。在我们开始之前，强烈建议你创建一个项目文件夹。为了本章的目的，我将假设它叫做code；在其内部，你需要创建四个文件夹：css、js、font和img，如截图所示：

我们将在本章中引用创建的文件夹。

从流体图像开始

你有多少次创建了网页，却发现观众抱怨它们在移动设备上看起来很差？我敢打赌，这可能是图像内容的一个可能原因。图像被设置为固定大小，所以在较小的浏览器中无法很好地调整大小，对吧？

在本教程中，我们将探讨从固定图像转向在浏览器窗口调整大小或移动设备上查看内容时自动调整大小的图像所需的基本知识。

为了这个练习，我创建了一个关于加拿大派尤托湖的示例页面——如果你有幸能去参观，那将是加拿大真正令人惊叹的一部分！在本教程中，我们将进行一些更改，以帮助使图像在浏览器窗口调整大小时更好地响应。以下步骤将指导你完成练习：

1. 让我们先打开代码下载的副本，并提取simplefluid1.html和simplefluid1.css。这是一个关于加拿大派尤托湖的简单网页。

2. 尝试调整浏览器窗口的大小。注意它并没有调整任何内容？让我们通过对我们代码进行两个小的更改来解决这个问题。

3. 修改simplefluid1.css中的两行，如以下代码所示：

   img { max-width: 100%; height: auto; float: left; padding: 10px; }
   #description { box-sizing: border-box; }
   #peytoe { ... padding: 0px 10px 10px; width: 66%; }
   

   我们刚刚进行的三个更改就是使内容响应式并适应调整大小窗口所需的所有内容。我们使用了max-width来控制图像的大小，而使用height: auto有助于保持图像的宽高比，防止其看起来扭曲。

   有些人可能会认为这就足够了，对吧？嗯，并不完全是这样；尝试将内容调整到更小的尺寸，我们可以看到图像开始溢出边界。

   要使图像真正适应，我们需要将尺寸转换为它们的百分比等效值；为此，我们可以使用公式 目标 ÷ 上下文 = 结果。让我们将其付诸实践。考虑 443px（图像宽度） / 800px（原始框大小） * 100 = 55.375%。

4. 使用这个公式，继续修改 img 规则如下：

   img { width: 55.375%; height: 37.125%; float: left; padding: 10px; }
   

如果在调整图像大小时一切顺利，内容将进行调整，但仍然保持在 #peytoe div 的范围内，如本截图所示：

应该注意的是，这种方法可能并不适用于所有网站。例如，在将其缩小到更小尺寸之前，可能更倾向于先使用背景位置对其进行裁剪。这取决于你的设计以及所使用的图像类型和数量；这是在设计过程中需要考虑的事情。

现在我们已经看到了使图像响应式的基础知识，让我们继续前进，看看我们如何通过在支持的设备上使用更高质量的图像来改进这一点。但在我们这样做之前，值得介绍一些关于响应式设计的要点，特别是与使用供应商前缀和图像格式相关的内容。

供应商前缀和图像格式

我们将从一个问题开始本节。如果你认为创建响应式内容需要特殊的图像格式或大量的供应商前缀，请举手。如果你认为答案是肯定的，那么再想想——两到三年前，你可能不得不使用以下代码行作为示例媒体查询：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (-o-device-pixel-ratio: 3/2), 
only screen and (min-device-pixel-ratio: 1.5) {
    /* High-res version of image assets go here */
}

现在，你只需要考虑大多数现代浏览器（即在过去 12 到 18 个月内发布的版本）的是这个——没有看到任何供应商前缀：

(min-resolution: 192dpi) { 
    /* CSS styles here */
}

对于图像来说，也有一个类似的原则适用——不需要专门用于媒体查询的特殊格式，也不需要使用许多不同的格式来满足不同设备的需求。我们只需要选择一个格式——任何格式都可以。这里的例外是，虽然使用 PNG 或 JPG 图像会产生结果，但你可能会发现，在某些情况下，由于这些格式不适合放大，质量开始下降。

相反，在响应式设计中使用 SVG 格式会更好。这实际上是 XML，可以使用 Inkscape 或 Illustrator 等工具进行编辑；甚至可以在文本编辑器中编辑！不过，使用 SVG 的关键是它能够完美缩放；无论浏览器窗口的大小如何，图像质量都不会受到影响。它是标志、图案、图标等理想的格式，但不适用于照片，因为有损格式在缩放时表现不佳。

适应不同平台

到目前为止，你可能希望问自己，“关于移动设备怎么办？”毕竟，这是一个很好的问题：响应式设计的全部目的就是为了适应移动设备！我们将在本章中遇到的大部分技巧和窍门都适用于移动平台，尽管也有一些值得注意的有用指南：

• 缩小图片。使用任何在线服务，如 TinyPNG 或 XnConvert；它们需要尽可能小，同时不要牺牲太多质量。

• 在处理视网膜图片时要小心。这些图片在不同移动设备上的内存使用量可能会有很大差异，因此请确保适当地设置你的媒体查询。

• 如果你使用 jQuery 提供回退支持，那么考虑使用条件加载，仅在需要时调用 jQuery，而不是默认调用。

• 确保已创建同一图片的不同尺寸版本。如果小尺寸图片足够，就没有必要强迫移动用户下载大文件！要获取帮助，请在网上寻找类似 Andi Smith 的响应式图片工具www.andismith.com/grunt-responsive-images/，它可以帮助自动化此过程。

• 在线应用程序中测试，例如在coolestguidesontheplanet.com/responsive/可用的响应式工具，因为没有替代品可以测试！现在彻底测试并修复错误，比以后上线时遭受尴尬要好得多。

• 以移动优先的方式进行工作。移动设备需要设置为首先下载最小的图片；如果网站内已创建媒体查询，浏览器将自动处理替换为较大图片。

• 考虑使用类似网络 API(code.tutsplus.com/tutorials/html5-network-information-api--cms-21598)或 Modernizr(www.modernizr.com)的东西来确定访问者是否在使用移动平台；如果需要，我们可以将这些链接到基于 jQuery/JavaScript 的媒体查询，以确定应该提供哪张图片。

• 不要使用display: none来隐藏图片，使用媒体查询来提供。使用前者方法即使图片被隐藏，仍然会下载它们。

  小贴士

  记住 RevUnit 的 Seth Waite 说的这句话：“1/4 的人会放弃加载时间超过四秒的网页。”在移动设备上，这一点变得更加关键；加载大图像会直接导致加载时间过长！你可以在他的原始文章中看到更多sethwaite.com/2012/08/how-slow-website-speed-destroys-your-conversion-rates/。

现在理论部分已经讲完，让我们开始编码！我们将从响应式媒体工作的关键元素之一开始——适应高分辨率（hi-res）或基于视网膜的图像。

适应高清或视网膜图像

你有多少次使用移动设备，比如 iPad，却发现图像质量很差？随着在 iPad 等设备上视网膜显示屏的出现，确保你的图像在高分辨率屏幕上有足够的质量变得越来越重要。

视网膜显示屏是苹果公司创造的专有营销术语，而不是科学术语。对一些人来说，它可能唤起复杂科学过程的画面；实际上，它只是双倍分辨率，其中像素被非常紧密地排列，以提供更高的质量和分辨率。例如，像素计数可以从第三代 MacBook Pro 的 220 每英寸像素（PPI）到 iPhone 6 Plus 的 401 PPI 不等！

将视网膜支持添加到我们的代码中很容易。我们有几种选择：

• 我们可以使用background-size: cover将图像设置为背景图像，以确保它覆盖整个显示。然后可以使用 CSS 媒体查询用更高分辨率的图像替换它们。

• 我们可以将图像调整为大视网膜图像，然后使用 CSS 在屏幕上调整它们的大小；这会导致文件更大，但不一定是两倍大，因为 JPEG 压缩的方式。尽管如此，我们可能需要使用-ms-interpolation-mode: bicubic来确保在某些浏览器中压缩级别尽可能高效！

我们总是可以将我们的代码设置为显示高分辨率图像；然而，显示这些图像的成本在于更大的文件大小；在低分辨率（low-res）设备上，质量将会丢失。

相反，我们可以使用插件，如 Retina JS，告诉浏览器仅在需要时提供高分辨率图像。让我们看看它是如何实际使用的：

1. 首先，将以下代码添加到一个新文件中，将其保存为retina.html：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <script src="img/retina.min.js"></script> 
   </head>
   <body>
     <img src="img/mothorchid.png" data-at2x="img/mothorchid@2x.png" width="584px" height="389px">
   </body>
   </html>
   

2. 接下来，我们需要下载 RetinaJS 库——这个库可以在github.com/imulus/retinajs/releases/download/1.3.0/retina-1.3.0.zip（在撰写本书时，最新版本是 1.3.0）找到。提取retina.min.js并将其放入项目文件夹中的js子文件夹中。

3. 我们还需要两个图像：一个需要比另一个具有更高的分辨率；在这个例子中，我将使用代码下载中可用的两个 PNG 文件：mothorchid.png和mothorchid@2x.png。请注意，第二个文件必须在文件名末尾有@2x；这是使 Retina JS 工作的关键。

为了预览结果，建议使用 Google Chrome。我们可以轻松地模拟更改设备像素比设置；将其从1更改为2并刷新屏幕，以查看从低分辨率图像到高分辨率图像的变化。我们将在本章的确定媒体查询部分介绍如何创建支持高分辨率图像的媒体查询。

注意

在线有很多插件示例可以提供视网膜支持——两个示例是：responsImg，您可以从etiennetalbot.github.io/responsImg/下载。或者，您可以使用 Grunt 通过 Andi Smith 的 Grunt 响应式图像插件来完成这项繁重的工作，请参阅mattstow.com/experiment/responsive-images/responsive-images.html。

使用精灵显示响应式图像

到目前为止，我们的示例都有一个共同点：它们与单个图像一起工作。这对于那些最多只出现一次或两次的情况来说是可以的，但如果你在整个网站上频繁地使用它们呢？每次都调用它们似乎是没有意义的。幸运的是，我们可以通过使用图像精灵来解决这个问题。

注意

关于图像精灵如何工作的讨论，请参阅 Chris Coyier 在css-tricks.com/css-sprites/发表的有用文章。

对于初学者来说，图像精灵是将许多（理想情况下，较小的）图像组合成一个大图像，然后使用 CSS 样式规则显示该图像的相关部分的方法。我们通常可能会使用background-position来定位图像；使用像素值，这可以完美工作。我们可以使用相同的原理来处理响应式精灵，但有一个关键的区别：我们使用百分比值而不是像素！让我们以一些电池图标为例来看看如何实现：

1. 首先，从本书附带的代码下载中提取imagesprites.html的副本。它包含一些简单的标记，其中包含对我们将用于演示的电池图标的<img>引用。

   注意

   到目前为止，你可能已经注意到一串随机的字符——这些是数据 URI；它们是使用响应式精灵图像创建服务在responsive-css.spritegen.com/生成的。目前，只需知道这些是将图像转换为减少从服务器不断请求图像所需格式的图像即可。

2. 在一个单独的文件中，添加以下代码，并将其保存为项目文件夹中的css子文件夹下的imagesprites.css：

   #demo img { display: block; margin: 1em auto; }
   
   .battery { background-position: 0 0%; background-size: 100%; }
   .battery-charge { background-position: 0 25%; background-size: 100%; }
   .battery-full { background-position: 0 50%; background-size: 100%; }
   .battery-half { background-position: 0 75%; background-size: 100%; }
   .battery-plug { background-position: 0 100%; background-size: 100%; }
   
   .battery, .battery-charge, .battery-full, .battery-half, .battery-plug
   { max-width: 100%; background-size: 100%; background-image: url('../img/index.png'); }
   

3. 从代码下载中，从 img 文件夹中提取 index.png 的副本。这是我们之前在这个练习中使用的 CSS Sprites 服务预先制作好的精灵图像。将其保存在项目文件夹的 img 子文件夹中。所使用的电池图标来自 www.fatcow.com/free-icons。如果您有其他更愿意使用的图标，请相应地修改代码。

4. 如果我们预览结果，我们应该期望看到我们的响应式精灵图像出现。如果我们调整屏幕大小，它将自动更新图像的位置，如本截图所示：

然而，当我们使用这种方法时，有一些缺点我们需要注意：

• 如果我们尝试解码代码中给出的 base64 URI，它似乎没有生成有效的图像——这是怎么回事？

• 在 HTML 中使用长 URI 使得其难以阅读

• 这使得如果可能的话，很难甚至不可能将此代码用于 @media 查询或使用基于视网膜的图像

要了解这种方法的尴尬之处以及从 HTML 标记中移除使用 data URI 所需的代码更改，请查看随本书附带的代码下载中的 imagesprites2.html 和 imagesprites2.css。注意 CSS 如何发生了显著变化。

让我们改变方向——响应式设计的一个关键概念是确定在显示内容时我们可以使用的可用视口。让我们看看这意味着什么，当我们与图像一起工作时。

确定可用的视口以供使用

视口？您肯定是指屏幕空间或分辨率？在这种情况下，不是的。在设计响应式布局时，我们必须考虑到各种形状和大小的屏幕；仅仅针对特定的屏幕分辨率设计是不够的。相反，我们必须考虑到浏览器窗口（或视口）中的可用空间可能更小；我们必须设计我们的断点以适应这个可用空间。

要查看在多种设备上的可用视口，一个好的参考点是 viewportsizes.com/，然后导航到 viewportsizes.com/mine/。这将显示当前可用的空间。有两种方式可以设置可用的视口以供使用：一种是通过 CSS/HTML 标记，另一种是通过 jQuery 或 JavaScript。我们将首先查看使用 CSS 方法。

使用 CSS 设置我们的视口

这可能是添加到任何响应式设计中最简单的设置之一，但它有可能引发一系列问题！使用 CSS 设置视口是一行代码；困难之处在于确定设置视口后正确定位元素的 CSS 样式。

小贴士

对于这个演示，建议您使用 Google Chrome。它有一个内置的设备模拟功能，这使得在不同视口中测试我们的结果变得容易。我将假设在这个演示中您已经安装了它。

我们将首先设置标记，这样我们至少可以看到当在 CSS 中没有设置视口时会发生什么：

1. 我们将像往常一样，首先准备我们的标记。从代码下载中提取文件：viewport-css.html、viewport-css.css和pixel-grid.png；分别将它们保存到css子文件夹和img子文件夹中。

2. 我们使用了 PT Sans 字体进行装饰。这个字体可以从www.fontsquirrel.com/fonts/PT-Sans获取；您需要下载它并将字体提取到项目区域内的fonts子文件夹中。

3. 打开 Google Chrome，并在开发者工具栏中将模拟功能设置为模拟索尼 Xperia S、Ion 设备。

在这一点上，值得在浏览器中预览结果；如果一切顺利，我们应该看到类似于以下截图的结果：

留意的人会发现显然有问题。我们的屏幕没有正确调整大小，文本被切掉了窗口的右边缘。现在让我们使用以下步骤来修复它：

1. 在viewport-css.html中，按照指示添加以下行：

     <title>Demo - Setting a viewport using CSS</title>
    <meta name="viewport" content="width=360">
     <link href="css/viewport-css.css" rel="stylesheet">
   

2. 重新保存文件，然后在 Chrome 中刷新屏幕。如果一切顺利，我们现在可以看到我们的更改结果，文本大小正确，没有重叠：

在这个例子中，我们使用了<meta name="viewport" content="width=360">，这设置了一个非常具体的宽度为 360 像素。对于没有使用特定宽度的更通用设置<meta name="viewport" content="width=device-width, initial-scale=1">可以设置代替。

当使用媒体查询时，我们总可以为查询内的元素设置大小。设置视口大小也很值得，这样在调整浏览器窗口大小时，项目就不会从页面上消失。

注意

对于使用视口meta标签的深入讨论，值得查看 Paul Underwood 的一篇文章，该文章可在www.paulund.co.uk/understanding-the-viewport-meta-tag找到。

使用 JavaScript 获取视口

使用 CSS <meta viewport>标签的替代方法是使用 JavaScript（或者我们也可以同样使用 jQuery）。在这种情况下，我们可以计算出这些值，并以此为基础进行设计，而不是像上一个例子中那样简单地设置特定的大小。

让我们深入探讨，看看我们如何获取这些大小：

1. 我们将首先将以下标记添加到一个新文件中，将其保存为项目文件夹根目录下的viewport-js.html：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8" />
     <title>Demo - What's my Viewport Size?</title>
     <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
     <link rel="stylesheet" href="css/viewport-js.css">
   </head>
   <body>
     <div id="c">
     <p>Your viewport size:</p>
     <p id="ua"></p>
     </div>
     <div id="vp"><span id="w"></span><span id="h"></span></div>
     <script src="img/viewport-js.js"></script>
   </body>
   </html>
   

2. 接下来，将以下 JavaScript 添加到一个新文件中，并将其保存为项目文件夹中js子文件夹下的viewport-js.js：

   (function() {
     if (typeof(document.documentElement.clientWidth) != 'undefined') {
       var $w = document.getElementById('w'),
             $h = document.getElementById('h'),
          $ua = document.getElementById('ua');
     $w.innerHTML = document.documentElement.clientWidth;
     $h.innerHTML = ' × ' + document.documentElement.clientHeight;
     window.onresize = function(event) {
       $w.innerHTML = document.documentElement.clientWidth;
       $h.innerHTML = ' × ' + document.documentElement.clientHeight;
     };
       $ua.innerHTML = navigator.userAgent;
     }
   })();
   

3. 我们需要一些基本的样式，所以请继续在viewport-js.css文件中添加以下内容，并将其保存到我们项目文件夹中的css子文件夹：

   html, body { border: 0; margin: 0; padding: 0; font-family: 'Helvetica',courier new; font-weight: bold; }
   #vp { background: #e00; color: #fff; font-size: 3.125em; line-height: normal; padding: 3px; text-align: center; }
   #h { color: #ff8080; }
   #c { font-size: 1.25em; line-height: 1.5em; padding: 0 1em; }
   

   小贴士

   下载示例代码

   您可以从您在www.packtpub.com的账户中下载您购买的所有 Packt 书籍的示例代码文件。如果您在其他地方购买了这本书，您可以访问www.packtpub.com/support并注册以直接将文件通过电子邮件发送给您。

4. 如果我们在浏览器中预览结果，我们会看到当前浏览器使用的用户代理字符串以及可用的视口区域大小，如图所示：

在线有很多很好的例子可以展示我们如何确定可用的视口区域；我们使用了 Matt Stow 在viewportsizes.com/制作的修改版。在其中，他还列出了各种设备的视口尺寸的详细列表。我们当然可以使用类似 Modernizr 的工具来执行相同的功能，但这是以依赖外部解决方案为代价的；我们这里的示例是用纯 JavaScript 编写的，消除了任何依赖，并使代码简洁。

解决媒体查询

现在我们已经确定了我们可以使用的空间大小，我们现在可以确定当达到可用空间的极限时元素会发生什么。如果我们想显示 hi-res 图片，这尤其相关。毕竟，我们不想展示高质量图片，如果它会耗尽我们设备的可用带宽！

让我们看看如何使用媒体查询在单个图片的 lo-res 和 hi-res 版本之间切换：

1. 我们将从设置我们演示所需的结构开始。从本书的代码包中提取min-resolution.html的副本，并将其保存到项目文件夹的根目录。

2. 在一个新文件中添加以下样式规则，并将其保存为项目文件夹中css子文件夹下的min-resolution.css。这里发生魔法，即从 lo-res 版本切换到我们的图片的 hi-res 版本：

   #orchid { background-image: url('../img/mothorchid.png'); height: 24.31rem; width: 36.5rem; } 
   
   @media (min-resolution: 120dpi) { 
     #orchid { background-image: url('../img/mothorchid@2x.png'); 
       height: 24.31rem; width: 36.5rem; } 
   }
   

3. 从本书附带的代码下载中提取并保存mothorchid.png和mothorchid@2x.png的副本到我们项目文件夹的img子文件夹。

4. 如果我们预览我们的工作结果，我们首先会看到标准分辨率的图片mothorchid.png。

5. 然而，如果我们通过至少放大 133%来调整图片大小，我们会看到它切换到其 hi-res 等价版本。

6. 点击–按钮将重置回 100%，我们会看到图片恢复到标准分辨率版本。

小贴士

使用 Google Chrome？

我们可以使用 Chrome 的开发者工具栏实现相同的效果。按 Ctrl + Shift + I 显示它，然后点击抽屉图标。现在，切换到 屏幕 选项卡，将设备像素比设置从 1 更改为 2 以显示高分辨率图像。更多详情请访问 developer.chrome.com/devtools/docs/device-mode。

到目前为止，我们可以使用这个技巧来显示我们需要的任何高分辨率图像；关键是确保我们有两个图像，一个是标准分辨率，另一个是更高品质的。不过，有一个小提醒——如果你花时间研究不同类型的媒体查询，你可能会遇到类似以下代码的内容：

@media (-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

虽然仍然可以使用，但最初的 –webkit-min-device-pixel-ratio 设置已被弃用，取而代之的是 min-resolution；除非你需要为非常旧的浏览器提供支持，否则不需要使用它！

现在，我们可以在所有项目中轻松使用 CSS 查询，但仍然可能存在标准查询无法工作的情况。一个很好的例子是导航在不同尺寸下表现不同。幸运的是，我们有一个解决方案——我们可以使用 breakpoints.js 库来实现类似的效果。现在让我们深入探讨并查看一下。

使用纯 JavaScript 确定页面断点

到目前为止，我们主要与现代浏览器合作。它们有效地处理媒体查询，允许我们在正确的时间显示正确的图像。如果我们不得不支持老版本的 IE 浏览器，例如，没有某种形式的帮助就无法处理媒体查询，怎么办？没问题——进入 breakpoints.js，这是许多 JavaScript/jQuery 库之一，可以帮助我们模拟媒体查询。我感觉有一个练习即将到来，所以让我们开始构建一个示例来看看它是如何工作的：

1. 我们将开始设置演示的标记。这包含了一些简单的文本框，设置为在组中显示。为此，我们需要从本书附带的代码下载中提取 breakpoints.html 和 breakpoints.css 的副本。将它们都保存到项目文件夹中：HTML 文件在根目录下，CSS 文件在 css 子文件夹中。

2. 我们需要一个 jQuery 2.x 的副本——从之前演示的项目文件夹中应该已经有了；如果没有，可以从本书附带的代码下载中提取一个副本，或者从 code.jquery.com 提取。

   注意

   虽然 breakpoints.js 已经有几年历史了，但我已经用 jQuery 2.1.1 测试过，没有发现任何明显的问题。

3. 接下来是至关重要的 breakpoints.js 库。请从本书附带的代码下载中提取一个副本，并将其保存到项目文件夹的 js 子文件夹中。新版本将在 xoxco.com/projects/code/breakpoints/ 上提供。

4. 我们需要添加初始化断点的调用，所以请继续在空 <script> 标签之间添加以下代码：

     $(function () {
       $.breakpoints({
         '.article': {
           'small': [0, 320],
           'medium': [320, 480],
           'large': [480, null]
         }
       });
     });
   

5. 保存你的工作。如果一切顺利，我们应该在浏览器会话中预览到这三个框：

在这一点上，尝试调整浏览器窗口的大小。注意每个文本框是如何调整大小的。我们正在使用 Placehold.it 服务的图像占位符placehold.it/；这些占位符会自动以相同的方式调整大小。

注意

本书代码下载中有一个此练习的工作示例——提取 breakpoints-finished.html 和 breakpoints-finished.css，以及 jQuery 和 breakpoints.js，然后将 HTML 和 CSS 文件重命名为 breakpoints.html 和 breakpoints.css 以查看演示。您需要将它们存储在项目文件夹的适当子文件夹中，以便它们能够正确工作。

但是等等！仔细查看 CSS，你会发现没有媒体查询。这就是 breakpoints.js 的美妙之处；它允许我们为那些原生不支持媒体查询的浏览器复制媒体查询。当然，这会带来一点额外的开销；我们可以使用条件注释（或 Modernizr）来解决这个问题，这样开销只会在需要时出现。

小贴士

网上还有其他示例可供选择。请查看www.responsivejs.com或通过 GitHub 搜索以找到替代方案。

让我们继续前进，看看切换图像的不同方法；到目前为止，我们已经使用了媒体查询来处理应该显示哪个图像。然而，我们并不局限于使用它们。我们可以使用源代码混洗的替代方法。

源代码混洗同时使用了 jQuery 和 CSS —— 如果禁用了 JavaScript，那么 CSS 媒体查询将启动并执行类似的功能。让我们通过一个示例来了解它是如何工作的，以及为什么这可能会为我们提供两种解决方案的最佳结合。

使用数据标签允许带宽限制

这个练习的标题听起来很复杂，但它旨在强调一个有趣的实验：“如果我们能够使用数据标签来切换图像呢？”

源代码混洗的直接好处是它将 CSS 媒体查询从 HTML 标记中分离出来（要了解我的意思，请查看下一节中 使用 标签 所使用的 HTML 代码。）

这是一个有趣的概念，你可能希望考虑使用；为了了解它是如何工作的，我们将使用 UX 设计师 Jordan Moore 创建的一个示例的修改版。这个示例使用了 Jeremy Keith 的基于 JavaScript 的条件 CSS 库，效果显著。为了说明我的意思，让我们开始一个演示来看看它是如何工作的：

1. 我们的演示之旅从设置所需的标记开始。在一个新文件中，添加以下内容并将其保存为项目区域的根目录下的 datatags.html：

   <!DOCTYPE html>
   <html>
     <head>
       <title>Responsive Images using data- tags - Demo</title>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1">
     <link rel="stylesheet" href="css/datatags.css">
     <script src="img/jquery.min.js"></script>
     <script src="img/onmediaquery.min.js"></script>
     <script src="img/datatags.js"></script>
     </head>
     <body>
       <img class="thumbnail" src="img/small.jpg" data-medium="img/ medium.jpg" data-large="img/large.jpg" alt="Responsive images example">
     </body>
   </html>
   

2. 我们现在需要一些配套的文件。从代码包中提取 small.jpg、medium.jpg 和 large.jpg 并将它们保存到项目文件夹的 img 子文件夹中。

3. 接下来是三个我们需要用到的 JavaScript 文件：jquery.min.js、onmediaquery.min.js和datatags.js应从代码下载中提取，并保存到我们的项目区域的js子文件夹中。

4. 最后，我们需要一些样式。在一个新文件中，添加以下内容，并将其保存为css子文件夹中的datatags.css：

   img { max-width: 100%; }
   body:after { content: "global"; display: none; }
   
   @media screen and (min-width: 35em) {
     body:after { content: "tablet"; display: none; }
   }
   
   @media screen and (min-width: 56em) {
     body:after { content: "desktop"; display: none; }
   }
   

5. 我们已经准备好了。如果一切顺利，我们应该首先看到我们的小图像，紧接着是任意一个大图像，这取决于浏览器窗口的大小。

在这个演示中需要注意的关键是，我们只能在视口已经较小的移动设备上看到small.jpg图像。在更大的设备和桌面电脑上，将根据有效的媒体查询显示medium.jpg或large.jpg图像。

与标签一起工作

在响应式设计中工作的时候，我们经常需要提供不同的图像，并使用一系列媒体查询在适当的时候显示正确的图像。这没问题，但有点费时费力。相反，我们可以使用即将推出的<picture>标签来产生更整洁的效果。

注意

对<picture>标签的支持仍然相对较新；我们必须使用 polyfill 来为某些浏览器提供对标签的支持。更多详情，值得查看 CanIUse.com 网站caniuse.com/#feat=picture。

让我们深入探讨，看看我们如何使用以下步骤来使用这个标签：

1. 我们将像往常一样，从本书附带的代码下载中提取picturefill.html、picturefill.css和picturefill.js文件的副本；将这些文件分别保存到我们的项目区域的根目录、css和js子文件夹中。

2. 在代码下载中，我们还需要三个图像：small.jpg、medium.jpg和large.jpg；这些图像也需要放入img子文件夹中。

现在，我们已经设置了我们的演示。接下来，尝试调整浏览器窗口的大小，注意这两张图像如何改变，尽管它们在不同的响应点。这个问题的关键是使用 Scott Jehl 创建的picturefill.js polyfill。这旨在复制<picture>的功能，直到浏览器原生支持它，我们才能移除回退。

该库通过以下脚本块调用——使用document.createElement创建一个虚拟的picture回退元素，因为在这个阶段它还不存在：

  <script>
    document.createElement( "picture" );
  </script>
  <script async="true" src="img/picturefill.js"></script>

我们随后提供以下回退代码：

  <p>Here's how that renders in the browser. Feel free to resize to see it change.</p>
  <img sizes="(min-width: 20em) 80vw, 100vw" srcset="img/small.jpg 375w, img/medium.jpg 480w, img/large.jpg 768w" alt="A random image">

这随后是原生的元素，它将在每个浏览器的下一个几个版本中得到 Firefox、Opera 和 Chrome 的支持：

  <picture>
    <source srcset="img/large.jpg" media="(min-width: 768px)">
    <source srcset="img/medium.jpg" media="(min-width: 480px)">
    <img srcset="img/small.jpg" media="(min-width: 375px)">
  </picture>

值得了解<picture>元素。虽然这意味着我们必须将 CSS 媒体查询内联，但它会产生更干净的结果，因为我们不需要在单独的样式表中使用单独的媒体查询。

注意

与使用普通的 PNG 或 JPG 图像相比，您可能更喜欢使用 WebP 图像。它们在技术上相似，但提供了更好的压缩率。您可能需要为 GIMP 等应用程序添加额外的支持才能使用它们（访问 registry.gimp.org/node/25874）。

在我们的代码中维护 <picture> 标签

一个小小的警告：<picture> 标签仍然非常新，所以在它最终确定之前，预计会有一些整体设计上的变化。它可能会提出一些重要的问题，关于是否使用它适合您的需求以及如何在您的代码中维护它；例如，您是否愿意使用它，但接受并非每个浏览器可能都支持它？您的需求是否如此，以至于您现在还不能使用它，但可以接受使用 polyfill 作为临时措施？

如果您确实决定使用它，那么在实施过程中需要仔细规划。幸运的是，Scott Jehl 的实现（如本章所述），接近 <picture> 的预期最终版本；这应该会使转换相对容易。

注意

为了获得关于 <picture> 标签及其在响应式图片中使用状态的最新情况（有意为之！），值得查看响应式图片社区小组的网站：responsiveimages.org/。

在最后一个练习中，我们提到了一些不同的格式，以及类似于 WebP 的更好替代品；当进行响应式工作时，我们可以通过使用 SVG 来做得更好。如何？让我通过查看它如何用于改进可伸缩性来揭示一切。

使用 SVG 图像格式以实现可伸缩性

如果您在响应式媒体方面投入过任何时间，毫无疑问您会发现某些图像格式无法很好地缩放。为了解决这个问题，可能需要提供我们图像的几个不同版本，并设置代码在适当的点选择正确的版本。

我们真的想一直这样做吗？我 somehow 不这么认为。制作所有这些不同版本真的很痛苦！如果我们切换到基于矢量的 SVG 格式，就可以以不损失质量的方式平滑缩放，这将是一个更好的方法来实现相同的结果。让我们通过一个例子来深入了解它是如何工作的：

1. 我们将从准备我们将用于此演示目的的图像开始。我们将使用来自 XOO.me 网站的深色现代 LCD 显示 SVG 图像，网址为 xoo.me/template/details/12636-dark-modern-lcd-display-vector。如果您想使用替代品，请相应地更改代码；我们需要同一图像的 PNG 和 SVG 版本。

2. 将以下代码添加到新文件中，并将其保存为 svgfallback.html，位于我们的项目文件夹根目录下：

   <!DOCTYPE html>
   <html>
   <head>
     <meta charset="utf-8">
     <link rel="stylesheet" href="css/svgfallback.css">
   </head>
   <body>
     This is an image displayed using SVG, with PNG fallback:
     <br>
     <div id="lcd"></div>
   </body>
   </html>
   

3. 接下来，将以下 CSS 样式添加到新文件中，并将其保存为 svgfallback.css，位于我们的项目文件夹 css 子文件夹中：

   #lcd { background: url('../img/lcd.png');
     background-image: url('../img/lcd.svg'), none;
     width: 576px; height: 383px; background-repeat: no-repeat; }
   

4. 让我们看看在大多数浏览器中预览结果时会发生什么；它将显示我们液晶显示器的 SVG 图像。让我们首先在 DOM 检查器中查看我们页面的源代码，在那里我们可以看到 PNG 和 SVG 都勾选了，如截图所示；后者优先：

5. 为了证明它有效，以下是在所有荣耀中的 SVG 图像：

6. 要强制我们的演示显示 PNG 回退，我们需要模拟一个不支持 SVG 图像的原生浏览器；IE8 是这一点的完美候选人。我建议使用 IE 的较新版本，例如 9 或 10。我们可以使用其模拟模式来强制它在 IE8 模式下显示，因此选择 PNG 图像：

使用 SVG 的美丽之处在于，我们实际上可以使用文本编辑器编辑图像的内容；毕竟，SVG 图像只是普通的 XML 文件！SVG 图像有几个优点：

• 文件大小小，压缩效果好

• 它们可以缩放到任何大小而不会失去清晰度（除了非常小）

• 在视网膜显示屏上看起来很棒

• 它们设计控制，如交互性和过滤器

使用标准图像，如 PNG 或 JPG，将有效，但它们不会在其原生分辨率之外正确调整大小；相反，我们可能需要同一图像的几个版本才能正确查看它们。花时间了解 SVG 格式是值得的。有一篇有用的文章由 Nick Salloum 撰写，可在callmenick.com/2014/04/02/svg-fallback-with-png/找到，它赞扬了我们可以用来为 SVG 图像提供回退的不同机制。

如果你真的想深入了解编辑 SVG 图像，看看css-tricks.com/using-svg/。这是 Chris Coyier 写的一篇很好的文章，展示了我们如何编辑内容以真正改变其外观。

使用图像图标进行可扩展性

当我们创建响应式内容时遇到的一个主要问题是使用图标：它们的位图格式在调整大小时扩展性不好。这通常也适用于图标精灵；例如，如果你调整本章早期演示的电池图标大小，那么你很快就会注意到当抗锯齿启动时它变得多么像素化！

为了解决这个问题，设计师可能只是简单地放弃使用图标；另一种选择是用基于矢量的网络字体替换它们，例如在fortawesome.github.io/Font-Awesome/可用的 Font Awesome 图标。在线有一篇由 Jason Cranford Teague 撰写的优秀文章webstandardssherpa.com/reviews/responsive-webfont-icons，赞扬了它们在可扩展性无失真的主要优点。

要看到它们在实际中的工作情况，我们将使用来自 Entypo 的一些社交媒体图标，由 Daniel Bruce 创建，可在www.entypo.com找到。在这个教程中，我们将使用 Teague 创建的一个简化示例版本，它使用了许多图标。您可以在webstandardssherpa.com/reviews/responsive-webfont-icons上看到原始文章。

为这个教程执行以下步骤：

1. 让我们先从这本书附带的代码下载中提取webicons.html和webicons.css的副本。我们不会从头开始构建（尤其是因为它使用了大量的 CSS），而是要看看一些关键概念。将webicons.css文件存储在我们的项目文件夹的css子文件夹中，而webicons.html文件应存储在根目录。

2. 如果我们在浏览器窗口中预览该文件，我们将看到一系列图标显示；截图显示了在 Firefox 中调整到 67%大小的它们：

3. 尝试放大和缩小。注意图标的大小是如何增加和减少，同时没有明显的质量损失吗？我们使用了网络字体，而不是标准图像；这个原则在我们的例子中用于简单的图标，如标志，效果非常好。这个问题的关键在于使用rem尺寸或根em尺寸。这个尺寸将每个字符的大小设置为 HTML 元素的字体大小，而不是父元素，这是em所使用的。

   提示

   Jonathan Snook 有一篇有用的文章解释了rem和em是如何工作的，可在snook.ca/archives/html_and_css/font-size-with-rem找到。

4. 注意每个图标所设置的格式？这是字体的Unicode 私有用途区域；我们不是使用字体中的t（代表 Twitter 图标），而是可以使用这个私有用途区域。它达到了相同的效果。唯一的区别在于，当使用私有区域时，字母t不会显示。

   注意

   关于 Unicode 私有用途区域的更多信息，请查看维基百科上的文章en.wikipedia.org/wiki/Private_Use_Areas。

让我们继续，看看一些响应式设计的实际应用示例，首先是构建一个响应式轮播图。

构建一个响应式轮播图

到目前为止，我们已经介绍了很多不同的技术，帮助我们生成响应式内容。大多数都是在开发环境中的简单示例。现在是时候看看一些实际应用中的示例，其中响应式功能得到了很好的利用。我们的第一个例子是一个响应式轮播图。网上有数十个示例库可以用来创建一个，所以没有必要从头开始构建！

让我们看看我最喜欢的之一——ResponsiveSlides.js；这是一个简单的库，提供了一个有用的解决方案，但并不试图做到一切。我们将借鉴他们的一个示例来看看它是如何工作的。

1. 和往常一样，我们需要从某个地方开始。让我们先从下载ResponsiveSlides库开始，网址是responsiveslides.com/；写作时的当前版本是 1.5.4。将其保存到我们项目文件夹的js子文件夹中。

2. 我们还需要ResponsiveSlides的样式文件以及 jQuery 库的副本。从代码下载中提取carousel.css的副本，并将其保存到我们项目文件夹的css子文件夹中；然后以相同的方式在js子文件夹中对 jQuery 进行操作。

   注意

   ResponsiveSlides包附带 jQuery 1.8.3；我已经用 jQuery 2.1.1 的版本测试过，没有出现明显的不良影响。

3. 接下来，从本书附带的代码下载中提取carousel.html的副本；在responsiveslides.js库链接下面的空<script>标签之间添加以下代码：

   <script>
     $(function () {
       $("#slides1").responsiveSlides({ auto: false, pagination: true, nav: true, fade: 500, maxwidth: 800
       });
     });
   <script>
   

4. 保存文件。如果我们在一个浏览器中预览结果，我们会看到我们的轮播图出现。

5. 现在尝试调整浏览器窗口的大小。我们应该看到轮播图的大小减小，但继续滚动图片时不会损失质量。

在线有很多响应式轮播图的例子——两个这样的例子是 WOW Slider 在wowslider.com/，以及www.wowslider.com/responsive-image-gallery-glass-collage.html上的一个可能实现示例，Owl Carousel (www.owlgraphic.com/owlcarousel) 和 BXSlider，可在bxslider.com/找到。这完全取决于尝试选择一个并选择一个符合你需求的。

注意

本书附带的代码下载中有一个预构建的工作示例。提取carousel-finished.html和carousel-finished.css的副本，然后将它们重命名为carousel.html和carousel.css。你需要提取本练习中概述的配套库，以便它能够正确运行。

使用 Google Maps 创建响应式地图

在我们的两个真实世界示例中的第二个，我们将探讨如何使用 Google Maps 制作响应式地图。响应式地图，你可能会问？这应该自动完成，对吧？嗯，不是的，这使它在移动设备上的使用有些尴尬。幸运的是，我们可以轻松解决这个问题；它的好处是，它只需要一点额外的 CSS：

1. 让我们从浏览到maps.google.com开始，然后输入我们选择的位置的邮政编码。在这个例子中，我将使用 Packt Publishing 的英国办公室，邮编为 B3 2PB。

2. 点击齿轮图标，然后选择共享和嵌入地图：

3. 在出现的对话框中，切换到嵌入地图选项卡，然后复制以<iframe src=…开头的文本字段内容。

4. 在随本书附带的代码下载副本中，使用您最喜欢的文本编辑器提取googlemaps.html的副本，并在google-maps div标签之间添加<iframe>代码。

5. 接下来，将以下 CSS 样式添加到新文件中，并将其保存为googlemaps.css：

   #container { margin: 0 auto; padding: 5px; max-width: 40rem; }
   .google-maps { position: relative; padding-bottom: 60%; height: 0; overflow: hidden; }
   .google-maps iframe { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }   
   

如果一切顺利，我们将看到带有我们办公室标记的伯明翰的谷歌地图图像：

在这一点上，尝试调整浏览器窗口的大小。您将看到地图会自动调整大小；我们添加的 CSS 样式已覆盖了谷歌地图中使用的标准样式，使我们的地图能够适应任何我们想要使用的设备。

摘要

哇！在过去的几页中，我们确实覆盖了很多内容！让我们花点时间回顾一下，让所学的内容深入人心。

我们从创建基本流体图像开始，这是响应式设计的关键，应该成为任何响应式设计网站的基础。然后我们讨论了一些关键点，包括使用哪些图像格式，以及我们是否需要在代码中使用任何供应商前缀。接下来是关于如何为移动设备提供一些有用的技巧的讨论。我们看到许多都是常识，但特别适用于为移动设备设计。

我们的第一个编码示例是查看如何满足高清或视网膜图像的需求；然后我们转向检查我们如何也可以使用精灵为我们的项目添加响应式媒体。然后我们转向使用 jQuery 和 CSS 来调整可用视口空间的大小；然后我们可以使用这些来决定我们的媒体查询应该是什么样子。我们还介绍了如何使用 JavaScript 来定义媒体查询，以防我们需要在我们的网站上提供回退支持。

接下来，我们介绍了如何响应式地切换图像的几个示例——第一个使用数据标签，第二个使用即将推出的<picture>标签。我们还查看了一个技巧，我们可以同时提供两张图片，但依赖于浏览器选择它能够支持的图片。我们通过查看如何使用网络图标来提供响应式内容并保持高质量缩放来完成对图像的探讨。然后我们通过查看两个实际案例来结束本章，这些案例是构建响应式轮播图和创建响应式地图。

在下一章中，我们将探讨媒体内容的另一个主要元素，以及如何将视频响应式地添加到我们的网站上。

第二章：添加响应式视频内容

在互联网的历史上，自从它的早期，设计师和开发者就能够向网站添加图片——这些图片非常适合说明观点或概念，但它们在某个时间点是静态的记录。越来越多的开发者转向视频的力量来帮助说明某些内容：主题多种多样，从新闻到烹饪，甚至是一步一步的编码教程！随着移动媒体的出现，对响应式内容的需求不断增加——我们需要确保我们的内容可以在更多和更多的设备上无问题地查看。

在本章中，我们将探讨一些使我们的内容响应式所需的观念，同时也会介绍一些技巧和窍门，以便我们的内容能在多个平台上可用。在本章中，我们将涵盖以下主题：

• 确定对 <video> 格式的支持并选择正确的格式

• 嵌入 HTML5 视频内容

• 确定可用的视口

• 适应回退支持和应用供应商修复

• 使用 JavaScript 库提供支持

• 适应不同平台并显示全尺寸视频

好奇吗？让我们开始吧！

我们将从选择 HTML5 视频的正确格式的基础知识开始，但在开始之前，我们需要介绍一些简单的管理任务，这些任务将有助于我们整章的学习。

准备工作

为了本章的练习目的，我们将在整个章节中使用类似的标记；值得将以下代码保存为模板文件，以帮助您完成每个练习：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>XXXXXXXXXX</title>
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
  <link href="css/XXXXXXXX.css" rel="stylesheet">
</head>
<body>
</body>
</html>

现在我们已经准备好了基础，让我们开始我们的旅程，学习如何使用响应式视频，首先看看可用的格式。

我们还将使用来自 Blender Foundation 的 Big Buck Bunny 项目的各种视频，具体为 852 x 480 和 1280 x 720 格式；您可以从www.bigbuckbunny.org/index.php/download/下载这些视频。

注意

本项目中使用的视频版权©2008，Blender Foundation，可在www.bigbuckbunny.org找到。

还建议您为本章内容创建一个项目文件夹；我称之为 code。在里面，您需要创建两个文件夹：css 和 js。我们将在整章中引用这两个文件夹。

确定对

在我们创建响应式视频内容的旅程中，第一步是确定我们将使用哪种视频格式。浏览器中可用几种视频格式，但值得注意的两个是 WebM 和 MP4。前者仅由 Firefox、Chrome 和 Opera 支持；后者由所有主要桌面浏览器支持，除了 IE8 和 Opera。为了创建响应式内容，我们仍然需要与两者一起工作，因为移动平台尚未决定一个共同的标准：

浏览器	Firefox	Chrome	Safari	IE (9+)	Opera	iOS	Android
支持的格式	MP4	MP4	MP4	MP4	WebM	MP4, WebM	MP4, WebM

此表也可参考www.jwplayer.com/html5/（在 Jeroen Wijering 撰写的“HTML5 视频状态”文章中）。

由于 HTML5 视频标准仍处于某种程度的变动之中，值得查看 CanIUse.com 网站，以了解caniuse.com/#search=video上的最新进展。

注意

你可能会遇到关于 OGG 格式的引用，作为 HTML5 <video>标准；虽然这会工作得很好，但由于专利问题，该格式在 2007 年被从 HTML5 标准中移除。它不像其他格式那样得到广泛支持。

现在我们已经了解了视频格式，让我们来看看如何将我们的视频内容转换为正确的格式，以便使用。

选择正确的格式

到目前为止，我们已经了解到，要使用 HTML5 <video>标签，我们需要使用 WebM 或 MP4 格式（或者理想情况下两者都要，以确保覆盖）。可能你现有的内容不是这种格式；如果是这种情况，让我们看看我们如何将其转换。

有数十种应用程序可供下载，用于将一种格式转换为另一种格式——我个人的最爱是 Windows 上的 XMedia Recode，可在www.xmedia-recode.de找到。这允许转换到和从众多不同的格式，包括 WebM 和 MP4。让我们通过以下步骤看看它是如何工作的：

1. 我们首先从www.xmedia-recode.de/en/download.html下载 XMedia Recode 的副本；在撰写本文时，最新版本是 3.1.9.4。

2. 双击安装可执行文件以启动安装并接受向导中的所有默认设置。

   到目前为止，XMedia Recode 已经安装；我们现在需要运行转换过程。可以真正深入配置转换过程——目前，我们将坚持基本的转换，这对我们的需求来说是足够的。

3. 在 XMedia Recode 应用程序中，点击打开文件，然后选择您的视频并点击打开。

4. 等待 XMedia Recode 分析视频，然后从输出格式框中选择所需的格式。

5. 在窗口底部，我们需要选择我们的目标文件夹，所以请选择您存储视频内容的相同文件夹。

我们即将开始转换；要这样做，我们需要点击添加到队列然后点击编码以开始过程，如以下截图所示：

XMedia Recode 将在转换过程完成后提示。我们可以选择转换另一个视频或在此处关闭应用程序。对于我们使用 Apple Mac 或 Linux 的用户，有几种替代方案可用；它们执行与 XMedia Recode 类似的过程。几个值得考虑的选项是跨平台应用程序 Handbrake(www.handbrake.fr——用于 MP4 转换)，以及可在www.firefogg.org找到的基于浏览器的 Firefogg 小程序。尽管后者旨在转换为 OGG 格式，但它也可以将视频转换为 WebM 格式。

注意

关于 WebM 格式的更多信息，或者如果您在为 PC 配置它时遇到任何困难，请查看项目文档www.webmproject.org/tools。

我们现在有了准备好的视频，接下来是什么？啊，是的——让我们看看如何将它们嵌入到页面中，这样我们就可以看到如何使它们具有响应性。我们将使用 Big Buck Bunny 项目的转换视频作为我们的源媒体；如果您想尝试更小的视频，可以在techslides.com/sample-webm-ogg-and-mp4-video-files-for-html5/找到样本视频，它们同样适用。

嵌入 HTML5 视频内容

与所有项目一样，我们需要从某个地方开始——我们可以在视频上双击，让它在我们安装的任何支持该格式的应用程序中播放。然而，这并不是我们在这里要做的事情；我们想在浏览器中查看内容，并设置它自动调整大小！

以下步骤将向您展示如何使用我从开源 Big Bunny 项目www.bigbuckbunny.org转换的视频来实现这一点：

1. 让我们先打开本书中之前创建的模板文件的副本，然后修改我们的演示中的<title>标签，如下代码片段所示：

   <title>Demo: Controlling Video sizes using media queries</title>
   

2. 在我们的代码的<body>标签中，添加以下行；这些行引用了我们可以使用的不同视频格式，具体取决于我们正在使用的浏览器：

     <video controls>
       <source src="img/bigbuckbunny.mp4" type="video/mp4">
       <source src="img/bigbuckbunny.webm" type="video/webm">
     </video>
   

   将结果保存为basic.html。在此阶段，如果我们想在浏览器中预览结果，我们可以清楚地看到我们有一个问题！视频没有调整大小，导致只有部分显示：

   

3. 幸运的是，这很容易修复；如果您预期会有很多复杂的 CSS 代码，那么不用担心；解决方案比您想象的要简单！将以下内容添加到新文件中，并将其保存为basic.css：

   video {
       max-width: 100%;
       width: 100% !important;
       /* just in case, to force correct aspect ratio */
       height: auto !important;
   }
   

4. 在basic.html中，按照以下方式修改 CSS 样式表链接：

   <link href="css/basic.css" rel="stylesheet"></head>
   

   如果我们刷新浏览器，现在我们可以看到内容是响应式的，当我们减小浏览器窗口大小时会自动调整大小：

   

现在，我们的初始内容已经设置并运行，我们需要考虑一个重要的问题——如果我们是为小视口设计，我们应该显示视频还是隐藏它？例如，在手机等较小设备上？所有这些问题都是很好的问题。让我们看看我们如何确定可用的视口大小，以便我们可以决定在设计中包含什么或不包含什么。

小贴士

如果你发现视频播放不正确，那么你可能需要在项目文件夹的根目录下创建一个.htaccess文件，然后在那个文件中添加以下代码行：

AddType video/mp4 mp4
AddType video/ogg ogv
AddType video/webm webm

确定可用的视口以使用

如果你花过时间开发响应式布局的内容，你无疑会遇到媒体查询。同样的，这也适用于视频；你通常可以看到类似以下（简化）的示例：

<video controls>
  <source src="img/the-sky-is-calling-large.mp4" media="screen and (min-width:800px)">
  <source src="img/the-sky-is-calling-small.mp4" media="screen and (max-width:799px)">
</video>

不幸的是，大多数浏览器已经取消了媒体查询的支持。这主要是因为当屏幕调整大小时，视频突然中断给用户带来的糟糕体验。幸运的是，我们可以产生类似的效果，尽管我们需要求助于 JavaScript 或 jQuery 来实现这一点。在下一个示例中，我们将展示如果屏幕调整到小窗口，将显示一个小视频；如果全屏显示，则隐藏它。让我们看看我们如何实现这一点：

1. 我们首先从本书附带的代码下载中提取viewport.html的副本，以及video、js和css文件夹。

2. 接下来是这个演示背后的真正魔法。在js文件夹中有一个detect.js的副本；它根据可用视口的大小控制视频的显示。让我们分部分来看，首先是创建wi变量，用于存储当前窗口大小：

   $(window).ready(function() {
     var wi = $(window).width();  
   

3. 接下来是使用以下代码行渲染窗口的初始大小：

     $("p.notification").text('Initial screen width is currently: ' + wi + 'px.');
   

4. 真正的魔法接下来发生。在调整大小的函数中，我们获取新的宽度，然后确定我们是否低于480px，如果为true，则设置视频显示：

     $(window).resize(function() {
       var wi = $(window).width();
   
       var video = $("#video").html();
   
       if (wi <= 480){
         $("p.notification").text('Screen width is less than or equal to 480px. Width is currently: ' + wi + 'px.');
         if (video == "") {
           $("#video").append('<video controls><source src="img/bigbuckbunny-320px.mp4" type="video/mp4"></video>');
         }
       } 
   

5. 如果大小更大，则隐藏视频：

         else {
         $("p.notification").text('Screen width is greater than 480px. Width is currently: ' + wi + 'px.');
         $("#video").html("");
       }
     });
   });
   

6. 现在，让我们在浏览器中运行这个演示，看看结果。如果我们尝试将浏览器窗口调整到480px以下，我们应该看到一个通知出现，以及视频，如下面的截图所示：

7. 尝试将窗口调整到更大的尺寸。注意视频不再显示。

虽然这个演示在本质上有些简单，但它表明我们可以模仿媒体查询的效果。因此，我们可以计算出我们有多少可用空间，并显示一个更大、高质量的视频，或者一个更小的视频。毕竟，我们不想在手机上下载一个巨大的视频，而有一个更小的版本可用！

小贴士

我如何看到调整浏览器窗口大小后的效果？

我们可以手动调整大小，但更好的解决方案是使用像 Malte Wasserman 创建的调整大小工具，它模拟了一系列大小，可在lab.maltewassermann.com/viewport-resizer/找到。

这个例子确实打开了一些可能性，尽管它应该小心处理，并且任何解决方案在投入生产之前都需要进行全面测试。

满足回退支持

到目前为止，我们已经制作了 HTML5 格式的视频内容，并了解了如何在我们的页面上嵌入它。然而，有时我们可能在处理不支持某种视频格式的设备上工作。

虽然 HTML5 视频的支持一直在改善，但我们仍然处于这样一个阶段，即并非每个平台都支持相同的格式。这给我们留下了两个选择。我们可以尝试整合不同的格式，或者我们可以简单地设置内容以优雅地降级。我们已经探讨了提供不同格式的方法，所以让我们改变方向，看看我们如何使用 Modernizr 作为测试的基础来优雅地降级我们的内容。以下步骤将指导我们通过内容降级的过程：

1. 让我们从将以下代码添加到新文件并保存为modernizr.html开始：

   <!DOCTYPE html>
   <html class="no-js">
   <head>
     <meta charset="utf-8"/>
     <title> Demo: Detecting support with Modernizr</title>
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
     <link rel="stylesheet" href="css/modernizr.css">
     <script src="img/jquery.js"></script>
     <script src="img/modernizr.min.js"></script>
     <script>
       $(document).ready(function() {
         if(Modernizr.video) {
           $("#html5video").html("");
           var videoHTML = '<video controls><source src="img/bigbuckbunny.mp4" type="video/mp4"><source src="img/bigbuckbunny.webm" type="video/webm"></video>';
           $("#html5video").html(videoHTML);
         }
       });
     </script>
   </head>
   <body>
     <div id="html5video">Sorry, HTML5 video is not enabled on this client</div>
   </body>
   </html>
   

2. 接下来，将以下代码添加到新文件中，并将其保存为modernizr.css。这将提供一些基本的样式，以防视频测试结果为否定：

   video { width: 50%; }
   .no-js #html5video { background-color: #c00; color: #fff; font-weight: bold; font-family: arial, helvetica; font-size: 14px; border: 2px solid black; border-radius: 4px; width: 35%; padding: 10px; }
   

3. 我们需要提供一些额外的文件。从伴随本书的代码下载中提取js和video文件夹；将这些保存到项目文件夹中。

4. 为了测试这一点，我们将使用 Firefox；在浏览器地址栏中输入about:config以打开配置设置。

5. 在弹出的安全警告消息中点击我会小心，我保证！然后查找javascript.enabled并双击将其设置为false：

   到目前为止，让我们在浏览器中预览我们的努力结果。如果一切顺利，我们不应该看到我们的视频，而是一个以下警告：

   

6. 返回到第 5 步，但这次双击条目以启用 JavaScript 支持。完成后，刷新预览，我们应该看到我们非常熟悉的 Buck Bunny 视频。

现在，如果我们的视频内容由于某种原因无法转换为 HTML5 格式，会发生什么呢？一个很好的例子可能是内容仅以 YouTube 或 Vimeo 格式提供；版权限制可能阻止我们将其转换。但这不是问题；我们仍然可以使用它。虽然严格来说它不会是 HTML5 格式，但我们可以通过一些额外的工作使其具有响应性。

使用 JS 库提供支持

使用 HTML5 <video> 元素的一个关键好处是调整大小非常简单；使用这个标签使视频响应式只需要几行 CSS。然而，对于其他格式的视频来说，情况并非如此；我们可能会遇到不得不使用 YouTube 或 Vimeo 等格式的情况，这些格式依赖于使用 <iframes> 进行嵌入。

幸运的是，我们可以使这些视频响应式，尽管实现这一点的路径稍微复杂一些。这需要使用像 FitVids.js 这样的库，它可以在 www.fitvidsjs.com 找到，并且与 jQuery 一起工作。以下步骤将帮助我们使用 JS 库使视频响应式：

1. 我们首先需要下载 FitVids 库。浏览到 github.com/davatron5000/FitVids.js，然后点击右侧的 下载 ZIP。从压缩包中提取并保存 jquery.fitvids.js 到你的项目文件夹中。

2. 接下来，在之前创建的模板文件的副本中，修改 <head> 部分如下所示：

   <head>
     <meta charset="utf-8">
    <title>Demo - Using FitVids.js</title>
    <script src="img/jquery.js"></script>
    <script src="img/jquery.fitvids.js"></script>
   </head>
   

3. 我们需要在 <body> 标签中添加一些额外的标记。所以，请继续在 <head> 部分添加以下行：

     <div id="main-container">
       <iframe width="560" height="315" frameborder="0" src="img/XSGBVzeBUbk" allowfullscreen> </iframe>
     </div>
     <script>
       $(document).ready(function(){
         $("#main-container").fitVids();
       });
     </script>
   

4. 如果我们在浏览器中预览结果并开始调整浏览器窗口大小，视频将自动调整大小：

我们不必非得使用 FitVids，尽管它是一个流行的选择；还有其他一些可以选择，它们的工作方式类似，如下所示：

• FluidVids，来自 toddmotto.com/fluid-and-responsive-youtube-and-vimeo-videos-with-fluidvids-js/

• SimpleVid，可在 johnpolacek.github.io/SimpleVid/ 找到

• ResponsiveVideo，可在 cbavota.bitbucket.org/responsive-video/ 找到

作为一种替代方案，如果你只在你网站上处理少量视频，你可以使用在线服务 EmbedResponsively.com 来手动使你的嵌入视频响应式。这是通过在 HTML 中添加一个容器，然后对其进行样式化以允许其响应式调整大小来实现的，这与我们使用 FitVids 库的方式非常相似。

到目前为止，我们已经使用 <video> 标签制作了视频内容，并看到了如何在我们的网站上实现响应式布局。然而，我们也需要考虑到在移动平台上提供内容的需求，所以现在让我们看看如何实现这一点。

适应不同平台

毫无疑问，响应式设计的一部分是产生能够在移动设备上工作的内容；否则它就不会是响应式的！我们可以花很多时间尝试从头开始开发，但这样做几乎没有意义。其他人已经制作了在桌面电脑上工作的播放器。

通过一点额外的努力，我们可以使播放器变得响应式。幸运的是，来自“地球上最酷的指南”网站的 Neil Gee 已经为我们做了艰苦的工作。让我们看看一个示例播放器，看看他是如何使其变得响应式的；我们将使用 VideoJS 作为我们的演示目的。为此演示，请执行以下步骤：

1. 我们将首先从本书附带的代码下载中提取player文件夹，并将其保存到我们的项目文件夹中。它包含一个工作视频播放器示例，已经配置好以供使用。我们将添加必要的更改以使其响应式。

2. 在player.html中，修改指向 CSS 样式表的链接，如下所示：

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

3. 接下来，在一个新文件中，添加以下 CSS 样式规则，并将其保存为video-js-overrides.css：

   .video-js { padding-top: 56.25% }
   .vjs-fullscreen { padding-top: 0px }
   .vjs-default-skin .vjs-big-play-button { left: 40%; top: 45%; width: 10%; }
   
   // These two media queries resize and reposition the big play button to the center of the screen
   @media only screen and (max-width:599px) {
     .vjs-default-skin .vjs-big-play-button {top: 45%; width: 25%;}
   }
   
   @media only screen and (min-width:600px) and (max-width:768px) {
     .vjs-default-skin .vjs-big-play-button { top: 40%;
     width: 25%;font-size:5em;}
       }
   

4. 如果我们在浏览器中预览结果，我们会看到视频正常播放。为了获得更好的效果，建议使用 Google Chrome。我们可以使用开发者工具栏来模拟不同的设备，如下面的截图所示：

5. 选择索尼爱立信 Xperia S, Ion选项，在 Chrome 中会产生以下结果。在下面的截图中，屏幕已经通过更改开发者工具栏“屏幕”选项卡中的分辨率选项翻转成横幅模式：

尝试更改选项以模拟不同的设备；你将开始看到，无论设置什么大小，播放器仍然能够正常播放。

小贴士

代码下载中有一个完成的示例，作为player-finished.html和player-finished.css。将这两个文件重命名为player.html和player.css以查看最终成果。Neil 还对其他视频播放器进行了类似的处理——你可以在coolestguidesontheplanet.com/videodrome/videojs/上查看它们的文章。

允许供应商前缀

在编写代码的过程中，你是否注意到一些特别的地方，比如明显不需要供应商前缀？没错，为了制作一个基本的响应式视频解决方案，确实不需要任何前缀，所以现在讨论在我们的代码中允许它们的需求是合理的！

答案不在于提供处理<video>或<iframe>标签所需的基本样式，而在于我们将视频设置为全屏或背景显示时。前者仍然需要供应商前缀。虽然我们可以手动提供它们，但自动在编译时添加它们被认为是更好的做法。

注意

在我们继续之前，这个演示需要安装 Node；可以在 nodejs.org/ 找到它。请在继续之前为您的平台安装它。

让我们看看如何使用 Grunt 的 Autoprefixer 插件，它与 www.caniuse.com 的服务相结合；Grunt 插件可在 github.com/postcss/autoprefixer 找到。以下步骤将帮助您了解添加前缀的过程：

1. 我们将首先为我们的编译创建一个新的文件夹。在我们的例子中，我将使用 g:\grunt；如果您使用其他名称，请相应调整。

2. 在文件夹内，添加一个名为 build 的新文件夹，并在其中添加三个新文件，分别是 gruntfile.js、package.json 和 style.css，具体请参考以下截图：

3. 在 gruntfile.js 文件中，添加以下代码：

   module.exports = function (grunt) {
     grunt.initConfig({
       autoprefixer: {
         dist: {
           files: {'build/style.css': 'style.css'}
         }
       },
       watch: {
         styles: { 
           files: ['style.css'],
           tasks: ['autoprefixer']
         }
       }
     });
     grunt.loadNpmTasks('grunt-autoprefixer');
     grunt.loadNpmTasks('grunt-contrib-watch');
   };
   

4. 在 package.json 中添加以下代码：

   {
     "name":"yourprojectname",
     "version":"0.0.1",
     "devDependencies":{
       "grunt":"*",
       "grunt-contrib-watch":"*",
       "grunt-autoprefixer":"*"
     }
   }
   

5. 从 Node 命令提示符中输入并运行以下命令以安装 Autoprefixer 和监视功能：

   npm install grunt-cli grunt-contrib-watch grunt-autoprefixer
   
   

6. Node 会自动安装所有依赖项。完成后，我们可以在提示符下运行以下行以启动 Grunt 监视任何更改：

   Grunt watch
   
   

7. 然后，我们可以修改 style.css 文件，例如添加以下代码行：

   a { width: calc(50% - 2em); transition: width 2s; }
   

   我们将看到 Grunt 自动启动并重新编译我们的代码：

   

我们可以通过查看在构建文件夹中出现的 style.css 文件来验证 Autoprefixer 是否已经完成了它的魔法。虽然我们的例子有点简单，但这个功能将在我们下一个演示中变得非常有用，该演示使用了许多 CSS3 供应商前缀属性，而 Autoprefixer 可以在编译过程中处理这些属性。

注意

如果您更喜欢使用非命令行替代方案，那么 SublimeText 的 Autoprefixer 值得一看；它可在 www.hongkiat.com/blog/css-automatic-vendor-prefix/ 找到。

让我们继续前进，看看一些不同的东西。你有多少次遇到过启动时播放全尺寸视频的网站？这是一个非常酷的效果，尽管必须小心操作。让我们看看如何在实践中实现这一点。

显示全尺寸视频

到目前为止，我们已经涵盖了创建响应式视频的大量理论。现在是时候有点乐趣了！如果我们查看互联网，我们会看到许多设计师创建的网站，在查看内容时在背景中显示全尺寸视频。

在网上有很多如何实现这一点的例子。我们将使用由瑞典开发者 Anton Trollbäck 创建的 jQuery Cover 插件，该插件可以从github.com/antontrollback/cover下载。让我们按照以下步骤使用以下步骤使视频以全尺寸显示：

1. 首先，从本书附带的代码下载中提取fullsize.html的副本。它包含一些基本的标记，使用 HTML5 视频标签包含两个 MP4 和 WebM 格式的视频，以及一些叠加文本。

2. 在fullsize.html中，在<title>声明下方立即添加以下行：

       <link rel="stylesheet" href="css/fullsize.css">
       <script src="img/jquery.min.js"></script>
       <script src="img/jquery.cover.js"></script>
       <script>
         $(document).ready(function() {
           $('video').cover({
             ratio: 1080 / 1920
           });
   
           $(window).resize(function() {
             $('video').cover('set');
           });
         });
       </script>
   

3. 接下来，将以下行添加到fullsize.css文件的底部，并将其保存到项目文件夹中的css子文件夹：

   #overlay { border: 1px solid #000; padding: 10px; width: 30%;
   opacity: 0.8; background-color: #000; margin-left: auto;  margin-right: auto; color: #fff; font-weight: bold; font-family: arial, helvetica; border-radius: 4px; margin-top: 5%; }
   video { margin-top: -5%; }
   

4. 从代码下载中复制bigbuckbunny.mp4和bigbuckbunny.webm视频，并将这些视频存储在项目文件夹中的video子文件夹内。我们还需要jquery.js和jquery.cover.js文件，所以将这些文件复制到js子文件夹。

到目前为止，我们应该有一个可以工作的演示。所以，在浏览器中预览结果；如果一切顺利，你应该会看到视频无声播放，如下面的截图所示：

现在，我们可以在打开时简单地播放全屏视频。

注意

代码包中包含了这个演示的示例。在查看最终文章之前，将fullsize-finished.html文件重命名为fullsize.html，将fullsize-finished.css文件重命名为fullsize.css。

创建全尺寸视频会产生一个引人入胜的效果，这需要谨慎管理。以下是一些需要考虑的点：

• 使用 Modernizr（或类似工具）来检测是否正在使用移动设备。如果是，则显示一个背景图像。

• 这个功能对于需要显示有限时间内容的大型公告很有用——但它很快就会失去吸引力！

• 不要设置视频显示声音；这只会让人们对访问你的网站感到厌烦。

• 如果你使用海报图像，尽量将文件大小保持在最小，同时不要过度降低质量。

• 尝试提供一种机制，以便在需要时可以关闭视频。并不是每个人都想看到它在运行。

• 你可能想要考虑使用类似网络 API 的东西来检测用户的互联网连接。如果他们没有快速连接，那么应该播放一个较小的视频，或者完全绕过该用户的功能。

最终，在实施此类功能之前，仔细考虑这一点是值得的。如果做得好，它可以产生出色的效果；这是一条很容易越过的细线！这种效果在音乐艺术家的网站上会很好。对于一些有趣的例子，请查看www.creativebloq.com/web-design/video-backgrounds-2131982。希望这能给你下一个项目带来一些灵感！

摘要

我们已经完成了对响应式视频的探索之旅，其中我们涵盖了各种有用的效果。让我们花一点时间回顾一下本章我们所学的内容。我们首先简要地看了看与响应式视频设计兼容的视频格式；作为其中的一部分，我们讨论了将其他格式转换为已知的 HTML5 视频格式是多么容易。

我们接着探讨了如何使用标准的 HTML5 标签将内容嵌入到页面中，并注意到了一些出现的问题。然后我们继续前进，研究了如何确定可用的视口大小，作为处理视频时媒体查询的替代方案。然后我们研究了支持其他格式，接着是使用 JavaScript 库为视频提供回退支持。

我们还介绍了如何使用流行的视频播放器，如 VideoJS，为不同的移动平台提供支持。然后我们以使用 Blender Foundation 制作的 Big Buck Bunny 视频为例，探讨了在网站上提供全尺寸视频支持。

到目前为止，在这本书中，我们一直使用图像或视频。你的网站不太可能只要求其中之一。在下一章中，我们将看到如何包含两者，并探讨这样做可能遇到的陷阱，以避免页面重量过大和下载时间过长。

第三章。混合内容

69%的响应式设计移动网站的加载时间被认为“不可接受”……

一个令人震惊的事实，但绝对是真实的：2014 年 4 月，移动开发公司 Tribilis 进行的一项调查显示，在所调查的 155 个网站中，只有 21%的网站在智能手机上能在 4 秒或更短时间内加载完成。而且，加载时间较长的网站平均页面大小为 1.7 MB。

这是一些令人深思的想法，但它们完美地说明了在响应式设计中混合视频和图像的陷阱！我们需要在显示不太大也不太小的正确媒体内容的同时，保持页面加载时间短。本章通过一些示例并详细说明了与混合内容相关的一些陷阱，这些陷阱可能导致页面重量大和下载时间长。

本章将涵盖多个主题，包括：

• 在同一页面上混合视频和图像内容

• 考虑混合内容时的限制

• 使用预加载器来减少延迟

• 为我们的页面添加懒加载支持

• 考虑到移动设备

感兴趣吗？让我们开始吧！

在同一页面上混合视频和图像内容

在整本书中，我们看到了我们需要使用的一些技巧和窍门来使我们的媒体内容响应式，并处理了一些我们需要实施的样式的示例，以实现这一点。

然而，不太可能每个响应式网站都会有图像或视频；更有可能的是，至少在一些网站上会有两者的混合！这可能会带来它自己的问题，所以为了看看会发生什么，让我们运行一个简单的演示。

从代码下载中提取本章的code文件夹并将其保存到您的项目文件夹中；这包含一个简单的演示，展示了我们在响应式设计中混合视频和图像时面临的问题。如果我们直接运行mix-responsive.html演示，它看起来一开始看起来还不错，直到我们向下滚动并查看视频。布局不是理想的，但我们可以做一些更改：

• 浏览器窗口顶部的横幅图片太大。虽然这在桌面电脑上可能没问题，但会在智能手机上造成拥堵；需要调整大小。

• 嵌入的视频没有尊重其容器边界，结果是它溢出了整个页面，使得文字难以阅读。

• 我们可以改进横幅的使用。一旦我们将其改为更薄的设计，我们就可以添加一个媒体查询来切换到这个更薄设计的较小版本。

幸运的是，这些修复很容易。让我们看看需要做什么：

1. 将mix-responsive.html和mix-responsive.css分别保存为mix-responsiveV2.html和mix-responsiveV2.css（在同一文件夹中）。别忘了将 HTML 标记内的 CSS 文件链接更改为指向新文件！

2. 在第 28 行或其附近查找banner div，并移除<img>标签，以便 HTML 标记与以下代码行所示相同：

   <div id="banner"></div>
   

3. 在下面，在第 34 行或其附近查找<video controls>；我们需要将其包含在一个包装<div>中：

   <div id="video-wrapper">
     <video controls>
       <source src="img/bigbuckbunny-480px.mp4" type="video/mp4">
       <source src="img/bigbuckbunny-480px.webm" type="video/webm">
     </video>
   </div>
   
   

4. 打开mix-responsiveV2.css并添加以下样式：

   #video-wrapper video { max-width: 100%; }
   #banner { background-image: url('../img/abstract-banner-large.jpg'); height: 15.31rem; width: 45.5rem; max-width: 100%; } 
   
   @media screen and (max-width: 30rem) {
     #banner { margin-top: 150px; background-image: url('../img/abstract-banner-medium.jpg'); height: 4.85rem; width: 45.5rem; max-width: 100%; }
   }
   

5. 保存文件。如果我们在一个浏览器中预览我们的工作结果，我们可以看到页面外观的显著改进。

现在尝试调整页面大小；你应该会看到视频和图像元素会完美地调整大小，没有任何溢出。简而言之，我们的改动非常简单。我们给视频添加了一个容器，并添加了max-width样式属性，将其设置为100%。然后我们用更薄的版本替换了笨重的横幅，设置它在调整大小时保留其容器的完整宽度。一旦屏幕宽度低于30rem，它就会切换到更小的版本。

小贴士

我们有一个包含修复的完成版演示。在代码下载中，查找并提取mix-responsiveV2-finished.html和mix-responsiveV2-finished.css。将两个文件都保存在与原始文件相同的位置以查看结果。

在我们继续并查看如何在混合内容时为移动设备做出让步之前，我想介绍一些可能对你有所帮助的小贴士：

• 我们直接在页面上嵌入了视频。它工作得非常好，但如果我们想给它增添一点额外的光彩，我们可以考虑使用覆盖层。有很多可供选择，但一个很好的（响应式）例子是 FrescoJS，可在www.frescojs.com/找到。

• 如果 CSS3 不受支持，可能需要求助于 jQuery 来为元素提供响应式功能。较老的浏览器，如 IE8 或以下版本，可能属于这一类。我们可以使用类似 Embedly jQuery 这样的工具来实现，可在embedly.github.io/embedly-jquery/找到。

  小贴士

  有一个关于如何配置 Embedly jQuery 的教程，可在embed.ly/docs/tutorials/responsive找到。

• 如果你需要为第三方嵌入的视频（如 YouTube）添加响应式代码，可以使用embedresponsively.com/提供的服务；只需输入要嵌入的任何视频或图像的 URL，然后点击嵌入以获取代码。

好的！我们继续！我们已经讨论了很多关于内容混合的问题，但正如我们在演示中看到的，还有一些方面可以改进。我们在演示中做出的改动只是我们可以用来消除内容混合的一些陷阱的一些指针，所以让我们更详细地看看几个例子。

考虑内容混合的陷阱

在过去几年中，响应式设计变得非常流行，访客使用各种设备在互联网上浏览内容。这增加了开发者确保他们的网站在各种不同的设备和平台上都能良好工作的压力。eMarketeer 最近的一项研究表明，五分之四的人将通过移动设备访问内容，并且预计这个数字在未来三年内将增加。

地区	2014	2015	2016	2017
中东和非洲	94.0	94.0	95.0	96.0
亚洲太平洋	87.4	90.0	92.6	93.9
中东和东欧	72.4	80.6	86.6	91.7
北美	64.3	69.8	74.4	79.2
西欧	67.8	78.2	85.0	90.6
拉丁美洲	58.5	65.0	70.1	75.2
全球	79.1	83.6	87.3	90.1

上表中数字是从 2013 年 12 月的 eMarketeer 中获取的百分比值。

为了避免陷入制作出提供糟糕体验的响应式网站的陷阱，让我们看看在响应式设计中混合媒体源时需要考虑的一些陷阱：

• 页面上图像的大小和数量将直接影响访客查看页面的速度。为了减少影响，我们可以使用几种技术：

  • 图像压缩是第一个被广泛使用的简单技术。为了说明压缩图像的必要性，Tribilis 的一篇文章值得一读，可在blog.trilibis.com/trilibis-web-performance-survey-finds-69-percent-of-responsive-design-websites-fail-to-deliver-acceptable-load-times-on-mobile-devices-02759找到。它展示了当图像被压缩时的一些显著收益！

  • 下一个重要的技术是将小图像转换为数据 URI 或作为图像精灵的一部分。

  • 另一种技术是使用懒加载，只显示视口中可见的图像。

• 我们需要意识到设计中的断点，并调整我们的媒体查询以适应。对于图像可能有效的方法可能对视频同样有效，尤其是如果它们的大小不同的话。

• 将较小的图像缩放到更大的尺寸会导致质量损失；建议从大尺寸图像开始，并为较小的设备动态调整大小。一旦达到特定的断点，我们就可以默认使用较小的图像，以避免图像在没有针对特定断点/视口宽度进行调整时变得难以辨认。

• 当图像被缩小到非常小的尺寸时，缩放图像可能会引起问题。这些尺寸可能意味着我们无法正确查看图像，其含义将丢失，文件大小不会减小，而且可能最好是根本不显示它。

• 考虑将矢量图像转换为 SVG 格式。转换为标准图像格式，如 JPG、GIF 或 PNG，可能会导致与将小图像缩放到较大尺寸时相同的质量损失。SVG 图像可以很好地缩放而不会损失质量。

• 如果您的网站使用视频，那么一个可能会让您陷入困境的陷阱是使用的格式。尽管我们只需要为 MP4 或 WebM 支持进行编码，但并非每个设备都会使用这两种格式。对网络指标进行仔细分析可以帮助我们了解哪些操作系统被用来访问网站，从而帮助我们确定要使用哪种视频格式。

  小贴士

  对于格式支持的最新检查，请查看www.jwplayer.com/html5上可用的文章。

• 您是否使用图像来表示小元素，如按钮？如果是这样，请考虑将它们转换为 CSS3 等价物，至少对于可以支持它们的浏览器来说是这样。这意味着减少对服务器的请求（我们不会调用图像），并且 CSS 样式表已经被浏览器缓存，因此响应将更快。网上有很多示例；您可以在css-tricks.com/examples/ButtonMaker/尝试 Chris Coyier 的按钮创建器，或者在html-generator.weebly.com/css-shape-generator.html尝试 CSS 形状生成器。

• 仅指定图像的宽度可能会导致许多浏览器必须处理的布局新调整大小页面的周期加倍或三倍。虽然这些周期中的每一个通常小于一毫秒，但它们会累积，尤其是在页面上有多个可缩放元素的情况下。在相同的声明中指定高度可以减少这个问题：

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

• 如果您的网站需要以 4:3 或 16:9 的比率格式显示视频，那么这些视频可能无法正确调整大小。我们可以通过使用 HTML 中的包装器并设置正确的尺寸来解决这个问题，然后将视频拉伸以适应以下容器：

  <div class="wrapper-with-intrinsic-ratio">
     <div class="element-to-stretch"></div>
  </div>
  

  CSS 样式可能看起来像这样：

  .wrapper-with-intrinsic-ration {
    position: relative; height: 0;
    padding-top: 25px; /* to allow for the player chrome */
    padding-bottom: 56.25%  /* 9:16 = 0.5625 */
  }
  
  .element-to-stretch { position: absolute; top: 0; left: 0;
    width: 100%; height: 100%; background: teal; }
  

呼吁！当然有很多地方如果我们不小心就会被绊倒！让我们继续前进，看看我们可以用来帮助我们管理页面中媒体内容的几个技巧，首先是预加载图像的探讨。

使用预加载器减少延迟

在网页设计中，预加载内容不是一个新概念。其想法是减少在浏览器中查看页面所需的时间，因为一些（或全部）内容已经在查看页面之前被获取并缓存到浏览器中。

有许多使用 JavaScript（如www.createjs.com/#!/PreloadJS上的 PreloadJS）的示例。但这会给我们的页面增加额外的开销，我们可以避免，尤其是在响应式设计中。

相反，我们可以在适当的时候使用 CSS 来实现相同的效果，只要样式和图片被正确调用。这样，当我们在屏幕上渲染图片时，它们就会为我们准备好了。

注意

为了本演示的目的，我已经简化了代码，只关注预加载过程。

让我们通过一个简单的示例来看看预加载的实际应用：

1. 从本书附带的代码下载中，提取一个preloading.html的副本，然后将其保存在我们的项目文件夹中。

2. 接下来，从代码下载中提取img01.png到img04.png。这些图片应该放入我们项目文件夹中标记为img的子文件夹中。

3. 在一个新文件中，将以下样式添加到一个新的 CSS 样式表中。将其保存为preloading.css，位于项目文件夹中的css子文件夹内：

   html { font-family: Verdana, Arial, Helvetica, sans-serif; }
   body { margin: 60px auto 0; padding: 0; background-color: #606061; color: #ffffff; }
   img { border: none; padding: 10px; max-width: 100%;}
   p { font-size: 1em; margin: 0 0 1em 0; }
   #container { position: absolute; top: 0; left: 0; background-color: #18191d; width: 100%; height: 40px; }
   #container p { color: #ffffff; margin: 10px auto 0; text-align: center; width: 310px; }
   #preload { margin-left: auto; margin-right: auto; width: 900px; }
   
   body:before {
     content: url(../img/img01.png) no-repeat -9999px -9999px,
              url(../img/img02.png) no-repeat -9999px -9999px,
       url(../img/img03.png) no-repeat -9999px -9999px,
       url(../img/img04.png) no-repeat -9999px -9999px;
     display: none;
   }
   

在我们预览我们的工作之前，快速查看这个过程是如何工作的是有用的。关键是添加到 body 中的类，在我们在代码中稍后使用它们之前检索图片：

<body class="preload-images">
  <div id="container">
...
  <div id="preload">
    <img src="img/img01.png" alt="Image 01" />
...

如果我们预览我们的工作结果，我们将看到以下四张图片出现：

使用这种方法的美妙之处在于，我们不再需要使用另一个库，例如 PreloadJS。相反，现在我们可以选择在决定为不支持我们演示中使用的body:before技巧的旧浏览器提供支持时调用它。

让我们改变方向，看看硬币的另一面——懒加载。不，这并不是在周日早上起床（尤其是在前一晚玩得很晚之后）的一种形式（糟糕的笑话！），而是一种只在查看图片时加载和显示图片的方法。好奇吗？我将在我们下一个练习中揭示一切。

为我们的页面添加懒加载支持

响应式设计的主要目标之一应该是考虑任何可以用来减少我们页面整体加载时间的策略；这对于移动设备尤其如此。

到目前为止，你已经看到了我们如何预加载内容。在某些情况下，这可能不是理想的；相反，我们可以做相反的事情，直到我们准备查看内容时才加载内容：

这个过程被称为懒加载；它有效地将加载图片的焦点从前面（即在页面加载时）移到我们需要看到图片的时刻。为了说明这个过程，我们将使用 Bjørn Klinggard 的 bLazy 插件，可在dinbror.dk/blog/blazy/找到。这个库的伟大之处在于它轻量级，是用纯 JavaScript 编写的，因此没有依赖项！哦，我忘了——它也是响应式的。

让我们快速看一下一个演示（基于作者的原始作品），我们可以很容易地将其作为任何复杂响应式设计的起点：

1. 为了这个演示的目的，从本书附带的代码下载中提取lazy loading文件夹的副本。它包含我们演示所需的标记文件、图片、样式和 JavaScript。

2. 运行lazyloading.html文件。注意，为什么只有前几幅图片显示？如果我们向下滚动，我们可以看到绿色加载图片出现，下一幅图片在短暂延迟后出现。

   这个演示中的魔法集中在以下代码片段：

     <div class="wrapper ratio_big-img loading">
       <img class="b-lazy" src=img/placeholder.png data-src="img/big-bear7.jpg" data-src-small="img/small-bear7.jpg" alt="Lazy load images image7" />
     </div>
   

我们从一个占位符图片开始。在这个例子中，我们使用一个 1 像素的 PNG 文件，它可以很容易地转换为数据 URI 等效物，几乎没有开销。然后我们使用两个data-src标签，在窗口调整大小时在图片的小版本和大版本之间切换。

我们可以通过测试来确保图片确实只有在可见时才被加载。在这个例子中，使用 Firefox 的开发者工具栏，我们可以在控制台标签页中看到每个 URL 在查看时加载的情况，如下面的截图所示：

注意

一个需要注意的小点——在这个例子中，前面的截图显示了本地 Web 服务器的使用；无论图片是从文件系统还是通过 Web 服务器加载，原理都是相同的。

这个演示非常适合作为在网站上显示画廊效果的基座，尤其是在移动设备上查看时。稍作调整，我们甚至可以将其设置为显示基于视网膜的图片；尽管这将是留给你的一个挑战！让我们继续前进，讨论在设计响应式网站时的一个关键主题：为移动设备留出空间。

为移动设备留出空间

将视觉内容添加到我们的页面将使网站变得生动，但我们应该记住延迟时间的增加。延迟是移动设备上的主要杀手；例如，如果我们有一个 1MB 的页面，有 80 多个请求，加载页面可能需要超过 4 秒！

使用 JavaScript 在资源方面代价高昂。它需要时间，并且可能会阻塞页面的渲染。一个更好的替代方案是在需要时才加载资源。在桌面电脑上，这不太成问题，但对于移动设备来说变得至关重要。以谷歌的 Gmail 服务为例——使用这个原则将加载 JavaScript 的延迟从 2600 毫秒减少到仅仅 240 毫秒。考虑到这一点，让我们看看一些有用的提示，我们可以考虑它们以帮助减少在移动设备上混合响应式图片和视频的影响：

• 如果我们是为移动设备设计，确定我们的用户使用哪个平台是至关重要的。这将决定可以显示哪些内容。一种方法是我们可以使用懒加载（以媒体查询的形式）仅在需要时显示图片：

  // equivalent to 720px
  @media all and (min-width: 45rem) {
    body:after { content: 'desktop'; display: none; }
  }
  

  另一种方法鼓励条件加载，只加载必要的元素和样式：

  var size = window.getComputedStyle(document.body, ':after').getPropertyValue('content');
  if (size == 'desktop') {
  // load content here...
  }
  

  小贴士

  这些方法不需要导入任何额外的库。如果我们的网站已经代码密集，并且我们想要避免添加更多内容到我们的网站，这是理想的。然而，在现实中，我们可能会考虑使用类似 RequireJS 的东西来管理文件的导入，尽管这会带来 RequireJS 库的开销！

• 一个好的做法是仔细考虑页面上所有的元素是否真的对于一个可用的移动体验是必需的。检查那些社交媒体按钮。例如，一些可能比你想象的要大，虽然可以用更小、更轻的版本替换，但对于移动设备来说，完全不包括它们可能更合理。或者，考虑使用条件加载来加载较大的元素，而较小的元素可以自动加载。一个很好的替代方案是考虑使用 FontAwesome 图标而不是图片。这将有助于减少服务器需要加载的文件数量（参见下一点）。

• 考虑使用数据 URI（通过生成服务，如datauri.net/）或精灵/网络字体（如 Entype 或 FontAwesome）来代替图片。虽然数据 URI 或精灵可能不会使代码更小，但它们将减少对服务器的请求次数。使用网络字体也可以达到同样的效果；我们可以通过使用www.fontello.com上的 Fontello 服务构建自定义字体来更进一步。

• 如果你网站上使用视频，考虑在 YouTube 上托管它们。这将节省空间和带宽成本。此外，将有一个一致的格式，这减少了视频在移动设备上无法播放的风险。

• 在使用大尺寸、高质量图片时要小心——在移动设备上，当访客的数据使用量激增时，他们不会感谢你！有许多选项可以减少图片大小。我们将在本章后面查看两个这样的示例，它们使用 Node JS 自动调整图片大小和压缩。

  注意

  或者，如果你需要在高像素密度显示上显示图片，将大小加倍但增加压缩将有助于减少文件大小。要查看实际效果，请查看greatfridays.com/blog/images-in-responsive-web-development/上的教程。你能在 PayPal 演示中使用的两个图片之间看到任何质量上的差异吗？

• 总是设置视频在移动设备上显示海报图片而不是自动播放。有许多选项可以生成图片（包括可以自动化的），所以没有借口。我们将在本章后面看到一个示例，它可以很容易地调整以生成额外的图片作为海报。

• 一个有用的工具是页面可见性或网络 API。这看起来非常简单易行，但可以开启多种可能的用途。其中一种用途是在浏览器窗口未被显示时暂时关闭任何正在播放的视频；这将有助于降低带宽成本。

• 如果您的网站需要大量的矢量图像，您将使用 SVG 格式的文件获得更好的结果。这些实际上是 XML 文件，可以无损缩放。

足够的理论——让我们实际尝试这两条建议；我们可以手动完成它们，但我们可以利用任务运行器自动完成它们。好奇吗？我将解释一切，从查看创建我们选择的图片的响应式版本开始。

自动创建响应式图片

为任何网站提供内容的关键部分当然是图片。这在响应式网站上尤为重要，因为我们已经看到，需要多个版本的同一图片来提供流畅的响应式解决方案。

我们当然可以手动创建每个版本的图片，但这是 21 世纪：谁愿意（或者甚至有时间）手动创建不同大小的图片？肯定有更好的方法。您是对的：我们可以自动化整个过程。让我们看看如何使用 Node JS 任务运行器作为自动化过程的基础。

注意

这个练习被设计成独立运行；随着您越来越习惯使用 Grunt，这些原则可以轻松地应用到更大、更复杂的 Grunt 流程中。

让我们从安装 Node JS 开始：

1. 我们将首先浏览到nodejs.org/download/下载您平台上的最新版本。它适用于 Windows、Mac 和 Linux 平台。双击MSI 安装程序并运行向导，接受所有默认设置。

2. 从代码下载中，提取responseimg文件夹并将其保存在您的 PC 上。

3. 打开 Node JS 命令提示符，然后切换到responseimg文件夹，并运行以下命令来安装grunt-responsive-images：

   npm install
   
   

4. 这将安装grunt-responsive-images，以及依赖项和 Grunt；在这种情况下，我们正在使用grunt-simple-watch小程序自动监控我们的文件夹中的任何更改。

5. 在命令提示符下，切换到src文件夹，然后运行以下命令：

   grunt autoresize
   
   

6. 这将启动grunt-simple-watch插件以自动监控src文件夹中的更改。在这个例子中，我已经将单个 JPEG 图像放入了src文件夹，这也在下面的屏幕截图中有显示：

7. 任何放入src文件夹的图片都将被用来创建三个新的图片，如下面的屏幕截图所示：

自动化流程现在已准备好使用。我们可以将任意数量的 JPEG 图像放入文件夹中；对于放入文件夹中的每一张新图像，都会生成三张新图像。

小贴士

我们正在使用插件中指定的默认图像大小；这些大小可以在我们的gruntfile.js文件中的插件选项中轻松自定义。

自动化缩小过程

我们当然可以进一步开发这个自动化流程。阅读 Node 的能力以及检查一些广泛创建的插件，这些插件可以帮助自动化那些手动完成时不会增加任何价值的耗时流程，这绝对值得。

让我们看看扩展我们的自动化流程的一种方法。我们已经设置了一个创建图像的流程，但有一些图像可能没有压缩到它们可能达到的程度。我们可以通过添加对压缩的支持，使用grunt-contrib-imagemin插件来解决这个问题：

1. 打开gruntfile.js文件的副本。我们首先需要添加对grunt-contrib-imagemin插件的支持，所以请按照以下代码片段所示进行修改：

   files: ['src/*.jpg'],
   tasks: ['responsive_images', 'imagemin'],
   options: {
   

2. 接下来，修改代码以添加imagemin任务的代码块，如下代码片段所示：

     dest: '../responseimg/assets'
       }
    },
    imagemin: {
    jpg: { options: { progressive: false }, files: [{ expand: true, cwd: 'assets/', src: '*.jpg', dest: 'assets/', ext: '.jpg' }]
    }
   
   

3. 当在 Grunt 中运行任务时，我们需要告诉它加载grunt-contrib-imagemin插件，所以请按照以下代码行所示将其添加到gruntfile.js文件中：

   grunt.loadNpmTasks('grunt-responsive-images');
   grunt.loadNpmTasks('grunt-contrib-imagemin');
   
   

4. 我们需要进行最后一次修改，所以请按照以下代码行所示进行修改：

   grunt.registerTask('default', ['simple-watch']);
   
   

5. 打开 NodeJS 命令提示符并运行以下命令，将插件及其依赖项添加到package.json文件中：

   npm install grunt-contrib-imagemin --save-dev
   
   

6. 我们现在已准备好测试我们的 Grunt 包。在命令提示符中，将目录更改为项目文件夹，然后运行此命令：

   grunt
   
   

7. 如果一切顺利，我们将看到 Grunt 任务运行并成功生成三张新图像，然后这些图像将被压缩。

自动化流程现在已准备好使用。尽管我们只将一张图像通过这个过程，但在此阶段我们可以将许多图像通过这个过程。我建议运行一些测试来评估你可以安全同时处理多少图像，因为这将取决于你的 PC 或 Mac 的资源。

摘要

呼吁！我们确实在这个小空间里装了很多东西！让我们回顾一下本章所学的内容。我们从一个混合视频和图像内容的演示开始，最初是为了亲眼看到混合内容时遇到的一些问题，但后来是使用你学到的一些技巧和窍门来使页面具有响应性。

在观看演示后，我们开始考虑一些混合内容可能遇到的陷阱；我们看到了在过去几年中，响应式使用的显著增加，这使得我们的设计在各种平台上工作变得至关重要。我们介绍了一些我们可以用来在设计中为移动平台做出让步的技巧。

我们在章节的最后部分展示了两个使用 NodeJS 自动创建我们图像的不同版本并自动缩小它们的演示；这说明了我们如何自动化这个过程并节省大量的手动工作。

现在我们有了我们的内容，我们需要彻底测试它以确保它能在广泛的设备上正常工作。我们将在下一章中查看测试过程，探讨我们在处理响应式媒体时需要了解的一些考虑因素和陷阱。

第四章：测试响应式媒体

哎呀！我应该测试什么？iPad？iPhone？哪些 Android 设备？这些问题肯定已经在你脑海中浮现。别担心！本章将引导你了解一些真正酷炫的测试技术/方法。

测试是处理响应式媒体过程中的关键部分。我们需要在多种不同的浏览器、设备和平台上彻底测试我们的内容，以确保我们的网站发布到野外时不会遇到任何问题。

你可能会认为我们需要大量的专业技术——这离事实相差甚远！在本章中，我们将看到使用不同的浏览器或在线模拟器测试网站是多么容易。我们将探讨我们需要注意的一些考虑事项和陷阱，并看看我们如何可以轻松地改进那些运行不佳的网站。我们将涵盖以下主题：

• 考虑测试响应式媒体的陷阱

• 使用模拟器测试响应式网站

• 使用工具确定速度

• 通过一个理论上的速度缓慢示例进行测试

准备好了吗？让我们开始吧！

测试的起点

你已经创建了那个杀手级应用或网站，并准备好将其发布到野外...或者不是吗？

在我们将我们的作品发布到野外之前，我们需要对其进行彻底的测试。不用说，每个元素都需要进行测试，但像图片或视频这样的媒体需要特别注意。

如果一想到测试就会联想到需要大量自动化脚本、严格的检查和专业的软件，那么请重新考虑。最有用的工具就是我们已经拥有的——我们的浏览器！

当然，我们需要进行大量测试以确保我们的内容在各种不同的设备上都能良好工作。然而，我们的大部分测试可以在带有内置响应式设计功能的桌面浏览器中进行。它们并不完美，因此我们需要其他设施来补充我们的测试。让我们开始吧，先看看每个浏览器提供的响应式功能，从 Chrome 开始。

注意

应该注意的是，给出的命令适用于 Windows；对于 Mac 用户，我们用Cmd + Opt代替Ctrl + Shift。

使用 Google Chrome 或 Opera

对于测试响应式网站，Google Chrome 几乎是无敌的。它提供了最广泛的选择来帮助证明响应式网站的工作效果。

我们可以使用它来更改用户代理、更改屏幕分辨率，甚至测试视网膜启用设备；在 Chrome 中启用响应式设计模式就像按下Ctrl + Shift + I：

Opera 浏览器的浏览器几乎相同。响应式模拟器可以通过相同的方式启用，尽管一些选项的位置略有不同。

使用 Firefox

不甘示弱，Firefox 也拥有响应式设计模式；它比 Chrome 简单，但仍然具有实用功能。Firefox 的响应式设计视图可以通过按Ctrl + Shift + M键启用：

小贴士

尝试点击606 x 389（自定义）下拉菜单项并选择新值。Firefox 将自动调整视口大小到新尺寸；如果新屏幕尺寸更大，您需要调整浏览器窗口大小。

使用因特网浏览器

因特网浏览器在响应式设计方面采取了不同的方法。要获得最佳仿真选项，需要使用浏览器的最新版本，在撰写本文时是第 11 版。响应式仿真设置位于开发者工具栏中（按F12键启用此功能），然后切换到仿真选项卡以更改设置：

使用桌面浏览器进行测试的关键在于两个方面——它们将给出一个合理的近似值，说明您的网站在移动视图中的样子，并且应该仅作为测试的起点。真正的测试将在我们开始使用在线测试服务时到来。这些服务提供了同时测试多个设备的机会，尽管没有替代品！我们将在本章的使用在线工具测试响应式网站部分介绍这些服务的使用。

注意

可以考虑的一些替代方案

虽然大多数测试最好在线完成，但您可能还想考虑以下几种选项：Google Chrome 有一个更全面的浏览器插件，可以仿真许多在线测试服务。它可在www.dimensionstoolkit.com/找到。Adobe 发布了 Adobe Edge Inspect，它试图将您的本地开发网站与移动仿真器连接起来。它可通过 Apple iTunes 获取——更多详细信息可在html.adobe.com/edge/inspect/找到。

到目前为止，我们已经看到，唯一有效测试您网站的方法是手动进行，尽可能在广泛的浏览器和不同平台上进行。这并非没有陷阱。让我们花点时间考虑一些可能会让我们绊倒的陷阱，如果我们不小心测试我们的工作的话。

考虑响应式测试的陷阱

谁说测试总是容易的？这在大多数项目中都是如此，但在测试响应式网站时尤其如此。我们在整本书中一直专注于与响应式媒体一起工作，但我们可能会遇到的许多陷阱同样适用于网站层面，而不仅仅是图像或视频。以下列表为我们提供了一些这样的陷阱：

• 应该测试哪些设备？在某种程度上，这将取决于研究您的目标市场。但它应该是一个广泛的范围，包括 Android 和 iOS 设备以及流行的移动浏览器，如 Chrome、Opera Mini 和 Dolphin。

  我们显然不能测试每一款设备，因此使用 Google Analytics 对于确定应该使用的好设备范围至关重要。一个很好的例子是 Marriot 酒店，他们发现他们的移动网站揭示了主页显示的多个问题。修复这些问题在他们的响应式网站设计和构建中起到了关键作用。

  注意

  您可以在www.mobilemarketer.com/cms/news/software-technology/18494.html阅读关于 Marriot 进行的测试的完整文章。

• 您的客户想在移动设备上做什么？创建一个适用于所有设备和平台的无缝网站是正确的事情，还是应该根据移动用户请求的任务来划分功能？在移动平台上对提供的功能进行选择性展示，可以作为一个衡量真正响应式网站对用户有用性的指标。

• 速度测试至关重要。这将决定您的网站在良好的或差的 Wi-Fi 连接、4G、3G 和 EDGE 上的表现如何；所有这些都应该进行测试（尤其是 EDGE，如果您能找到的话！）。

• 您是否有同事、朋友或愿意参与的参与者可以帮助测试您的网站？他们是否有符合您测试计划的正确设备，以确保您已经覆盖了足够的设备？

  注意

  事实是，任何花费时间开发响应式内容的人都需要建立一个设备池。如果您独自工作，这可能需要一些时间；Brad Frost 提供了一些有用的建议，说明如何在不过度昂贵的情况下在真实设备上进行测试。您可以在bradfrostweb.com/blog/mobile/test-on-real-mobile-devices-without-breaking-the-bank/阅读他的评论。

• 在线有很多模拟器可以测试响应式网站，但它们的效果如何？这些将给您一个关于网站应该如何工作的感觉，但没有替代品可以替代在真实设备上的测试！

• 屏幕分辨率将扮演重要角色。在 1600 x 900 像素的桌面电脑上调整网站大小，在 Galaxy S4 的五英寸屏幕上看起来会不同，而与 4.7 英寸视网膜显示的苹果 iPhone 6 的 1334 x 750 像素屏幕相比，也会有所不同。不仅内容会显得更小，而且在视网膜设备上显示的图片也会不同。

• 您的网站上使用媒体查询意味着内容可能不在页面的同一位置，甚至可能不会显示。这导致测试时竞争不公平，使得自动化变得不可能，并导致手动努力和资源的成本增加。

• 设备之间的设计策略和方法会有所不同，这使得在一系列设备上保持一致的测试变得困难。例如，桌面上的悬停交互不会转移到移动设备上；一个设备上的链接在另一个设备上可能表现不同。这需要经验丰富的测试者的技能，以允许这些差异，并避免错误地应用测试，这会导致测试覆盖不足。

测试时的关键点是，没有任何东西是一成不变的。对一种设备或平台的测试并不总是可能与其他设备相同！这正是经验丰富的测试者的技能发挥作用的地方。最终，在广泛的不同设备上进行的测试水平将决定任何响应式网站的成功或失败。

使用在线工具测试响应式网站

我们已经看到，在大多数桌面浏览器中可以进行我们网站的初步测试，但这种方法有一个缺点。这些工具将设置为显示一组有限的屏幕尺寸，这将需要更新浏览器应用程序以反映任何更改。

为了加强我们的测试，我们可以使用众多在线模拟器之一。这有一个优点，即动态调整大小（通过改变浏览器窗口的大小），以及从众多预设尺寸中选择。虽然我们可能无法完美地模拟设备，但我们至少可以确保内容将在期望的尺寸下正确渲染。

以微软的网站为例——使用 ScreenFly 模拟器（可在www.quirktools.com/screenfly获取）查看时——设置为显示为摩托罗拉 RAZR V8，它在这个设备上 240 x 320 像素的显示区域内显示得非常完美：

该网站显然是响应式的——桌面版本的图片已经被调整大小和重新定位，菜单系统也被重新设计以适应移动显示。值得看看一些被设置的样式。还记得我们如何使用百分比的基本原则，而不是固定的em或rem（甚至像素）值吗？这里应用了同样的原则，即菜单下方的主要图片大小调整为其大小的166.5%。

我们可以通过在 DOM 检查器（如 Firebug）中快速查看来证明这一点：

注意截图中所突出的样式吗？这正是我们在第一章中讨论的“使用响应式图片”的一个完美例子。仅仅将我们的图片大小改为百分比，就能在很大程度上使网站变得响应式。尝试调整浏览器窗口大小，并注意在 DOM 检查器中值的变化。

相比之下，Packt Publishing 网站(www.packtpub.com)在相同的 ScreenFly 模拟器中显示：

在这个例子中，ScreenFly 被设置为模拟 800 x 600 像素的 Kindle Fire。该网站显然需要一些改进。图片没有响应式设计，导致页面顶部的巨幕无法完全显示。

有许多响应式模拟器可供使用。它们遵循非常相似的原则，尽管在设备尺寸方面可能比标准桌面浏览器更新，以下是一些可以尝试的替代方案：

• Mat Kersley 的简单响应式测试器，可以在mattkersley.com/responsive/找到

• Responsinator，可以在www.responsinator.com/找到

• Media Genesis 的 Responsive Design Checker，可以在responsivedesignchecker.com/找到

• OpenDeviceLab.com，可以在opendevicelab.com/找到

• Malte Wasserman 的 Viewport Resizer，可以在lab.maltewassermann.com/viewport-resizer/找到

• BrowserShots，可以在browsershots.org/找到

• BrowserStack，可以在www.browserstack.com/找到

一个好的网站是 Am I Responsive，可以在ami.responsivedesign.is找到——它同时显示了多个常见设备上的网站：

虽然内容看起来非常小，但我们至少可以与网站互动，以了解其工作方式，并开始看到可能需要改进的领域。最终，无论你的网站大小如何，如果它以蜗牛般的速度运行，那么它将使访客感到厌烦。幸运的是，我们可以轻松地查看我们运营的任何网站是否可能成为问题，作为调整元素以改进访问的前兆。

使用工具确定速度

有很多方法可以确定我们的网站运行缓慢——其中最知名的方法之一可能是雅虎的 YSlow，可以在developer.yahoo.com/yslow/找到。在下面的截图中，它是在 Firebug 中使用的：

YSlow 非常适合确定我们页面中哪些元素运行缓慢。它使用 Yahoo 卓越性能团队的研究成果，基于一系列规则来评估网站的性能是否符合其标准。

让我们看看如何使用它来检查一些知名网站是否可以改进。作为一个例子，我们将从将 YSlow 作为 Firefox 插件安装开始。

注意

此示例假设我们正在使用已安装 Firebug 的 Firefox；如果尚未安装，则可以从www.getfirebug.com下载并安装它。

安装 YSlow 有多种方式。包括使用书签工具、浏览器插件或直接从命令行工作。最方便的是浏览器插件，因此我们可以直接评估网站：

1. 让我们从浏览到developer.yahoo.com/yslow/并点击可用性下的Firefox来安装 Firefox 插件开始。

2. 到目前为止，请按照说明操作——插件使用 Firefox 插件的正常过程进行安装。

到目前为止，我们已经准备好开始使用 YSlow：

1. 浏览到www.microsoft.com并调整窗口大小以更小的尺寸；目的是模拟在较小设备上工作的外观。

2. 点击 Firebug 图标或转到查看 | Firebug，然后切换到YSlow选项卡。

3. 点击运行测试按钮以启动主要测试。这会运行一系列测试，然后生成其发现结果列表：

4. 我们对与图片相关的测试感兴趣，因此点击图片（2）以过滤结果。

现在我们已经看到了扫描的结果，让我们分析一些结果。

分析结果

以以下条目为例：

c.s-microsoft.com/en-gb/CMSImages/SpringPromo_LastFrameBG_1600x540_EN_US.jpg?version=250bf4d8-ad95-96e7-3b61-394b95449a92

这恰好是列表中的第一条；它是直接显示在菜单栏下面的主要条目：

这是一个如何未能通过 YSlow 测试的完美例子。原始图片已经被缩放，当在屏幕上渲染到 1366 x 461 px 时，这给服务器带来了额外的需求：

这看起来完全合理。缩小图片会对服务器产生额外的需求。

深入代码分析

等一下！这里有些东西不对劲。如果我们通过使用 Firebug 检查 CSS 样式来进一步挖掘，我们可以在以下屏幕截图中看到应用到的样式。在这个例子中，它是.hero .image .media和.hero .img video：

现在，有人注意到什么了吗？你们中那些目光敏锐的人应该已经注意到，这张图片在使用在线工具测试响应式网站部分中已经出现过了。在那里，我们注意到该网站看起来是响应式的——使用了动态百分比值，而不是固定值；这是我们希望在响应式网站上看到的。那么，问题是什么？为什么，即使使用了百分比值，YSlow 仍然报告了问题？

显示所有

好吧，为了找出原因，我们需要进一步挖掘在www.microsoft.com上使用的 CSS 文件。在 Firebug 的截图中，你注意到max-width的166.5%值吗？还有，这正在覆盖下面的100%的max-width值？这就是我们的第一个线索——在第一章，“使用响应式图像”中，我提到创建响应式图像的基本和最简单的方法是设置max-width值为100%。

它并非没有自己的怪癖，但将满足大多数需求——至少作为一个实现响应式行为的起点。那么，为什么我们有一个超过 50%的值呢？

这个问题的真正答案在于 CSS 文件。使用文本编辑器，如 Sublime Text，搜索它似乎显示已经使用了媒体查询。这是我们预期会看到的。但是，设计失败的地方在于图像在页面上的显示设置。

我们选择的图像只设置了一次。没有任何媒体查询被设置为在视口或浏览器窗口大小减小时用较小的图像替换图像——这就是问题所在！

修复问题

虽然我们显然无法更改代码，但我们至少可以找出解决问题的步骤：

1. 在 Firefox 中，右键单击图像并点击查看图像信息以查看属性。

   注意

   在这个练习中，我将假设你正在使用 Windows 上的 GIMP。如果你使用的是不同的包，请相应调整步骤。

   这张截图显示了在 Firefox 中将页面调整到可能的最小宽度：

   

2. 点击另存为…以在本地保存副本——名称不是关键；在图像编辑应用程序中打开它，例如 PhotoShop 或 GIMP。

3. 打开时，它将显示全尺寸，为1600px x 540px；导航到图像 | 缩放图像...并将新尺寸设置为475px x 160px。点击缩放以调整图像大小。

4. 接下来，转到文件 | 覆盖…以更新图像。在导出图像为 JPEG中，如果尚未设置为该值，请将质量比例推到100%。

5. 点击导出以完成过程——图像现在将被保存到新尺寸。

到目前为止，我们有一个更新的图像，通常会被上传到网站上。快速检查显示，它已从 96 KB 的庞大文件减小到 38 KB 的更合理大小。这使得它在我们的样式表中下载得更快。

当然，要真正完成它，我们还需要在我们的样式表中包含一个媒体查询，以便在视口适当调整大小时使用较小的图像，如下面的代码行所示：

@media screen and (max-width: 475px) {
....
  .hero.media img {
    background: url(<path and name of new file>) no repeat;
  ...
  }
}

这不仅意味着我们在减少需要下载的内容量，而且还在减少对服务器的需求，并有助于使网站的响应时间更加迅速——对所有相关方来说都是双赢！要实现这一点需要一点研究和规划。但一旦实施，它将显著减少制作我们媒体内容响应式所需的总体工作量。

摘要

网站测试是创建在线网站的关键步骤之一。这是我们确保图片和视频正确缩放以及内容在我们响应式网站上正确显示的机会。在本章中，我们探讨了我们应该如何测试响应式内容。让我们花点时间回顾一下我们学到了什么。

我们从查看最简单的测试形式开始，使用常规的桌面浏览器。我们了解到这将处理基本问题，但我们还可以使用能够同时模拟多个浏览器的在线服务来补充。

接下来，我们审视了一些响应式网站测试的陷阱；我们了解到最有效的方法是手动进行测试。存在太多不一致性，使得任何形式的自动化都变得困难。

快速推进，我们随后将注意力转向使用在线工具测试响应式内容——我们看到它们的工作方式与桌面浏览器的响应式功能类似，但可以提供更广泛的服务。然后，我们通过查看响应式网站的测试来结束本章。我们看到如何使用 YSlow 快速识别响应缓慢的元素；然后，我们通过一个理论示例来了解如果我们是网站所有者，会发生什么以及我们如何修复它。

呼！虽然这只是个简短的章节，但我们涵盖了很多内容！在下一章中，我们将探讨如何将本书中介绍的一些原则应用到像 WordPress 这样的 CMS 系统中。

第五章：使用框架

在本书中，我们介绍了一些技巧和窍门，我们可以使用它们将媒体添加到我们的响应式网站中，包括图片和视频。这些技巧很好，但在现实生活中它们是如何工作的呢？

让我们现在来回答这个问题。我们无法忽视三个流行框架的快速崛起，即 Less CSS、WordPress 和当然还有 Twitter 的 Bootstrap。这些被用于全球成千上万的网站中——这绝对不是可以忽视的！在本章中，我们将通过一些简单的示例来展示如何使用这些工具来应用我们在书中介绍的一些技术。

在接下来的几页中，我们将涵盖以下主题：

• 将响应式媒体添加到 CMS 中

• 在框架如 Twitter Bootstrap 中实现响应式媒体

• 使用 Less CSS 预处理器创建 CSS 媒体查询

准备好了吗？让我们开始吧！

介绍我们的三个示例

在本书中，我们介绍了一些简单实用的技术，用于使网站中的媒体响应式化——这些技术很好，但没有什么能比得上看到这些原则在实际应用中的使用，对吧？

绝对可以！为了证明这一点，我们将在本章中查看三个示例，使用您可能熟悉的这些技术：WordPress、Bootstrap 和 Less CSS。每个演示都将假设一定的先验知识，因此可能值得先阅读一下。在所有三种情况下，我们应该看到，只需付出很少的努力，我们就可以轻松地将响应式媒体添加到这些技术中的每一个。让我们从查看如何与 WordPress 一起工作开始。

将响应式媒体添加到 CMS 中

我们将首先通过查看流行的 WordPress 系统来开始我们的三个示例。WordPress 是在 2003 年创建的，从小型独立交易商到财富 500 强公司都使用它来托管网站——这包括一些商业界的最大名字，如 eBay、UPS 和福特。WordPress 有两种版本；我们感兴趣的是可在 www.wordpress.org 获取的自安装版本。

本示例假设您已经安装并运行了本地的 WordPress；如果没有，请访问 codex.wordpress.org/Installing_WordPress 并按照教程开始。如果您还没有安装，我们还需要一个 DOM 检查器，如 Firebug。如果您需要安装，可以从 www.getfirebug.com 下载。

注意

如果您只能访问 WordPress.com（WordPress 的另一种版本），那么本节中的一些提示可能不会工作，因为该版本的 WordPress 有局限性。

好的，假设我们已经设置了 WordPress 并让其运行，让我们开始制作上传的媒体响应式化。

手动添加响应式媒体

如果我们回顾一下第一章，使用响应式图片，我们会发现，在大多数情况下，只需简单地将 max-width: 100% 应用于我们希望响应式的任何图片就足够了。

到这个时候，你可能可能认为在 WordPress 中工作我们必须做一些复杂的事情，对吧？错误！只要您使用 Twenty Fourteen 核心主题，工作就已经为您完成了。

注意

对于这个练习以及接下来的章节，我将假设您已经安装并/或激活了 WordPress 的 Twenty Fourteen 主题。

你不相信我？很容易验证：尝试将图片上传到 WordPress 中的帖子或页面。调整浏览器窗口大小——你应该看到图片随着浏览器窗口大小的变化而缩小或增大。如果我们使用 DOM 检查器（如 Firebug）查看 WordPress 的内部结构，我们可以很容易地看到代码与第一章中的代码没有区别。

如果我们使用 Firebug 查看其他地方的代码，我们也可以看到针对许多 img 标签设置了 height: auto；这通常是为了响应式图片，以确保它们保持正确的比例。

响应式样式在 Twenty Fourteen 主题中似乎工作得很好；如果您使用的是较旧的主题，我们可以在使用该主题时轻松地将相同的样式规则应用于存储在 WordPress 中的图片。

解决响应式问题

到目前为止，一切顺利。现在，我们已经设置了 Twenty Fourteen 主题，上传了各种大小的图片，我们尝试调整浏览器窗口……却发现图片似乎在某个点以上不再增长大小。至少增长得不好——这是怎么回事？

嗯，这是一个经典的陷阱：我们讨论了使用百分比值来动态调整图片大小，结果却发现我们给自己挖了个坑（当然，是比喻意义上的！）原因？让我们深入探究，以下步骤将帮助我们找到答案：

1. 浏览到您的 WordPress 安装并使用 F12 激活 Firebug。

2. 切换到 HTML 选项卡并选择您喜欢的图片。

3. 在 Firebug 中，查找 <header class="entry-header"> 行，然后在窗口右侧的渲染样式中查找以下行：

   .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
       margin: 0 auto; max-width: 474px; 
   }
   

4. 眼尖的你们中应该能立刻发现问题——我们使用百分比来使每个图片的大小动态变化，但我们却限制了其父容器！为了解决这个问题，按照指示更改高亮行：

   .site-content .entry-header, .site-content .entry-content, .site-content .entry-summary, .site-content .entry-meta, .page-content {
    margin: 0 auto; max-width: 100%;
   }
   

5. 为了平衡内容，我们需要对评论区域做同样的修改。所以，请按照以下方式将 max-width 更改为 100%：

   .comments-area { margin: 48px auto; max-width: 100%; padding: 0 10px; }
   

6. 如果我们现在尝试调整浏览器窗口大小，我们应该看到图片大小会自动调整。

在这个阶段，更改不是永久的。为了解决这个问题，我们需要登录到 WordPress 的管理区域，转到外观 | 编辑器，并在样式表（style.css）文件的底部添加调整后的样式。

让我们继续。有人注意到这里使用的方法有两个相当关键的问题吗？希望你已经注意到，如果使用大图像并将其调整到更小的尺寸，我们仍在处理大文件。我们正在进行的更改对主题有很大的影响，尽管这只是一个小改动。即使它证明了我们可以使图像真正响应式，但这种改变在没有仔细考虑和大量测试的情况下，我们可能并不想进行。

我们可以改进这一点。然而，直接对 CSS 样式表进行更改并不是最佳选择；在升级到主题的新版本时，这些更改可能会丢失。我们可以通过使用自定义 CSS 插件来管理这些更改，或者（更好）使用一个插件，告诉 WordPress 在调整窗口大小到更小尺寸时自动将现有图像替换为小图像。

使用插件添加响应式图像

然而，使用像 Twenty Fourteen 这样的主题的一个缺点是图像的调整大小。虽然我们可以在调整浏览器窗口大小时增大或缩小图像，但我们实际上仍然在技术上改变了一个可能是不必要的大图像的大小！

这被认为是不良的做法（而且也是不礼貌的！）——在具有快速互联网连接的桌面浏览器上浏览可能不会产生太大的影响；对于移动设备来说，情况就不同了，我们选择的空间更小。

为了克服这个问题，我们需要采取不同的方法——让 WordPress 在达到特定大小或断点时自动替换较小的图像。而不是手动使用代码来做这件事，我们可以利用许多提供响应式功能的插件之一。

我感觉一个演示即将到来。现在是查看这样一个插件在行动中的好时机：

1. 让我们从下载我们的插件开始。在这个练习中，我们将使用 Kyle Ricks 的PictureFill.WP插件，该插件可在wordpress.org/plugins/picturefillwp/找到。我们将使用使用Picturefill.js版本 2 的版本。这可以从github.com/kylereicks/picturefill.js.wp/tree/master下载。点击下载 ZIP以获取最新版本。

2. 登录到您的 WordPress 安装的管理员区域，点击设置然后点击媒体。确保您的缩略图、中等和大尺寸的图片设置已设置为与您的设计中有用的断点相匹配的值。

3. 然后，我们需要安装这个插件。在管理员区域，转到插件 | 添加新插件来安装插件，并按正常方式激活它。

   到目前为止，我们已经在 WordPress 中安装了响应式功能——所有操作都由插件自动管理；无需更改任何设置（除非可能需要更改我们在步骤 2 中提到的图像大小）。

4. 切换回 WordPress 前端，尝试将屏幕大小调整为更小。

5. 按 F12 激活 Firebug 并切换到 HTML 选项卡。

6. 按 Ctrl + Shift + C（或 Mac 用户的 Cmd + Shift + C）切换元素检查器；将鼠标移至调整大小的图像上。

7. 如果我们在 WordPress 管理区域设置了正确的图像大小，并且窗口大小调整正确，我们可以期待看到以下截图所示的内容：

8. 为了确认我们确实使用了一个较小的图像，右键单击图像并选择查看图像信息；它将显示类似于以下截图的内容：

我们现在应该在 WordPress 安装中拥有一个完全功能的插件。一个好的建议是彻底测试它，至少要确保我们在 WordPress 中设置了正确的断点大小！

注意

如果 WordPress 没有正确刷新我的缩略图图像会发生什么？

这可能会发生。如果你发现这种情况，获取并安装 Regenerate Thumbnails 插件来解决这个问题；它可在wordpress.org/plugins/regenerate-thumbnails/找到。

使用插件添加响应式视频

现在我们可以在 WordPress 中添加响应式图像了，让我们把注意力转向视频。添加它们的流程稍微复杂一些；我们需要使用代码来实现最佳效果。让我们看看我们的选项。

如果你自己托管视频，最简单的方法是添加一些额外的 CSS 样式规则。虽然这种方法消除了对 JavaScript 或 jQuery 的依赖，但结果并不完美，需要额外的样式来处理播放按钮覆盖层的重新定位。

注意

虽然我们正在本地工作，但我们应记住本章前面的注意事项；当升级时，CSS 样式表中的更改可能会丢失。如果可能，应使用自定义 CSS 插件来保留任何更改。

要使用纯 CSS 解决方案，只需要几个步骤：

1. 浏览到你的 WordPress 主题文件夹，并在你选择的文本编辑器中打开styles.css的副本。

2. 在文件末尾添加以下行并保存：

   video { width: 100%; height: 100%; max-width: 100%; }
   .wp-video { width: 100% !important; }
   .wp-video-shortcode {width: 100% !important; }
   

3. 关闭文件。你现在已经为响应式视频打下了基础。

在这个阶段，你可能正在想，“太好了，我的视频现在已经是响应式的了。我可以自己处理播放按钮覆盖层的重新定位，没问题”；听起来很对？

想象一下，这就是这种方法的主要缺点！重新定位覆盖层不应该太难。真正的问题是硬件和带宽的高成本，这是为了托管任何合理质量的视频所必需的，即使我们花费时间重新定位覆盖层，高成本也会超过使用纯 CSS 解决方案的任何好处。

一个更好的选择是让像 YouTube 这样的服务为你完成所有艰苦的工作，并直接将你选择的视频从 YouTube 嵌入到你的页面中。这样做的主要好处是 YouTube 的服务器为你完成了所有艰苦的工作。你可以利用更大的观众群体，YouTube 会自动优化视频，以适应你的访客所使用的互联网连接的最佳分辨率。

注意

虽然面向初学者，但 wpbeginner.com 有一个有用的文章，位于www.wpbeginner.com/beginners-guide/why-you-should-never-upload-a-video-to-wordpress/，讨论了为什么不建议自行托管视频以及使用外部服务的优点。

使用插件嵌入视频

将外部服务中的视频嵌入到 WordPress 中，讽刺的是比使用 CSS 方法简单得多。有数十个插件可以实现这一功能，但其中最简单易用（也是我个人最喜欢的）是 Todd Motto 的 FluidVids，可在github.com/toddmotto/fluidvids/找到。

要在 WordPress 中使其工作，我们需要遵循以下步骤，以 YouTube 的视频作为我们的示例基础：

1. 浏览到你的 WordPress 主题文件夹，并在你常用的文本编辑器中打开functions.php的副本。

2. 在底部，添加以下几行：

   add_action ( 'wp_enqueue_scripts', 'add_fluidvid' );
   
   function add_fluidvid() {
     wp_enqueue_script( 'fluidvids', get_stylesheet_directory_uri() . '/lib/js/fluidvids.js', array(), false, true ); 
   }
   

3. 保存文件，然后登录到你的 WordPress 安装的管理员区域。

4. 导航到文章 | 新建文章来添加文章，然后切换到你的文章编辑器的文本标签页，然后将www.youtube.com/watch?v=Vpg9yizPP_g&hd=1添加到页面上的编辑器中。

5. 点击更新以保存你的文章，然后点击查看文章以查看视频的实际效果。

没有必要进一步配置 WordPress——任何从 YouTube 或 Vimeo 等服务添加的视频都将自动由 FluidVids 插件设置为响应式。此时，尝试调整浏览器窗口的大小。如果一切正常，我们应该看到视频的大小会根据浏览器窗口的调整而缩小或增大：

为了证明代码正在工作，我们可以在 Firebug 中查看编译结果。我们将看到类似于以下截图的内容：

对于那些不太勇敢的人来说（!），幸运的是有一个 WordPress 插件可以实现相同的效果，无需配置。它可在 wordpress.org/plugins/fluidvids/ 找到，并可以使用 WordPress 插件的正常流程下载和安装。

让我们改变轨道并继续我们的下一个演示。我感觉有必要做一些编码，所以让我们看看我们如何在 Bootstrap 等框架中实现响应式图片。

在 Bootstrap 中实现响应式媒体

一个问题——作为开发者，如果你没有听说过 Bootstrap，请举手？很好——没有太多的人放下手

你为什么问这个问题，你可能会问？简单——这是为了说明在流行的框架（如 Bootstrap）中，很容易为媒体添加基本响应式功能，如图片或视频。具体过程可能因框架而异，但结果可能非常相似。为了说明我的意思，让我们看看使用 Bootstrap 进行我们的第二个演示，我们将看到添加图片和视频到我们的 Bootstrap 网站是多么容易。

注意

如果你想要探索一些可用的免费 Bootstrap 模板，那么 www.startbootstrap.com/ 值得一看！

使用 Bootstrap 的 CSS 类

在 Bootstrap 中使图片和视频响应式，与我们之前检查的方法略有不同；这仅仅是因为我们不必显式地定义每个样式属性，而是只需为媒体 HTML 添加适当的类，以便它能够响应式渲染。

为了这个演示的目的，我们将使用 Blog 页面示例的编辑版本，可在 www.getbootstrap.com/getting-started/#examples 找到；本书附带的代码下载中有一个编辑版本的副本。在我们开始之前，请先下载 Bootstrap 示例文件夹的副本。在里面，你可以找到需要的 CSS、图片和 JavaScript 文件，以及我们的 HTML 标记文件。

现在我们有了文件，以下是我们将在演示过程中实现的效果的截图：

让我们按照以下步骤开始我们的示例：

1. 打开 bootstrap.html 并查找以下行（在第 34 行到第 35 行附近）：

       <p class="blog-post-meta">January 1, 2014 by <a href="#">Mark</a></p>
         <p>This blog post shows a few different types of content that's supported and styled with Bootstrap. Basic typography, images, and code are all supported.</p>
   

2. 立即下面，添加以下代码——这包含我们嵌入视频的标记，使用 Bootstrap 的响应式 CSS 样式：

   <div class="bs-example">
     <div class="embed-responsive embed-responsive-16by9">
       <iframe allowfullscreen="" src="img/zpOULjyy-n8?rel=0" class="embed-responsive-item"></iframe>
     </div>
   </div>
   

3. 现在视频已经设置了样式，让我们继续添加一张图片——这张图片将放在右侧的关于部分。查找以下行，在第 74 行或第 75 行附近：

       <h4>About</h4>
         <p>Etiam porta <em>sem malesuada magna</em> mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.</p>
   

4. 立即下面，添加以下标记来表示我们的图片：

   <a href="#" class="thumbnail">
     <img src="img/350x150" class="img-responsive">
   </a>
   

5. 保存文件并在浏览器中预览结果。如果一切顺利，我们可以看到我们的视频和图片出现，就像我们在演示开始时看到的那样。

在这一点上，尝试调整浏览器的大小——你应该会看到视频和占位图随着窗口大小的调整而缩小或增大。然而，Bootstrap 的伟大之处在于，每个类都已经设置了正确的样式。我们只需要将正确的类应用到适当的媒体文件上——对于视频是.embed-responsive embed-responsive-16by9，对于图片是.img-responsive——这样图片或视频就能在我们的网站上响应式地表现。

小贴士

在这个例子中，我们在代码中使用了 Bootstrap 的.img-responsive类；如果我们有很多图片，我们可以考虑使用img { max-width: 100%; height: auto; }代替。

到目前为止，我们已经以 WordPress 和 Bootstrap 这两种流行的框架为例进行了工作。这很好，但这可能意味着我们需要处理大量的 CSS 样式，尤其是如果我们正在使用媒体查询，就像我们在本书前面看到的那样！我们能做些什么吗？当然可以！是时候简要地看看 CSS 预处理以及它是如何帮助我们向页面添加响应式媒体的了。

使用 Less CSS 创建响应式内容

与框架一起工作通常意味着我们需要处理大量的 CSS 样式；如果我们不小心，这可能会变得难以管理！为了帮助解决这个问题，并且为了我们的第三个场景，我们回到基础，使用 Less CSS 预处理语言以不同的方式渲染 CSS。

为什么？因为作为 CSS 的超集（或扩展），Less 允许我们更高效地编写样式；然后将其编译成有效的 CSS。本例的目的是展示如果你已经在使用 Less，那么我们仍然可以应用本书中涵盖的相同原则，使我们的内容具有响应性。

小贴士

应该注意的是，这个练习假设您有一定的 Less 使用经验；如果您是第一次使用，您可能想阅读 Packt 出版社的我的书《Learning Less》。

为了理解我的意思——让我们重新设计第三章中的响应式演示“第三章：混合内容”，其中我们混合了视频和图片，用 Less 代替了常规 CSS。进行这些更改将涉及几个步骤，所以下面的截图可以提前让我们了解完成后的样子：

等一下！你们中那些敏锐的人可能会注意到这个版本和第三章中的版本“第三章：混合内容”之间没有什么不同。

你是对的。如果我们玩得得体，确实不应该有任何外观上的变化；使用 Less 的全部内容都是关于更高效地编写 CSS。让我们看看涉及的内容：

1. 我们将首先从本书附带的代码下载中提取 Less CSS 示例的副本——在里面，我们会找到我们需要的 HTML 标记、重置样式表、图片和视频。将文件夹保存在您的 PC 上本地。

2. 接下来，在新的文件中添加以下样式，并将其保存为css子文件夹中的responsive.less——我们将从一些基本元素（如视频和横幅）的样式开始：

   #wrapper {width: 96%; max-width: 45rem; margin: auto; padding: 2%}
   #main { width: 60%; margin-right: 5%; float: left }
   #video-wrapper video { max-width:  100%; }
   #banner { background-image: url('../img/abstract-banner-large.jpg'); height: 15.31rem; width: 45.5rem; max-width: 100%; 
   float: left; margin-bottom: 15px; } 
   #skipTo { display: none; li { background: #197a8a }; }
   
   p { font-family: "Droid Sans",sans-serif; }
   aside { width: 35%; float: right; }
   footer { border-top: 1px solid #ccc; clear: both; height: 30px; padding-top: 5px; }
   

3. 我们需要为图片和链接添加一些基本的格式化样式，所以请立即在#skipTo规则下方添加以下内容：

   a { text-decoration: none; text-transform: uppercase }
   a, img { border: medium none; color: #000; font-weight: bold; outline: medium none; }
   

4. 接下来是我们的页面导航。这些样式控制主要导航和当在较小设备上查看时出现的跳转到…链接。请立即在a和img的规则下方添加这些样式规则：

   header { 
     font-family: 'Droid Sans', sans-serif; 
     h1 { height: 70px; float: left; display: block; font-weight: 700; font-size: 2rem; }
     nav { 
       float: right; margin-top: 40px; height: 22px; border-radius: 4px; 
       li { display: inline; margin-left: 15px; }
       ul { font-weight: 400; font-size: 1.1rem; }
       a { 
         padding: 5px 5px 5px 5px; 
         &:hover { background-color: #27a7bd; color: #fff; border-radius: 4px; }
         }
       }
     }
   

5. 我们需要添加控制较小设备显示的媒体查询，所以请在新文件中添加以下内容，并将其保存为css子文件夹中的media.less。我们将从设置媒体查询的屏幕尺寸开始：

   @smallscreen: ~"screen and (max-width: 30rem)";
   
   @media @smallscreen {
     p { font-family: "Droid Sans", sans-serif; }
   
       #main, aside { margin: 0 0 10px; width: 100%; }
       #banner { margin-top: 150px; height: 4.85rem; max-width: 100%; background-image: url('../img/abstract-banner-medium.jpg'); width: 45.5rem; }
   

6. 接下来是处理我们调整大小窗口顶部跳转到…链接的媒体查询规则：

       #skipTo {
         display: block; height: 18px;
         a { 
           display: block; text-align: center; color: #fff; font-size: 0.8rem;
           &:hover { background-color: #27a7bd; border-radius:0; height: 20px }
         }
       }
   

7. 我们不能忘记主要导航，所以请立即在#skipTo的代码块下方添加以下行：

       header {  
         h1 { margin-top: 20px }
         nav { 
           float: left; clear: left; margin: 0 0 10px; width: 100%; 
           li { margin: 0; background: #efefef; display: block; margin-bottom: 3px; height: 40px; }
           a {
             display: block; padding: 10px; text-align: center; color: #000; 
             &:hover {background-color: #27a7bd; border-radius: 0; padding: 10px; height: 20px; }
           }
         }
       } 
     }
   

在这一点上，我们应该在预览我们工作的结果之前编译 Less 样式表。如果我们在一个浏览器中启动responsive.html，我们会看到我们的模拟投资组合页面出现，就像我们在练习开始时看到的那样。如果我们调整屏幕到其最小宽度，其响应式设计就会启动，对屏幕上的元素进行重新排序和调整大小，正如我们所期望的那样。

好的，那么我们现在有一个使用 Less CSS 进行样式的响应式页面；它仍然看起来代码很多，对吧？

详细分析代码

虽然对于这样一个简单的页面来说，代码似乎很多，但我们所使用的原则实际上非常简单，并且是我们之前在书中已经使用过的。你还不信？那么，让我们更详细地看看——这本书的重点是响应式图片和视频，所以我们将从视频开始。

打开responsive.css样式表，查找#video-wrapper视频类：

#video-wrapper video { max-width:  100%; }

注意它被设置为max-width值为100%？我们之前在第二章中使用了max-width来样式化原始视频，添加响应式视频内容。这里没有不同。诚然，我们不想将大视频调整到非常小的尺寸——我们会使用媒体查询来替换为更小的版本。但是，对于大多数用途，max-width应该是足够的。

现在，对于图片，这稍微复杂一些，但它仍然使用了我们在第一章中应用的原则，处理响应式图片。让我们从responsive.less中的代码开始：

#banner { background-image: url('../img/abstract-banner-large.jpg'); height: 15.31rem; width: 45.5rem; max-width: 100%; 
float: left; margin-bottom: 15px; }

在这里，我们再次使用了max-width值，就像我们在第一章中做的那样，与响应式图片一起工作。在这两种情况下，我们可以直接对元素进行样式化，而与视频不同，我们必须添加一个容器才能对其进行样式化。这种主题在media.less中的媒体查询设置中继续：

@smallscreen: ~"screen and (max-width: 30rem)";
@media @smallscreen {
  ...
  #banner { margin-top: 150px; background-image: url('../img/abstract-banner-medium.jpg'); height: 4.85rem; width: 45.5rem; max-width: 100%; }
  ...
}

在这种情况下，我们正在对元素进行样式化，以覆盖视口的宽度，这与我们在第三章中做的方式完全相同，混合内容。

值得注意的是，你可能会问为什么我们在对图片进行样式化时使用rem值而不是百分比值？这是一个好问题——关键在于，当使用像素值时，这些值在响应式设计中扩展得不好。然而，rem值扩展得非常好；如果我们愿意，我们可以使用百分比值，尽管它们最适合于我们需要填充只覆盖屏幕一部分的容器的实例（就像我们在本演示的视频中做的那样）。

注意

一篇有趣的文章赞扬了我们使用 rem 单位的好处，可在techtime.getharvest.com/blog/in-defense-of-rem-units找到——值得一读。特别值得注意的是，在 Mobile Safari 中使用 rem 值的一个已知问题，在为移动平台开发时应予以考虑；鉴于所有可用的 iPhone，其使用率可以说高于 Firefox！更多详情请访问wtfhtmlcss.com/#rems-mobile-safari。

转移到生产使用

在整个练习中，我们使用 Less 实时编译我们的样式。这对于开发目的来说是可行的，但不建议用于生产。一旦我们确定了网站所需的样式，我们应该始终考虑在将结果上传到我们的网站之前将它们预编译成有效的 CSS。

有许多选项可用于此目的；我个人的两个最喜欢的选项是 Crunch!，可在www.crunchapp.net找到，以及 Sublime Text 的 Less2CSS 插件，可在github.com/timdouglas/sublime-less2css找到。

注意

你可以从我的新书《Learning Less.js》中了解更多关于预编译 Less 代码的信息，由 Packt Publishing 出版。

摘要

哇！我们确实覆盖了很多内容；这表明给媒体添加基本响应式功能并不困难。让我们花点时间回顾一下你学到了什么。

我们以介绍三个现实场景开始了这一章，然后我们将覆盖这些场景。我们的第一个场景是使用 WordPress。我们介绍了虽然我们可以添加简单的 CSS 样式来使图片和视频响应式，但首选的方法是使用可用的几个插件来实现相同的结果。

我们接下来的场景是访问了一个非常熟悉的框架，即 Twitter Bootstrap。相比之下，我们发现这个框架更容易与之合作，因为样式已经被预定义，我们所需做的只是将正确的类添加到正确的选择器上。

我们的第三个也是最后一个场景完全相反，是关于使用 Less CSS 预处理器来处理我们本应手动创建的样式。我们看到了如何轻松地将我们在本章早期创建的样式进行重构，以生成一个更简洁、更高效的版本，该版本编译成有效的 CSS 而且设计上没有明显变化。

好吧，我们现在已经到达了这本书的结尾；所有美好的事物最终都必须结束！尽管如此，我希望你阅读这本书的乐趣和我写作这本书的乐趣一样多。希望我已经展示了将响应式媒体添加到您的网站并不需要像最初看起来那么复杂，并且这为您使用响应式媒体开发更复杂的东西提供了一个良好的基础。