HTML5-和-CSS3-响应式-Web-设计基础知识-全-

HTML5 和 CSS3 响应式 Web 设计基础知识（全）

原文：zh.annas-archive.org/md5/6BE1B3E0ACB9970B0544073BF4F3CB81

译者：飞龙

协议：CC BY-NC-SA 4.0

前言

一个问题——你拥有可以访问互联网的设备有多少个？

作为用户，我敢打赌答案很可能是相当多的；这包括智能电视、手机等等。作为开发者，我们需要为多个设备提供用户体验。欢迎来到响应式设计的世界！

响应式设计不仅仅是为了创造出色的用户体验，而且要在多种不同的设备上运行良好，从简单的在线订票流程到庞大的电子商务系统。在本书中，你会看到很多提示，并不需要对你现有的开发方法进行大幅度的改变。在许多情况下，只需要做一些简单的改变就可以开始构建响应式网站。

创建响应式网站可以为你打开一个真实的机会世界；在本书中，我将向你介绍设计响应式时需要了解的基本要素，并为你提供示例和大量提示，帮助你开始创建响应式设计。

你准备好开始了吗？希望答案是肯定的。如果是的话，让我们开始吧。

本书涵盖的内容

第一章，“介绍响应式网页设计”，开启了我们进入响应式设计世界的旅程，介绍了这个概念的基础；我们探讨了在当今环境中响应式网页设计的重要性，并解释了它作为一个概念是如何运作的。

第二章，“创建流式布局”，着眼于创建灵活的网格布局作为我们设计过程的关键元素；我们探讨了使用它们的好处，并且看了一些使用预先构建样式创建示例。

第三章，“添加响应式媒体”，指导我们如何使我们的媒体具有响应性。我们介绍了一些可用的技巧，并探讨了为什么在某些情况下，最好是外部托管内容（如视频）以节省带宽成本！

第四章，“探索媒体查询”，带领我们探索媒体查询以及如何使用它们来控制特定屏幕宽度设置下显示的内容。我们介绍了创建断点的基础知识，并探讨了为什么这些断点应该基于我们设计中内容断开的位置，而不仅仅是为了支持特定设备。

第五章，“测试和优化性能”，结束了我们对响应式网页设计基本要点的探索，着眼于如何测试和优化我们的代码以提高效率。我们探讨了页面加载缓慢的一些原因，如何衡量我们的性能，并理解为什么即使相同的技巧可以应用于任何网站，但在设计响应式时更加重要。

本书所需的内容

在本书中，大多数示例所需的只是一个简单的文本或代码编辑器、一个互联网浏览器和互联网访问。许多演示使用谷歌浏览器，所以如果你安装了谷歌浏览器，那就最理想了；其他浏览器也可以使用，尽管可能会有一些情况需要相应调整步骤。

本书适合对象

本书适用于熟悉 HTML5 和 CSS3 的前端开发人员，但希望了解响应式网页设计的基本要素。为了充分利用本书，你应该对 HTML 和 CSS3 有很好的了解；JavaScript 或 jQuery 并不是运行本书演示或理解代码所必需的。

惯例

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

文本中的代码单词、数据库表名、文件夹名、文件名、文件扩展名、路径名、虚拟 URL、用户输入和 Twitter 用户名显示如下：“继续提取coffee.html的副本并保存到我们的项目区域。”

代码块设置如下：

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

当我们希望引起您对代码块的特定部分的注意时，相关行或项目会以粗体显示：

@media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (orientation : landscape)

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

注意

警告或重要提示会显示在这样的框中。

提示

提示和技巧会显示为这样。

第一章：介绍响应式网页设计

网页设计的概念曾经很简单——设计师会为流行的桌面屏幕开发内容，使用适用于大多数设备的布局，以产生布局良好、连贯的页面。

随着技术的变化和移动设备的引入，整个体验发生了变化——静态布局的时代已经过去。取而代之的是需要对可用屏幕房地产做出响应的内容，元素会根据所使用的设备自动调整大小或隐藏。这构成了 Ethan Marcotte 所推广的一种技术的基础，我们现在称之为响应式网页设计（RWD）。在本章的课程中，我们将开始探索这意味着什么，并了解一些对这个概念至关重要的原则。

在本章中，我们将涵盖以下主题：

• 开始使用 RWD

• 了解 RWD 的元素

• 了解 RWD 的重要性

• 探索 RWD 的工作原理

• 建立开发工作流程

• 探索最佳实践和常见错误

好奇吗？让我们开始吧！

开始使用 RWD

如果要用一句话描述 RWD，那么响应式设计描述了内容如何在各种屏幕和设备上显示，如手机、平板电脑、大屏手机或台式电脑。要理解这意味着什么，让我们以水为例。水的性质是它会取决于被倒入的容器的形状。这是一种方法，即网站或网页根据屏幕的大小或分辨率动态调整其布局。这确保用户在使用网站时获得最佳体验。

我们开发一个单一的网站，使用单一的代码库。这将包含流体、灵活的图像，比例为基础的网格，流体图像或视频和 CSS3 媒体查询，以适应多个设备和设备分辨率。使它们工作的关键是使用百分比值，而不是像素或基于 ems 的固定单位大小。

最好的部分是，我们可以在不需要服务器端/后端解决方案的知识或需求下使用这种技术；要看它的效果，我们可以使用 Packt 的网站作为例子。继续浏览www.packtpub.com/web-development/mastering-html5-forms；这是我们将在桌面视图中看到的内容：

在较小的设备上查看同一网站的移动视图如下所示：

我们可以清楚地看到相同的核心内容被显示出来（即书的图片、购买按钮、定价详情和关于书的信息），但菜单等元素已经转变为位于左上角的单个下拉菜单。这就是 RWD 的全部意义——产生一个灵活的设计，根据我们选择使用的设备进行调整，以适应所使用设备的格式。

让我们尝试另一个技术网站；我相信你们中的一些人熟悉 A List Apart 网站（托管在alistapart.com，由著名的 Jeffery Zeldman 创立）：

尝试调整浏览器窗口大小。这是一个完美的例子，说明一个简单的文本网站如何在最小的改变下重新排列内容；在文本菜单的位置，我们现在有了汉堡图标（我们将在本章后面介绍）：

虽然这个网站的文本重新排列起来并不困难，但似乎顶部的图像效果不太好——它没有随着变化而调整大小，因此在较小的设备上会显得被切掉。

尽管这可能看起来是一个复杂的任务，但实际上归结为遵循一些简单的原则；这些原则的实施最终将决定我们网站的成功。我们已经看到一些在 Packt 和 A List Apart 网站上以不同尺寸使用的原则——让我们花点时间来探讨响应式设计的原则，以及为什么它是创建现代互联网网站的重要部分。

探索 RWD 的工作原理

对于一些人来说，我们现在所知的 RWD 的创作通常与 Ethan Marcotte 有关，尽管它的真正起源可以追溯到更早的时候，当时 Audi.com 网站首次创建时，由于当时 IE 的限制，它具有自适应的视口区域。

如果必须描述 RWD 是什么，那么 Ethan 完美地总结了它：

与将不同的设计分别适应不断增加的网络设备不同，我们可以将它们视为同一体验的不同方面。我们可以设计出最佳的观看体验，但将基于标准的技术嵌入到我们的设计中，使其不仅更灵活，而且更适应呈现它们的媒体。简而言之，我们需要实践响应式网页设计。

简而言之，RWD 是关于在不同设备上为客户呈现一种允许他们与您的业务互动的体验。但需要注意的是，体验不必使用相同的流程；更重要的是客户能够达到相同的结果，即使他们可能是通过不同的途径到达的。那么，RWD 是如何工作的呢？

RWD 是我们应该遵循的一套原则，但最重要的理念是使内容流动起来。固定值已经消失，至少对于页面上的元素来说；取而代之的是使用百分比值或 em/rem 单位。我们的页面布局将使用流动网格，根据可用的视口空间自动调整大小。

将有助于确定我们网站成功的一个关键概念并不是我们自动与响应式设计联系在一起的，但它仍然会有所帮助：神圣比例。

神圣比例，或者通常所说的黄金比例，是一种定义美学上令人愉悦的比例的方法——它非常适合设置响应式布局的正确比例。其中的诀窍是使用这个公式：

想象一下，我们有一个宽度为 960px 的布局，我们想将其分成两部分，称为a和b。神圣比例规定a的大小必须是b的 1.618 倍。

为了得到我们的列宽，我们必须完成以下计算：

1. 将我们网站的宽度（960px）除以 1.618。这给出了 593px（四舍五入到最接近的整数）。

2. 从 960px 中减去 593px。这给出了 367px。

这是一个简单的公式，但它将有助于改善您网站上内容的传达——我们并不一定非要使用它；互联网上有一些不遵循这一原则的网站。这意味着他们必须确保内容仍然平衡，以产生令人愉悦的效果——这并不容易！

然而，这里重要的一点是，我们不应该为响应式网站使用固定像素值；相反，我们可以使用 rem 单位（它们可以更好地调整大小），或者理想情况下使用百分比值。

为了将这个转化为更有意义的东西，我们可以简单地计算出结果列宽占原始尺寸的百分比。在这种情况下，593px 相当于 62%，367px 相当于 38%。这将给我们类似这样的东西：

#wrapper { width: 60rem;}
#sidebar { width: 32%; }
#main { width: 68%; }

好吧，有点理论，但希望你能理解！这是一个简单的公式，但是确保我们得到一个平衡的布局的好方法；使用百分比值（或至少是 rem 单位）将有助于使我们的网站同时具有响应性。

理解 RWD 的要素

现在我们已经了解了 RWD，重要的是要理解一些构成我们所知的灵活设计哲学的元素。其中一个关键部分是理解视口或可见屏幕空间；除了视口，我们还必须考虑灵活的媒体、响应式文本和网格以及媒体查询。我们将在本书的后面更详细地涵盖每个部分，但首先让我们快速概述一下构成 RWD 的元素。

控制视口

RWD 的一个关键部分是处理设备上的视口或可见内容区域。如果我们在处理台式电脑，通常是分辨率；但对于移动设备来说就不是这样了。

有一种诱惑，想要使用 JavaScript（或类库如 jQuery）来设置视口宽度或高度的值，但其实没有必要，因为我们可以使用 CSS 来做到这一点：

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

或者使用这个指令：

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

这意味着浏览器应该将页面的宽度渲染为与浏览器窗口相同的宽度——例如，如果后者是 480px，那么页面的宽度将是 480px。要看看不设置视口会有什么影响，看一下这个例子的截图：

这个例子是在 Chrome 中显示一些文本，使用 iPhone 6 Plus 仿真模式，但没有视口。现在，让我们查看相同的文本，但这次设置了视口指令：

尽管这只是一个简单的例子，你注意到了什么不同吗？是的，标题颜色已经改变，但更重要的是我们的显示宽度已经增加了。这都是设置视口的一部分——浏览器经常假设我们想要查看内容就像在台式电脑上一样。如果我们不告诉它视口区域已经缩小（并且我们没有正确设置缩放），它会试图把所有内容塞进更小的空间。这将导致页面看起来被缩小了，这样做效果不是很好！

因此，对于我们的设计来说，设置正确的视口并允许其根据设备的大小进行缩放是至关重要的。我们将在第二章中更详细地探讨这一点，创建流体布局。

创建灵活的网格

在设计响应式网站时，我们可以创建自己的布局，也可以使用已经创建好的网格系统，比如 Bootstrap。关键在于确保我们的布局大小和间距的机制是根据我们想要为用户显示的内容设置的，并且当浏览器的宽度调整时，它能够正确地重新排列自己。

对于许多开发人员来说，标准的度量单位一直是像素值；响应式设计的一个关键部分是转而使用百分比和 em（或者最好是 rem）单位。后者比标准像素更好地进行了缩放，尽管需要一定的信任来习惯使用这些替代单位！

媒体响应式设计

布局的两个关键部分当然是图像和文本——前者可能会让设计师头疼，因为简单地使用大图像并设置 overflow:hidden 来隐藏不可见部分是不够的！

响应式网站中的图像必须与用于托管它们的网格一样灵活——对于一些人来说，如果网站内容非常丰富，这可能是一个大问题；现在是一个好时机来考虑一下是否不再需要一些内容，并且可以从网站中删除。当然，我们当然可以简单地对任何不应显示的图像应用display: none，根据设置的视口。但是，这并不是一个好主意，因为在应用样式之前仍然必须下载内容；这意味着我们下载了比必要的更多的内容！相反，我们应该评估内容的水平，确保它完全优化，然后应用百分比值，以便在浏览器视口更改时可以自动调整大小。

构建适当的断点

有了内容和媒体，我们必须把注意力转向媒体查询——有一种诱惑是创建适合特定设备的查询，但这可能会成为一个维护头疼的问题。

我们可以通过根据内容断点而不是针对特定设备来设计查询来避免头疼的问题——这个技巧是从小处着手，逐渐增强体验，使用媒体查询：

<link rel="stylesheet" media="(max-device-width: 320px)" href="mobile.css" /> 
<link rel="stylesheet" media="(min-width: 1600px)" href="widescreen.css" /> 

我们应该以每行约 75 个字符的长度为目标，以保持内容的最佳长度。

欣赏 RWD 的重要性

因此，我们已经探讨了 RWD 的工作原理，以及构成这一理念的一些关键元素；问题是，为什么考虑使用它如此重要？将响应能力纳入我们的网站中有几个好处，包括以下几点：

• 用户与您的网站进行交互会更容易，如果它被设计为适用于多个设备。

• 创建一个适用于多个设备的单一网站本身可能需要更多的努力，但这样做的好处是我们只开发一个网站，而不是多个版本。

• 构建一个基于特定视口中可以显示多少内容的网站，比依赖可以被伪造和容易出错的浏览器代理字符串更有效地在屏幕上呈现内容。

• RWD 能够适应未来的变化。如果我们仔细规划我们的网站，我们可以构建适用于已经在使用和尚未上市的设备的媒体查询。

使我们的网站易于访问和直观

可访问性在响应式设计中起着关键作用。我们的内容应尽可能直观，每一条信息都易于访问。响应式设计非常强调使我们的设计不言自明；在网站上访问信息的方式不应该有任何疑问。

注意

在这种情况下，可访问性是指使我们的网站在各种设备上可用；这不应与满足残疾人士的需求混淆。为他们提供网站的可访问性同样重要，但不是 RWD 的主要角色。

即使我们的移动版本可能不包含相同的信息（这些信息完全可以访问），它仍然必须是引人入胜的，具有吸引人的颜色，易读的文本（在所有尺寸下），并且设计保持视觉和谐与我们选择的配色方案。

组织我们的内容

我们网站的成功取决于一系列因素，其中之一将是我们的内容在布局中的组织方式。内容应该以使其易于处理的方式组织，简单且没有杂乱，并且我们充分利用了我们所针对的设备的可用视口空间。

我们还必须确保我们的内容简洁——我们应该尽量用尽可能少的词语来表达我们的观点，以便移动用户不会浪费时间下载多余的内容。保持我们的选择简单是至关重要的——如果我们使它过于复杂，有很多链接或类别，那么这将增加访问者做出决定所需的时间，并最终只会使他们感到困惑！

在这一点上，值得指出一些事情——随着时间的推移，当谈论响应式设计时，你可能会遇到短语“自适应设计”。两者之间有微妙但关键的区别，我们在构建网站时可以使用其中任何一个原则。让我们花一点时间来探讨每个原则的含义，以及可能影响我们构建网站方式的差异。

比较 RWD 和自适应设计

那么，什么是自适应设计，它与响应式设计有何不同？

响应式设计是指使一个设计适应多种设备——这要求我们为网站创建最佳的视图解决方案，无论我们使用哪种设备。这意味着我们不应该不必要地调整大小、滚动或移动；例如，如果我们的页面宽度不适合我们使用的屏幕，那么我们的设计就不正确！不过，最终我们可以将响应式设计视为一个可以自动增大或缩小的球，以适应多种大小的篮圈。

保持篮圈的类比，自适应设计的原理是我们有多个可用的布局；浏览器将根据检测到的设备类型选择要使用的正确布局。在这种情况下，我们将根据使用的篮圈大小将几个不同的球投入不同大小的篮圈。然而，关键的区别在于响应式设计侧重于客户端开发；自适应设计主要使用服务器端检测来显示最适合的页面，根据用于浏览网站的设备。

注意

在本书中，我们将在文本中使用响应式设计来完成所有示例。

现在我们了解了使用 RWD 的重要性以及它与自适应设计的区别，让我们真正开始我们的旅程；我们的第一步是准备好我们的开发环境以供使用。在这一点上，你可能期待下载许多不同的插件或使用 jQuery 等库。你可能会有一点惊喜！

准备我们的开发环境

好了，我们已经涵盖了足够的一般背景知识；是时候更加实际了！

在构建响应式网站时有许多可用的工具；当然包括 JavaScript 或 jQuery 等工具，还有像 FitVids（用于管理响应式视频）或 ResponsiveSlides（用于创建响应式走马灯）等插件。

不过，我们不会使用任何插件。我们只需要一个文本编辑器和一个浏览器，什么都不需要！在完成本书中的练习时，我们不会下载任何东西。

是的，我听到了那些难以置信的感叹。我一定是疯了，我听到你们说。不过，这种方法是有很好的原因的；让我解释一下：

在许多情况下，我看到我们只是简单地使用最新的插件来帮助我们实现结果。通常情况下，这没有什么问题；毕竟，时间压力经常意味着我们无法承担花更多时间来进行更深思熟虑的方法。

不过，我认为我们变得懒惰了。在构建响应式网站时，并不需要许多可用的工具。是时候回归基础了；在本书的过程中，我们将证明我们可以仅仅使用简单的文本编辑器和浏览器来构建响应功能的基础。

不过，这种方法也有一些注意事项：

• 我们构建的许多内容在一些旧版浏览器中无法正常工作——比如 IE9 或更低版本。你必须问自己的问题是：有多少人会在你的网站上使用这些浏览器？如果比例非常低，那么你可以考虑放弃它们；如果不是，那么你需要寻找另一种方法。

• 专注于只使用 HTML 和 CSS 并不意味着我们完全拒绝其他工具；如果我们需要使用它们，那么我们就需要使用它们。然而，我们必须问自己的问题是：我们真的需要使用它们吗？还是我们只是太懒，不愿意从头开始创建东西？

除此之外，我们需要先完成一些管理任务；我们需要一个项目区域来存储我们的内容。我建议在你的 PC 或 Mac 上的某个地方创建一个文件夹来存储文件；为了本书的目的，我假设你已经将其命名为B03568，并且它存储在C:驱动器上。如果你把它存储在其他地方，那就相应地调整。

接下来，我们需要一份随附本书的代码下载副本——在某些情况下，我们不会涵盖一些更乏味的内容，而是专注于真正重要的内容；我们可以从代码下载中获取那些不太关键的文件。

最后，你有喜欢使用的文本编辑器吗？如果没有，那么你可能会喜欢看看 Sublime Text 3；这是我们首选的编辑器。使用它的真正好处在于我们可以添加插件，比如 REM-PX（可从packagecontrol.io/packages/REM%20PX获取），它非常适合将像素转换为 rem 单位的值！（我们将在后面的章节中更详细地介绍这个）。

好的，我们继续前进；我们旅程的下一阶段是考虑创建响应式网站的合适策略。这并不是什么非常复杂的事情，更多的是关于做出一些明智的选择，决定我们应该使用哪种方法最适合我们的解决方案。让我们花点时间来探讨这在实践中意味着什么。

考虑一个合适的策略

作为开发者，我相信你一定想着着手创建你的下一个杰作，对吧？听起来很熟悉；毕竟，这就是帮助我们支付账单的方式…

在我们开始编写代码之前，我们必须制定一些策略，这可以简单也可以复杂，取决于我们的需求。虽然定义基本规则很重要，但我从来不是一个坚持原则的人；相反，制定一套遵循的准则和原则意味着我们可以灵活地处理问题，同时保持一致性。

有一些指导方针我们应该尽量纳入到我们的开发过程中，这些更多是帮助我们在第一次开发响应式网站时减少任何不清晰的地方：

• 选择移动端而非桌面端：这并不是一个新概念；在响应式设计成为创建网站的一种严肃方法之前，它就已经存在了。移动优先的概念意味着我们应该先为较小的移动设备开发内容，然后再逐步扩展到平板电脑和桌面设备。在这个阶段，重要的是要意识到访问者可能在你当前的网站上使用什么设备；这将有助于确定我们应该集中关注哪些设备作为我们设计的一部分。

• 断点：正确设置这些对于我们构建的任何网站的成功至关重要；我们不仅必须选择适合我们想要支持的设备的正确阈值，还必须确保切换点不会彼此重叠。一个常见的误解是开发标准的断点，比如桌面或平板电脑；相反，我们应该设置我们的断点，以便在我们的布局中内容发生断裂时启动。这个截图展示了我们在设计中必须考虑的阈值类型：

• 内容的流动：当我们开始为较小的屏幕设计时，内容自然会被挤压并向下流动。如果你习惯于在设计时使用像素和点，这可能是一个难以理解的概念，但一旦你习惯了内容在响应式设计中向下流动的方式，它就会变得合理起来。

• 相对单位：这是响应式设计中的一个重要概念。这是一个学习如何从静态值转换为相对单位的过程。用百分比计算数值意味着内容将始终适合，无论视口大小如何；例如，将<div>的大小设置为 50%意味着它只会填充其父容器的 50%，无论视口的大小如何。可能需要使用静态值构建初始设计，但我们应该尝试转换为使用百分比作为设计过程的一部分。

• 最大和最小值：使用相对值的一部分意味着我们的浏览器不会理解每个元素的下限和上限大小。为了解决这个问题，我们必须设置min-width或max-width值；这将确保无论我们的元素宽度如何，它们都不会超出代码中设置的限制。

• 网络字体或系统字体：如果您已经维护了网站的桌面版本，并且使用了一个或多个网络字体，那么您需要做出重要决定：移动网站是否应该使用相同的字体？问这个问题的原因是因为这需要下载额外的内容；这将消耗额外的带宽，这对于带宽有限的设备来说是一个问题。请记住，任何使用移动设备的人都可能面临时间压力，他们希望快速完成某些事情，而且尽量少麻烦，因此选择非标准字体不会是一个有用的方法。

• 位图或矢量图像：在使用响应式设计时，一个关键原则是可伸缩性；我们必须拥有可以轻松调整大小或根据需要更换为更大或更小的图像。在移动设备上采用后一种方法是不明智的；更好的方法是考虑使用矢量图像。这些不仅可以在不损失质量的情况下调整大小，而且如果需要的话还可以使用 CSS 进行操作，这减少了需要相同图像的不同版本（前提是矢量图像在使用 CSS 之前已经进行了优化）。

• 内容策略：响应式设计的目标是无论使用何种设备查看网站，都能创造最佳的体验。其中一部分围绕内容展开；作为制定策略的一部分，内容应始终排在首位。我们需要添加足够的内容来使我们的设计成为一个有用的基础；然后我们可以在以后为更大的屏幕和分辨率添加支持时添加或开发这些内容。

• 草图和原型：一旦我们确定了内容和管理内容的策略，就该是开发布局的时候了。其中一个关键部分应该包括草图或线框图；这将有助于将计划的粗糙开端转化为更加坚实的东西。许多设计师会使用 PhotoShop，但这有浪费大量可计费时间的风险，这必须与客户核算。在纸上草图是便携的，并且具有较低的视觉和内容保真度，这意味着我们可以专注于内容的互动，而不是外观。

• 框架：在我们的开发中使用框架可以为我们的开发过程带来几个好处；它经过验证的代码意味着我们可以减少开发时间，并利用网格方法来构建和完善我们的布局。框架已经在多个设备上进行了测试，因此调试时间减少了；我们应该集中精力选择合适的框架，基于学习曲线、支持和文档可用性等标准。

注意

使用框架的一个注意事项是它们的大小；如果我们选择这条路线，我们应该仔细选择要使用的框架，因为许多框架代码量很大，添加额外的不必要代码会使我们的网站变慢。

• 可伸缩媒体：图片和视频对于任何网站都是必不可少的；它们不仅可以增加色彩，还可以在较小的空间中传达更多信息。我们所有的图片必须是可伸缩的；无论我们在分辨率增加时是否更换图片，还是使用可伸缩格式如 SVG。我们需要考虑获取标准和高分辨率版本的图片，以满足支持后者的设备；这些可以是单独的，也可以是图像精灵的形式。我们的媒体策略还应考虑使用图标字体，这对于小型、可重复的元素如社交媒体标志非常适合。

• 最小化：如果我们正在构建适用于带宽限制和资源有限的设备的网站，那么我们必须考虑最小化我们的 CSS 和 JavaScript 内容。最小化应该是任何开发工作流程的标准部分。我们可以减少向服务器的 HTTP 请求次数，并提高响应时间。在响应式设计时，最小化变得更加重要，因为我们正在添加更多的 CSS 样式（如媒体查询）以适应不同的视口。这将进一步增加我们样式表的大小，所以我们可以尽量减少大小，以鼓励移动设备上新开发的响应式网站的使用。

作为开发人员，我们在创建网站时应该有一定的策略；它不应该太死板，以至于阻止我们改变方向，如果我们现有的计划不起作用。无论我们决定走哪条路，我们都应该在我们的开发工作流程中考虑最佳实践的元素；现在我们可以使用一些提示，让我们更详细地看一看。

探索最佳实践

最佳实践...噢...多么糟糕的短语！

这是一个被滥用至死的短语；讽刺的是，当它被使用时，它也并不总是被正确使用！尽管如此，我们可以使用一些指针来帮助设计我们的响应式网站；让我们来看看其中一些：

• 采用极简主义方法：这在目前非常流行，非常适合响应式设计。它减少了屏幕尺寸变化时我们需要重新排列的元素数量；如果我们的页面内容较少，还可以更容易地编辑内容和元素。

• 始终采用移动优先策略：必须考虑用户在移动设备上的体验。拥有移动设备或手机的比例高于拥有个人电脑的比例；我们必须确保内容在较小的屏幕上既可见又清晰。一旦我们掌握了这一点，我们就可以将我们的设计扩展到更大的屏幕上。

• 理解速度的重要性：网站加载慢会让顾客失去兴趣；在测量加载时间时，一个良好的指导是大约 4-5 秒。网站加载慢可能有很多原因，从网站提供源慢到硬件优化不佳，但其中一个较容易纠正的是大型图片。确保您已经检查过所有加载的媒体，并确保它已经完全优化适合您的网站。

• 尽量保持网站设计尽可能简洁：消除任何不必要的东西来传达您的信息。毋庸置疑，但为什么要用 20 个词，当我们可以在 10 个词中传达我们的信息呢？

• 使用汉堡图标：不，我不是在指食物，无论大小如何（抱歉，开了个玩笑！）。相反，将其用作访问您的网站的一个一致的访问点。但要注意，用户可能不想一直点击它来访问所有内容，所以如果您有经常使用的菜单项，那么考虑将这些暴露在您的网站上，并将不太重要的内容隐藏在汉堡图标下。

• 不要使用小按钮尺寸：请记住，许多用户将使用手指点击图标，因此任何可点击的图标都应足够大，以便准确点击，并减少因意外点击错误链接而产生的任何挫败感。

• 熟悉媒体查询：正如我们将在第四章中看到的，探索媒体查询，我们可以使用媒体查询来控制在不同设备上的特定条件下显示内容。这在响应式设计中起着关键作用；我们需要根据我们需要支持的内容来获得正确的查询组合！

我们可以遵循很多最佳实践，但我们不应该盲目地遵循它们；除了我们的网站失去任何突出吸引力的风险（即，都是一样的），并非所有最佳实践都适用，甚至准确。

相反，值得研究其他人在网上所做的事情；随着时间的推移，您将开始看到共同的主题-这些主题应该成为您在设计网站方面进行讨论的基础。

有一些实践我们应该遵循，不一定是因为它们是最佳实践，而更多是出于常识；触摸是一个很好的例子。当我们设计触摸时，有一些指针我们应该使用，这些指针将影响我们的设计，所以让我们更详细地看看这些。

为触摸设计

尽管有很多提示和指针可以帮助我们改进响应式开发，但有一个主题值得更详细地探讨-触摸。

为什么？答案很简单-响应式工作不仅仅是写代码；任何人都可以写代码。然而，区别在于，以及将网站看起来和工作的方式。在这一点上付出的关怀将把优秀的网站与其他网站区分开来；为了了解一个人可能经历的决策和思考的种类，让我们看看在设计触摸时可能需要考虑的内容：

• 目标是使用角落。在小屏幕上，左下角通常是最容易访问的；对于平板电脑，上角更好。我们必须考虑将任何呼吁行动按钮放在这些位置，并根据实际情况调整我们的设计以自动重新对齐，如果使用不同的设备。

• 不要使按钮太小。通常，触摸目标（包括按钮）的一个很好的指导是大约 44 点（或 3.68rem）。

• 避免将项目放置得太靠近，以防止某人错误地访问错误的项目。避免界面错误的间距的一个很好的起点是最少 23pt（或 1.92rem）。

• 使用自然的交互，并创建与常见手势良好配合的导航，例如滑动。这个截图显示了我们可以使用的一些示例手势，以及在构建我们的网站时必须考虑的手势：

来源：The Next Web (http://www.thenextweb.com)

悬停阶段在响应式设计中是不允许的-这些不存在。任何呼吁行动都应该基于轻触，因此确保您的设计考虑到这一因素。

哦，有一些事情需要考虑！关键是，虽然编写代码很容易，但创建有效的响应式设计需要时间和资源，并且应始终是一个持续的工作，这样我们的设计才能保持新鲜和更新。

现在我们已经探讨了一些指导方针和提示，可以帮助我们进行响应式开发，是时候考虑我们的工作流程了。我们可能已经有一个为制作标准网站而建立的工作流程，转向包括响应式设计可能需要我们对流程进行一些更改，所以让我们去探索一下在使用响应式设计时典型工作流程可能是什么样子。

建立开发工作流程

在我们开始工作流程之前，让我问你一个问题：

你的工作流程是否包括规划、创建静态线框图、构建静态设计、添加代码然后测试，最后启动你的网站？听起来耳熟吗？

如果是这样，那就做好改变的准备吧；使用瀑布流流程（与这些步骤相一致）在创建响应式网站时效果不佳；响应式工作完全是敏捷的，正如开发者 Viljami Salminen 在 2012 年所阐述的那样：

来源：Viljami Salminen，2012

尽管他的设计可以追溯到 2012 年，但至今仍然完全有效；在你们都惊恐地举起双手之前，让我解释一下为什么瀑布流的流程对响应式设计不起作用：

• 我们不能指望一次性为我们的网站构建到很多不同设备的支持。我们必须首先专注于小视口，然后逐渐扩大以支持更大的设备，最后是桌面设备。

• 在响应式工作时，我们的重点必须首先放在内容上，而不是布局；原因是我们的媒体查询应该围绕着内容在我们可用视口的宽度改变时断裂的位置构建。这消除了对为特定设备构建的依赖，意味着我们可以构建可以为多个设备提供服务的查询。

我们的开发流程需要是迭代的，主要关注文本和媒体，然后再构建布局。在整个过程中，我们应该与客户保持密切联系，作为每个迭代的一部分；过去那种朝着大揭示的日子已经一去不复返了！考虑到所有这些，让我们更详细地看一下 Viljami 的插图。

发现需求

这个初始阶段对于任何网站都是一样的，但对于响应式设计来说尤为重要，因为我们必须支持网站中不同的视口尺寸。这一切都是为了更好地了解客户及其需求。我们必须了解客户的业务，他们的竞争对手，以及他们试图实现的目标。

在这一点上，我们应该问一些问题，比如，“人们为什么会来到你的网站？”，“你试图实现的主要目标是什么？”，“你的主要竞争对手是谁？”我们问得越多，我们就能越多地理解，因此更好地为客户提供建议，以满足他们的需求。

规划我们的网站

当我们收集到构建我们的网站所需的所有知识后，现在我们需要规划它的外观。我们可以从最初的概念开始，但与其像以前那样专注于布局，我们应该集中精力放在内容元素上，并创建用户故事和信息架构。然后我们可以将这些放在一个基本的 HTML 线框中。在这个阶段，布局不那么关键；关键是我们在关注页面上的信息位置之前，获得正确的信息视图。

设计文本

在这一点上，我们现在需要专注于以文本形式编写我们的内容。这个经常被低估的步骤可能是整个过程中最重要的；没有它，人们就不会来看网站，如果我们不知道将填充其中的内容，设计布局也就没有意义！一个有用的提示是尽量保持样式的最小化，集中精力放在内容上；至少最初，我们可以看到它将以长格式连续显示，并且它是否适用于使用屏幕阅读器的人。不过，不要担心，我们总是可以在原型制作阶段对文本进行完善；在这一点上，我们需要一些东西作为起点，但第一次很难做到完美。

勾画我们的设计

对于下一步，忘掉使用 PhotoShop；它太慢了，而且很难快速进行更正！敏捷过程是关于快速和轻松地进行更改，没有比传统的纸和笔更好的媒介了。我们甚至可以打印出纯文本内容并进行草图，如果有帮助的话，这将为我们节省数小时的开发时间，甚至有助于减少那些你遇到开发者瓶颈时的场合……现在怎么办？

原型设计和创建

设计草图完成后，现在是创建原型的时候了。这时我们可以看到布局如何响应不同的视口大小，并且可以突出任何潜在的挑战，或者对客户报告的任何问题做出反应。了解各种断点是很好的，但最终我们应该让我们的内容决定设计中应该设置这些断点的位置。

我们可能习惯于使用 PhotoShop 来制作我们的设计原型，但更好的选择是切换到使用浏览器。我们可以使用 Proto.io（proto.io/）或 Froont（froont.com/）等服务。这给了我们更多时间来解决更难的元素，比如排版；它还有助于消除我们可能在使用 PhotoShop 等工具时遇到的任何限制。

测试我们的设计

尽管我们可能仍处于原型阶段，但早期引入测试是很重要的。我们设计中可能会有很多断点，这意味着在多个设备上进行测试需要时间！作为一个替代方案，我们可以进行多次测试和揭示，而不是进行一次大规模的测试和揭示。这有助于减少任何回滚的影响（如果某些东西不符合要求），还有助于让客户参与项目，因为他们可以看到开发过程中的进展。

我们绝对必须做的一件事是在多个设备上进行测试。维护这些设备的测试套件是一项昂贵的工作，所以值得向同事、朋友和家人询问是否可以帮助进行测试。他们至少可以浏览网站，并帮助确定哪些地方“看起来不对”（用客户的说法）。我们需要找出根本原因，并实施修复以改善用户体验。

探索错误

尽管我们尽了最大努力，但我们只是人类；有时会犯错！正如剧作家奥斯卡·王尔德曾经说过，“……犯错一次是人性，犯错两次就是粗心大意。”希望我们不会犯错到那个地步，但在响应式工作中经常会犯一些常见的错误；让我们来看看前五名候选人：

• 未考虑触摸输入：这可能看起来很奇怪，但未考虑触摸输入是非常常见的！一些用户希望网站“简单地工作”，并且在桌面和移动设备上都有一致的方法。这将包括任何激活链接的机制（如按钮）。在桌面客户端上可能有效的东西，在移动设备上很可能会失败。我们绝对必须包含一些东西，以允许移动用户使用触摸在网站上导航。这可以（主要）通过 CSS3 样式来实现，所以没有借口！

• 坚持一致的导航：创建成功的网站的一部分将是拥有一些保持在所有页面上一致外观和感觉的导航；但这并不意味着我们必须将这一点延续到移动设备上！移动设备上的导航当然会有不同的作用；我们还有额外的触摸输入要考虑，作为我们设计的一部分。至少，链接和按钮，以及我们选择的字体和颜色应该保持一致；按钮的大小，我们的视觉布局，以及我们点击按钮的方式可能会改变。

• 建立与非移动友好内容的链接：你有多少次通过移动设备访问内容，结果发现是一个巨大的图片或大量的文件需要下载？我敢打赌这让你恼火。确保你的内容适合在不同设备上下载。在桌面宽带连接上，我们可能不会在意使用 100Kb 的图片；但在 3G 连接上加载这些图片，很容易看出为什么我们需要重新考虑我们之前在标准宽带连接上使用的内容。

• 忽视性能：在现代宽带连接的时代，我们很容易对可供下载的内容变得自满。如果我们首先考虑桌面，那么在设计我们的移动网站时就会给自己制造一个真正的问题！我们不能将桌面环境压缩成移动体验——这不会高效，会提供糟糕的用户体验，并最终导致销售转化率下降。为了避免性能问题，我们应该以极简或移动优先的方式作为我们网站设计的基础。

• 测试：一个常见的错误是我们没有充分地在多个设备上测试我们的解决方案，在发布之前运行它们将揭示任何需要在我们的解决方案可供普遍使用之前解决的用户体验问题。一个难点可能是我们要测试多少设备的问题。如果我们可以访问网站现有桌面版本的分析数据，那么这应该给我们一个起点，我们可以用来双重检查我们的设计是否按预期工作。如果没有，我们可以利用浏览器中的设备模拟器进行一些基本检查。我们还可以使用在线测试服务，比如 MobileTest.me (mobiletest.me)，以确保我们的设计足够地适合更广泛的使用。

这些常见问题可以通过对我们的开发工作流程进行一些简单的更改来轻松解决，至少在一开始就避免这些错误，将会在开发过程中节省很多烦恼！

总结

RWD 的理念为我们作为设计师开辟了许多机会。随着移动和其他互联网设备的出现，重要的不仅是转变，还要了解如何做到正确。我们已经涵盖了关于 RWD 的许多有用的主题，所以让我们花一点时间来反思一下你在本章学到了什么。

我们以对 RWD 的温和介绍开始，然后探讨了使我们的网站响应式的基本原则，并理解了组成 RWD 的一些关键元素。

然后我们继续探讨了 RWD 作为一套我们可以遵循的指导原则的重要性；我们探讨了这与自适应设计的比较，以及响应式设计可能更难实施，但随着时间的推移是值得的努力。

接下来我们来看一下策略——我们涵盖了正确理解的重要性，以及在朝着响应式工作的过程中应该考虑的不同元素。我们看了一些我们可以遵循的最佳实践，并强调了为触摸设计是这些准则的一个关键部分，以阐明我们在开发过程中需要做出的一些决定。

然后我们用一个广泛的视角来结束这一章，创建一个开发工作流程。我们探讨了我们可能需要对现有流程进行更改，以及必须纳入我们的开发的一些主题，然后讨论了一些可能会让我们失误的地方！

哇，这里有很多细节！不过好在我们已经涵盖了许多我们需要考虑的战略问题；现在是时候将其中一些付诸实践，开始建立内容和布局了。让我们继续，开始看看我们如何构建灵活的网格布局。这将是我们旅程中下一章的主题。

第二章：创建流体布局

我们在响应式设计的基本知识中的关键部分是在页面上布置内容——在互联网的早期，这是一个简单的过程！

随着移动设备（以及那些非 PC 设备）能够访问互联网，内容布局变得更加关键；例如，我们有多少图片，或者我们是否包含内容 X，或者只显示摘要？这些只是我们可能问自己的一些问题。这表明它可能会引发一系列问题！

为了简化这个过程，我们可以使用网格或基于流体的布局。在本章的课程中，我们将更详细地研究它们的使用；我们将从设置可用的视口开始，一直到未来的基于网格的布局。

在本章中，我们将涵盖以下主题：

• 介绍网格布局并了解不同类型

• 设置可用的视口以供使用

• 探索使用网格布局的好处和机制

• 实施预先构建的网格布局

• 探索基于网格模板布局的未来

好奇吗？让我们开始吧！

注意

请注意，这些练习是为 Windows 平台设计的，因为这是作者首选的平台；如果您使用不同的平台，请适当修改。

介绍灵活的网格布局

多年来，设计师们建立了不同类型的布局；它们可能只是一个名片网站，也可能是一个用于内容管理系统（如 WordPress 或 Joomla）的主题。通过不同设备访问互联网的迅猛增长意味着我们不能再创建与特定设备或尺寸绑定的布局——我们必须要灵活！

要实现这种灵活性，我们需要在设计过程中接受一些变化——首先是我们应该创建的布局类型。其中一个关键部分是使用百分比值来定义我们的布局；我们可以利用经过试验和测试的预定义网格系统作为未来设计的基础，而不是从头开始创建某些东西。

讽刺的是，有很多网格系统争相吸引我们的注意，因此，让我们毫不犹豫地开始探索不同类型的布局以及它们与响应式设计的比较。

了解不同的布局类型

多年来，困扰网页设计师的一个问题是他们的网站应该使用哪种布局——应该是流体的、固定宽度的、具有弹性的，还是混合这些布局优势的混合版本？

我们选择使用的布局类型当然取决于客户的要求——将其设置为流体布局意味着我们实际上更接近于使其响应式；不同之处在于后者使用媒体查询来允许不同设备上的内容调整大小，而不仅仅是普通的桌面！

为了了解差异以及响应式布局的比较，让我们依次快速看一下每种布局：

• 固定宽度布局：这些布局受限于固定宽度；一个好的尺寸大约是 960 像素，因为这可以平均分成列，没有余数。缺点是固定宽度对可用视口区域做出了假设，如果屏幕太小或太大，就会导致大量滚动，影响用户体验。

• 流体布局：我们使用基于百分比的单位，而不是使用静态值；这意味着无论浏览器窗口的大小如何，我们的网站都会相应调整。这一举措一下子解决了围绕固定布局的问题。

• 弹性布局：它们类似于流体布局，但约束是通过类型或字体大小来衡量的，使用 em 或 rem 单位；这些是基于定义的字体大小，因此 16px 是 1 rem，32px 是 2 rem，依此类推。这些布局允许良好的可读性，每行 45-70 个字符；字体大小会自动调整大小。在某些情况下，我们可能仍会看到滚动条出现，或者在缩放页面内容时体验一些奇怪的效果。

• 混合布局：它们结合了两种或更多种不同的布局类型；这使我们可以为某些元素选择静态宽度，而其他元素保持弹性或流体。

相比之下，响应式布局进一步使用媒体查询，不仅使我们的设计自动调整大小，还在多个设备上呈现我们内容的不同视图。

但是，我们如何设置可用空间，并确保我们的内容会根据需要放大或缩小呢？很简单——我们可以通过在标记中添加视口指令来实现这一点；让我们去探索允许我们的视口根据需要调整大小所需的内容。

设置可用视口以供使用

当在不同设备上查看网站时，我们当然希望它能自动调整到可用的设备宽度，而不会丢失体验；不幸的是，并非每个网站都能以正确的方式或成功地实现这一点！

要理解为什么这很重要，让我们假设我们在桌面版本的网站上操作（在此屏幕截图中的 1280+组中），以及移动等效版本从 418-768 组中：

使我们的网站响应的第一步是添加视口指令；没有它，我们很可能会在调整我们的网站大小时出现类似的效果：

明白我的意思了吗？看起来很糟糕——文本被截断，我们必须向右滑动...噫！相比之下，添加一行代码可以产生戏剧性的效果：

我们的示例使用了设置为模拟 iPhone 6 Plus 的 Google Chrome。恢复我们示例的理智所需的代码可以添加到我们代码的<head>中：

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

设置后，我们可以立即看到区别。诚然，我们的演示不会赢得任何风格奖，但这也不是目的！然而，它确实显示文本已经缩小以适应屏幕，我们在文本周围有一个适当的边框——作为显示，这一切看起来更令人愉悦。

注意

要查看实际效果，请尝试运行附带本书的代码下载中的viewport.html演示；您需要在浏览器的设备/响应模式下运行它；删除第 5 行，然后重新添加它以查看区别。

此指令中的内容属性支持使用多种不同的值之一：

属性	描述
width	设备虚拟视口的宽度。
device-width	设备屏幕的物理宽度。
height	设备虚拟视口的高度。
device-height	设备屏幕的物理高度。
initial-scale	访问页面时的初始缩放；设置为 1.0 不会缩放。
minimum-scale	访问者可以在页面上缩小的最小量；设置为 1.0 不会缩小。
maximum-scale	访问者可以在页面上放大的最大量；设置为 1.0 不会放大。
user-scalable	允许设备放大和缩小（是）或保持固定（否）。

当前版本的 MS Edge 与视口标签不太兼容；值得注意的是，需要在代码中指定@-ms-viewport，以确保我们的视口宽度与其他浏览器的行为方式相同。

在视口和体验之间取得平衡

您会注意到我在本节开头使用了斜体的“体验”一词——这里的关键是，在响应式设计中，体验不必在所有设备上完全相同；但它必须是有用的，并允许我们的访问者作为一个组织与我们互动。换句话说，如果我们为一个剧院工作，我们可能会将我们的移动提供限制在简单的订票，而让主要的桌面站点管理其他一切。

这是完全有效的；虽然限制了站点，移动订票可能被一些人认为非常受限制。这个概念在技术上仍然是合理的，只要用户体验是可以接受的。

值得注意的是，我们可以使用width=<value>来设置特定的宽度。如果我们需要特定的宽度来显示我们的内容，这是很好的；如果方向从纵向（320 像素）变为横向（360 像素），那么视口的内容将自动按比例缩放以反映这些变化。然而，如果我们将设备宽度设置为最大值，这意味着不需要缩放，浏览器应该调整其中的内容以适应。

考虑视口单位

响应式设计的一个关键部分是摆脱使用像素值，而是使用 em 或 rem 单位。在我们的示例中（以及本章前面的视口演示中），我们使用了像素和 rem 单位。虽然这很有效，但我们仍然依赖于父元素。相反，我们应该考虑使用另一种处理视口的方法。它们是：

• vw：视口宽度

• vh：视口高度

• vmax：视口高度和宽度的最大值

• vmin：视口高度和宽度的最小值

作为一种度量单位，它们相当于已设置的视口区域的 1%；但美妙之处在于它们消除了任何依赖元素，并且基于当前视口大小进行计算。目前，浏览器对它们的支持非常好：

来源：caniuse.com/#search=vh

撇开最近版本的 Internet Explorer 存在的一些小问题，这是一个有用的选项，它结合了单位的简便性和在设计中使用百分比的灵活性。

让我们继续——我们已经介绍了灵活的网格，并探讨了设置视口对于正确显示内容的重要性。现在是时候继续探索将网格系统纳入我们的布局的一些好处，并深入了解它们作为响应式设计原则的内部工作。

探索灵活网格布局的好处

既然我们已经了解了网格布局作为响应式设计的一个原则，现在是一个很好的机会来探讨为什么我们应该使用它们。从头开始创建布局可能会耗费时间并需要大量测试；使用网格布局有一些真正的好处：

• 网格使设计更简单：我们可以专注于提供内容，而不是试图开发传统的轮子；基础设施已经经过开发人员和其他用户的测试。

• 它们提供了视觉上吸引人的设计：许多人喜欢以列的形式显示内容，因此网格布局很好地利用了这个概念来帮助组织页面上的内容。

• 网格当然可以适应不同大小的视口：它们使用的系统使得在多个设备上显示单一的代码库更容易，这减少了开发人员维护和网站管理员管理所需的工作量。

• 网格有助于显示广告：谷歌已经知道偏爱显示真实内容的网站，而不是那些它认为网站的唯一目的是产生广告的网站；我们可以使用网格来定义特定的广告区域，而不会妨碍自然内容。

总的来说，熟悉网格布局是有意义的；诱惑当然是使用现有的库。这没有错，但要真正从中获益，了解一些围绕网格布局机制的基础知识以及如何帮助构建我们的网站是很有好处的。

首先让我们快速看一下如何计算每个元素的宽度，这是创建任何网格布局的重要部分。

理解网格布局的机制

到目前为止，我们探讨了响应式设计的一个关键要素，即我们将如何设置我们的可用屏幕空间（或视口）——正如有人曾经说过的那样，“是时候了…”

绝对没错——是时候开始探索网格是如何运作的了！网格背后的技巧并不特别；它归结为使用一个公式来帮助定义我们布局中使用的每个元素的比例：

目标 ÷ 上下文 = 结果

假设我们有一个包含两列的布局，容器（或上下文）宽度为 960px（我将使用像素值纯粹是为了说明所涉及的数学）。

为了创建我们的布局，我们将使用我们在第一章中提到的黄金比例，介绍响应式网页设计；回顾一下，我们使用 1.618 的比例对每个像素。因此，如果我们的布局宽度为 960px，我们将 960 乘以 0.618（差值）—这给出 593px（四舍五入到最接近的整数）。然后我们简单地从 960 中减去 593，得到 367px 作为我们的侧边栏。当你知道如何做的时候，这就很简单了…！

在这个阶段，我们可以将这些转换为百分比；593px变为61.77%，侧边栏将是38.23%。让我们将这些转化为一些样本 CSS，值四舍五入到小数点后两位：

section, aside {
   margin: 1.00%;    /*  10px ÷ 960px = 0.010416 */
}

section {
   float: left;
   width: 61.77%;    /* 593px ÷ 960px = 0.617708 */
}

aside {
   float: right;
   width: 38.23%;    /* 367px ÷ 960px = 0.382291 */
}

在这里，我们的目标是aside（或子元素），上下文是容器；在这种情况下，我们将其设置为 960px。该部分形成了第二个目标；在这两种情况下，我们将目标除以上下文得出结果。由于我们的结果需要以百分比表示，我们只需将每个结果乘以 100 即可获得所需的数字。

你们中敏锐的人可能会注意到margin: 1.00%的存在。我们必须为我们的边距留出足够的空间，因此结果数字将需要更改。我们将保持部分宽度为61.77%，因此我们的边距将需要降至34.23%，以保持 100%的全宽（这允许两个子元素两侧的两个边距）。

如果我们一直坚持下去，最终可能会得到类似于这个屏幕截图的布局：

好的，让我们继续。我觉得是时候进行演示了！在我们开始编写代码之前，有一些要点我们应该快速看一下：

• 虽然我们只是浅尝辄止地探索了网格布局的工作原理，但我们还有很多事情要做；这将取决于你的网站需要多少列，列是否应该等宽，或者与其他列合并，容器有多大，等等。

• 有数十种网格布局框架可以在线使用。在开始从头设计和创建自己的网格之前，看看有什么可用的；这将节省你很多时间！

• 保持简单；不要试图过分复杂化你的布局。你可能会读到开发人员赞扬 flexbox 的优点，或者说你必须以某种形式使用 JavaScript 或 jQuery；对于简单的布局，这是不必要的。是的，我们可能会使用 box sizing 等属性，但基于 flexbox 的网格系统可能会在 CSS 中变得过于臃肿。

考虑到这一点，现在是时候进行演示了。不过，在我们开始之前，有一些东西需要讲解，因为这将成为本书中的一个主题：

我们将避免使用 JavaScript 或下载库来创建我们的演示。是的，你没听错。我们将尝试仅使用纯 HTML5 或 CSS3 来构建我们的响应式元素！

原因很简单——我坚持认为我们作为开发人员变得懒惰了，有时候回归基础并真正欣赏简单更好。你可能会听说歌手想回到他们的根源或起点；我们只是将同样的原则应用到我们的响应式开发中。这意味着我们不能总是使用最丰富功能的或最新版本的，但这并不总是坏事，对吧？

实施预构建的网格布局

我们已经介绍了创建网格的基础知识；从头开始创建这些可能非常耗时，因此有这么多已经可用在线的网格，除非您的要求是找不到适合您的网格，否则最好使用预构建版本！值得花时间研究可用的内容，因为没有两个网格是相同的。

作为可用内容的示例，并证明我们不需要网格提供的所有花哨功能，让我们看一个 Gridism 形式的示例网格。我们可以在这个屏幕截图中看到我们的下一个演示完成后的样子：

尽管这个库已经存在了两三年，但它的简单性证明了我们不需要实施复杂的解决方案来创建简单布局的基础。CSS 中的 flexbox 属性非常适合创建网格，但它的灵活性增加了不必要的复杂性；相反，我们将使用box-sizing属性，它同样有效。

由 Cody Chapple 创建，它不使用 flexbox（稍后会详细介绍），但在网格中使用 box-sizing 作为属性。该库可以从github.com/cobyism/gridism/blob/master/gridism.css下载（或使用 Bower 安装），但由于它只包含一个文件，我们可以简单地将内容复制到文本文件中并保存（仍然保持我们早期的目标，即不下载内容）。

注意

演示将使用 Gridism 网站的原始示例，但 CSS 已经重新设计以使其保持最新状态并删除一些不必要的代码。为了方便起见，我们将假设在整个演示过程中都使用 Google Chrome。

让我们开始吧：

1. 从随书附带的代码下载中，下载gridism.html的副本，以及normalize.css，gridism.css和style.css。将 HTML 标记保存在项目区域的根目录中，将两个 CSS 文件保存在 CSS 子文件夹中。

2. 尝试在浏览器中运行gridism.html，然后启用其设备或响应模式（按下Ctrl + Shift + I，然后按下Ctrl + Shift + M）。我们应该看到类似于本练习开始时显示的屏幕截图。

3. 本节开头的屏幕截图是在设置为模拟 iPhone 6 Plus 横向模式的 Google Chrome 中拍摄的。现在在 Chrome 中使用方向工具：

4. 要将方向更改为纵向：

注意网格如何自动重新排列？这里的技巧不在于style.css文件，而在于gridism.css；如果我们在文本编辑器中打开它并查找代码块，大约在第 50-61 行左右，它会像这样：

我们可以看到该库充分利用百分比值来为每个块分配宽度。这里的关键不在于设置的宽度，而在于我们的容器的大小；对于 gridism，默认设置为978px。因此，例如，如果我们设置一个单元格宽度为.one-third，我们希望占据736px的33.3332%，即245.33px。然后，我们通过将 box-sizing 属性应用于我们的每个网格单元格来确保所有网格单元格具有正确的尺寸。

看，这多简单？我们只需指定我们需要的列类型的名称，具体取决于我们需要它有多宽：

等一下。为什么屏幕截图显示的是215.33，而不是计算所指示的245.33？

啊哈，这只是我们需要注意的一点；当使用像 Gridism 这样的网格系统时，计算是基于我们视口的全宽度的。任何所需的填充将包含在我们列的宽度计算中，因此我们可能需要比预期的稍大的列！这表明，即使我们的网格系统没有当前系统的所有功能，只要我们仔细规划，我们仍然可以制作出一个可用的网格。

好的，让我们继续。我们曾经提到过，许多网格使用 flexbox 来帮助控制它们的外观；这是一个很好的选择，但可能需要设置许多额外的属性，否则对于简单的布局来说是不必要的。通过仔细规划，有可能避免使用它，但如果我们正在处理具有许多不同元素的复杂布局，那么在某些情况下使用它将避免很多麻烦！考虑到这一点，让我们快速看一下它的基本工作原理。

探索 flexbox 的使用

那么，什么是 flexbox？

它是一个被设计为以更有效的方式在容器中布局和分配空间的模块，特别是如果它们的大小尚不清楚。我们可以设置一些属性来确保每个项目最好地利用其周围的可用空间，即使其大小发生变化。

在撰写本文时，这是 W3C 的候选推荐；这意味着它实际上是在 2016 年底成为浏览器标准之前的最后一次呼吁。尽管如此，大多数浏览器已经支持它作为标准：

来源：caniuse.com/#search=flexbox

要完全理解它的工作原理超出了本书的范围，但为了帮助入门，我们可以运行一个快速演示，并探索一些主要特性：

1. 从附带本书的代码下载中，提取flexbox.html和flexbox.css的副本；将 HTML 标记存储在我们项目区域的根目录下，将 CSS 样式表存储在我们项目区域的css子文件夹中。

2. 在浏览器中尝试预览flexbox.html。为此，我们需要启用浏览器的响应模式（或设备模式，取决于浏览器）；如果一切正常，我们应该看到类似于这个屏幕截图的东西：

该演示基于 Irina Kramer 创建的一个笔记本，可以在codepen.io/irinakramer/pen/jcLlp上找到；为了我们的演示目的，我们专注于从该笔记本中提取的示例布局。

乍一看，这个演示看起来非常简单。它肯定可以在颜色方面提供一些帮助，但这并不是我们目前感兴趣的。如果我们深入挖掘代码，我们会发现 flexbox 已经被应用在各个地方；让我们更详细地探索它的使用。

仔细观察

仔细看一下我们的代码，我们会发现其中有很大一部分使用了标准属性，这些属性可能在任何网站上都能找到。对我们感兴趣的代码从第 50 行开始；为了理解它的作用，我们首先需要理解 flex 布局的基本概念：

来源：W3C

简而言之，项目按照主轴（从主开始到主结束）或交叉轴（从交叉开始到交叉结束）进行布局：

属性	目的
main axis	伸缩项目布局的主轴；这取决于 flex-direction 属性。
main-start |  main-end	容器内放置的伸缩项目的起点和终点（水平）。
main size	伸缩项目的宽度或高度，取决于主尺寸，是项目的主尺寸。主尺寸属性可以是项目的高度或宽度尺寸。
cross axis	与主轴垂直的轴。其方向取决于主轴的方向。
cross-start | cross-end	用于填充项目并放置到容器中的伸缩行的起点和终点（垂直）。
cross size	这是伸缩项目的宽度或高度，取决于交叉尺寸。

有了这个想法，让我们来探索一些在我们的代码中使用的 flexbox 术语；最初的几个样式是适用于任何网站的标准规则。我们感兴趣的代码从第29行开始。

如果我们滚动到那一行，我们会看到这个：

我们的第一个属性display: flex定义了包含伸缩项目的容器；在这里，我们设置它以行的形式显示项目，并从左到右换行。如果我们的布局中有多列，我的意思不仅仅是两三列，那么我们可能会使用align-items和justify-content来确保每一列均匀地分布在行中，而不管每一列的宽度如何。

有了.grid的定义，我们需要为我们的网格单元格或容器进行样式设置。我们可以应用几个属性；我们使用的是flex，这是flex-grow，flex-shrink和flex-basis的简写。在我们的情况下，建议使用简写版本，因为这将自动设置其他值；我们将flex-grow设置为1，这表示它应该在同一容器中的其他伸缩项目中增长多少。

我们感兴趣的下一个属性是在.nav规则中。在这里，我们再次使用了 flex-flow，但这次我们还使用了 justify-content；后者控制了每一行上的项目是如何排列的（在这种情况下，朝着行的末尾）：

我们特别感兴趣的最后一段代码是在大屏幕媒体查询中的这一部分：

order 属性只是指定了我们的伸缩容器中每个项目的顺序；在这种情况下，我们有.aside-1和.aside-2分别在位置 1 和 2（不在镜头中），而.main在中间位置 2。

注意

根据我们的需求，我们可以设置更多属性。查看原始笔的源代码。在线上有很多关于 flexbox 的参考资料，首先可以看看 Chris Coyier 的指南，网址为bit.ly/1xEYMhF。

让我们继续。我们已经探索了现在可能的一些例子，但是使用 flexbox 至少有一个缺点。这项技术非常有效，但在网站实施时可能会增加大量代码和复杂性。

是时候寻找一些更简单的东西来使用了，这不需要同样的努力来实现；进入 CSS 网格模板！这仍然是一项早期技术，浏览器支持有限，但已经更容易实现。让我们深入了解一下。

访问未来

想象一下，我们有 flexbox 作为一种创建网格布局的技术，但它的设计是用于更简单的一维布局；如果布局复杂，它就不太适用！有没有一个答案，更好的东西，专门为这项工作设计的？

幸运的是；我当然是在指一种相对较新的技术，名为 CSS Grid Layout。目前对它的支持还很有限，但这可能会改变。简而言之，它提供了一种更简单的方式在浏览器中创建网格，而不像 flexbox 那样拥有大量的选项。

使用 CSS Grid Layout 作为一种技术的缺点是，对它的支持尚未普及；它在 IE11/Edge 中得到支持，但只在-ms-前缀下支持。Opera、Firefox 和 Chrome 提供支持，但都需要启用标志才能查看结果：

来源：CanIUse.com

暂且不谈对支持的担忧，很容易看出为什么 CSS Grid Layout 将作为一种技术蓬勃发展。整个概念旨在简化我们如何引用单元格、行和列；与 flexbox 相比，使用 CSS Grid Layout 更容易应用样式。

注意

如果您想了解更多关于 CSS Grid Layout 的信息，请在网上查看。Chris House 的这篇文章解释得很好：bit.ly/2bMGlDp。

为了看看它的效果，让我们深入研究并构建一个简单的演示，以说明网格布局中的一些图片。

实现基本画廊网格

对于我们的下一个演示，我们将利用开发人员 Rachel Andrew 在codepen.io/rachelandrew/full/LGpONE/创建的一个示例；我们将用来自 Flickr 的图片替换它们，展示我最喜欢的欧洲小镇布鲁日的图片。不，这与蕾丝无关，你问之前：美食、美酒、绝佳的氛围、出售的令人惊叹的巧克力……我想你还能要求什么呢？

但我岔开了话题。在我们开始创建我们的代码之前，有几点我们必须牢记：

• 这个演示是尖端的，不会在所有浏览器中运行，对于一些浏览器，需要在其中启用支持。请注意，启用标志是完全可以的，但请确保您选择正确的标志：

• 我们必须在第 1 步重新启动 Google Chrome，所以确保在演示开始时只显示标志页面。

话不多说，让我们开始我们的演示吧：

1. 我们将首先在 Google Chrome 中启用对 CSS Grid Layout 的支持。要这样做，浏览到chrome://flags，并搜索实验性网络平台功能。单击启用按钮以激活它，然后点击页面底部的蓝色立即重新启动按钮以重新启动 Google Chrome。

2. 在启用支持后，继续从本书附带的代码下载中提取gridtemplate.html的副本；将其保存到我们项目区域的根目录。

3. 在一个新的文本文件中，添加以下样式。我们将按块进行解释，首先是一些用于我们的图片和标签的初始样式：

        body { 
          font-family: helvetica neue, sans-serif; 
        } 

        img { 
          max-width: 100%; 
          border-radius: 10px; 
        } 

1. 接下来是设置我们的容器所需的规则；请注意，与我们的网格相关的唯一样式是box-sizing，我们将其设置为border-box：

        .wrapper { 
          list-style: none; 
          margin: 0; 
          padding: 0; 
        } 

        .wrapper li { 
          box-sizing: border-box; 
          padding: 1em; 
          min-width: 1%; 
        } 

1. 真正的魔法开始在一组媒体查询中发生；我们首先将 wrapper 分配为我们的网格容器，然后设置网格的列和行布局：

        @media screen and (min-width: 500px) { 
          .wrapper { 
            display: grid; 
            grid-template-columns: 1fr 1fr; 
          } 

          .wrapper li:nth-child(1) { 
            grid-column: 1 / 3; 
          } 
        } 

1. 在我们的第二个查询中，我们为我们的网格包装器和列表项设置了单独的样式，这次是针对 640 像素或更大的情况：

        @media screen and (min-width: 640px) { 
          .wrapper { 
            grid-template-columns: 1fr 1fr 1fr; 
          } 

          .wrapper li:nth-child(1) { 
            grid-column: 2; 
            grid-row: 1 / 3; 
          } 

          .wrapper li:nth-child(2) { 
            grid-column: 3; 
            grid-row: 2; 
          } 

          .wrapper li:nth-child(3) { 
            grid-column: 1; 
            grid-row: 1; 
          } 

          .wrapper li:nth-child(4) { 
            grid-column: 3; 
            grid-row: 1; 
          } 
          .wrapper li:nth-child(5) { 
            grid-column: 1; 
            grid-row: 2; 
          } 
        } 

1. 将文件保存为gridtemplate.css，保存在我们项目区域的css子文件夹中。

2. 尝试在浏览器中预览结果；如果一切正常，我们应该看到类似于这个截图的结果：

好吧，承认吧。这可能不是你所期望的样式，但这个演示不是为了让它看起来漂亮，而是基本的网格效果。然而，有一些重要的概念是值得理解的，所以让我们深入探讨一下我们演示中发生的事情。

探索发生了什么

在本章的早些时候，我们探讨了 flexbox 如何用于创建网格布局；如果我们比较 CSS 样式，很容易看出，使用 flexbox 需要提供更多的样式，而使用 CSS Grid 布局则需要更少的样式。

我们在核心样式中唯一使用的样式属性是box-sizing，我们将其设置为border-box。在这一点上没有使用其他任何东西——我们所有的 CSS Grid 布局样式都在两个媒体查询中设置。

我们的第一个媒体查询将.wrapper类设置为我们的网格容器。请注意，我们只需要设置一次，因为它将在大于500px的更大视口中级联。

一旦网格容器被分配，我们就可以为我们的模板指定网格列——分配的1fr值代表了网格中每个单元格内容周围的自由空白空间的分数（因此是fr单位）。然后我们在两个媒体查询中通过指定grid-row或grid-column来完成——这些值定义了网格项在网格中的位置；这两个术语是grid-row-start、grid-row-end、grid-column-start和grid-column-end的简写。

注意

有关这些术语在创建网格中的使用方式的更详细解释，请参阅 Mozilla 开发者网络上的文章，网址为developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout。

进一步探索

学习新技术就像穿上新衣服；在某个时候，我们会长大，或者它们不再具有吸引我们购买时的吸引力。

在这样的时候，我们需要进步到更高级或具有额外功能的东西，否则我们的开发将停滞不前！幸运的是，在线上有数十种我们可以探索的选项——人们可能会原谅我们认为有太多选择，不知道从哪里开始？

一个很好的起点是一个响应式框架，比如 Bootstrap 或 Unsemantic；这些框架旨在提高可用性，并帮助加快开发过程。这些框架的推出旨在为各种移动功能、布局的快速原型设计提供网格或基础，使设计师和开发人员能更好地利用他们的开发时间。

这只是可用于帮助您的一部分，让我们简要地介绍一些可能作为起点的想法：

• Bootstrap可以从getbootstrap.com/下载，这个老牌网格系统最初是由 Facebook 创建的，后来成为了一个独立的产品。

• 如果你想探索更多不仅仅是一个框架的东西，那么Responsive Grid System可能是一个选择；它可以从www.responsivegridsystem.com/获得，对于那些使用 CSS 预处理器的人来说，还有一个 SASS 版本可用。

• 与其简单地下载一个框架，不如在线生成一个？为此，可以尝试Responsify.it (responsify.it) 和 Gridpak.com (gridpak.com)。

• 我们之前在 Gridfy 中使用了一个最小的网格系统，还有其他可用的选项，如果这个选项不合你的口味。例如，尝试一下 Gridly，可以从ionicabizau.github.io/gridly/example/下载。

• 值得注意的是，并非每个网格系统都可以作为独立的存在——有些是组件库的一部分。一个很好的例子是Formstone；它的网格系统可以从formstone.it/components/grid/获取。对于那些使用 Less CSS 预处理器的人来说，这个网格系统有一个可以与这个工具一起使用的版本。

• 继续讨论组件库的主题，为什么不看看Metro UI？这个库可以从metroui.org.ua/grid.html获取，甚至得到了微软的支持；不过它需要 jQuery！

• 你们中的一些人可能听说过 960.gs 网格系统，它在几年前是可用的——现在已经被Unsemantic取代，可以从unsemantic.com/获取。

• 我们讨论了使用 flexbox 作为创建基于网格的布局的技术；作为一个起点，为什么不看看 PureCSS 库？这可以在purecss.io找到；这是使用 flexbox 来产生清晰布局的一个很好的例子，而不需要太多麻烦。

作为开发者，这是响应式设计的一个领域，我们有很多选择；开源软件的好处在于，如果我们选择的框架不合适，我们总是可以尝试另一个！为了帮助我们做出决定，我们可以问自己几个问题：

• 你是否需要一个与 CSS 预处理器兼容的版本？尽管预处理的 CSS 是标准 CSS 的超集，但有一些网格系统是专门从 SASS 或 PostCSS 等预处理技术构建的。这比尝试将成品 CSS 转换为可以被我们的处理器编译的东西要容易得多。

• 你的网站有多复杂？它是一个单页的“名片”式网站，还是更复杂的东西？显然，给一个简单的网站加上复杂的网格布局是没有意义的；同样，如果我们正在构建一个复杂的网站，那么我们选择的网格系统必须达到要求。

• 浏览器支持是否是一个问题？如果我们可以放弃对一些旧版本浏览器的支持（特别是 IE8 以下），那么选择仅依赖 CSS 的选项比依赖 jQuery 的选项更可取。如果我们已经不得不使用不止偶尔的外部资源，同样的原则也适用。如果使用 CSS 就足够了，就没有必要添加插件。

• 你的网站是否需要使用需要使用主题库进行样式化的 UI 组件？如果是这样，检查一下库；它可能已经内置了一个我们可以使用的网格系统。

关键在于我们不应该简单地选择第一个可用的选项，而是仔细考虑可用的内容，并选择尽可能满足我们要求的东西。当然，任何样式都可以被覆盖——关键在于选择合适的样式，以便最小化或不需要覆盖我们的网站。

总结

为任何网站构建布局网格对其成功至关重要；传统上，我们可能首先做这个，但在响应式设计的世界中，内容是第一位的！在本章的过程中，我们已经涵盖了一些主题，帮助你入门，所以让我们花点时间回顾一下我们学到了什么。

我们从灵活的网格布局入手，提到我们可能需要改变我们的设计流程来促进创建响应式网格。然后我们继续探讨了我们可以使用的不同类型的布局，以及响应式布局与这些不同类型的比较。

接下来，我们开始布局中最重要的部分——设置可用的视口；这控制着任何时候可见的内容量。我们讨论了在我们的代码中设置视口指令的必要性，以便内容能够正确显示；我们还研究了不提供指令可能对内容外观产生负面影响！此外，我们还介绍了一些额外的属性和值单位，以及如何平衡视口大小和用户体验。

然后，我们开始探讨灵活的网格布局的好处，然后更详细地了解它们的工作原理；然后我们使用从互联网上获得的预构建网格系统创建了一个简单的演示。

接着，我们开始研究 flexbox 作为一种技术；我们通过一个简单的演示来探索它，然后剖析了使用 flexbox 时的一些问题。然后我们看到正在研发一种替代方案。我们以一个演示来结束本章，探讨了如何在今天激活它，以及一旦它成为主流标准，为其开发解决方案会更加简单。

现在我们的布局已经就位，是时候继续了。我们需要开始添加内容！默认情况下会添加文本，但是媒体呢？我们如何使其响应式？我们将在下一章中回答这些问题，以及更多内容，当我们看看如何向我们的页面添加响应式媒体时。

第三章：添加响应式媒体

一图胜千言……

任何网站的关键元素是视觉内容；毕竟，没有添加一些形式的颜色，文本会变得非常重复和乏味！

添加媒体不仅为网站增添色彩，而且可以作为展示潜在客户产品外观或如何使用产品的重要工具。事实上，销售额可能仅基于能够看到产品演示而上升。随着移动设备的出现，更重要的是我们不仅要添加媒体，还要确保它在各种不同设备上运行良好。

在本章的过程中，我们将探讨不同的方法来向我们的页面添加媒体，并看看如何轻松地使其响应可用屏幕大小的任何更改。在本章中，我们将涵盖以下主题：

• 了解使用<picture>添加图像的基础知识

• 探索添加图像的替代方法

• 使视频和音频内容响应

• 自动调整文本以适应屏幕

好奇吗？让我们开始吧！

使媒体具有响应性

到目前为止，我们在基本的响应能力上的旅程已经涉及到了如何使我们的布局自动响应变化；现在是时候对媒体做同样的事情了！

如果您的第一个想法是我们需要大量的额外功能来使媒体响应，那么我很抱歉让您失望；这要容易得多，而且不需要额外的软件来完成！是的，我们只需要一个文本编辑器和一个浏览器；我将使用我最喜欢的编辑器 Sublime Text，但您可以使用任何适合您的工具。

在本章的过程中，我们将依次查看图像、视频、音频和文本，并看看通过一些简单的更改，我们可以使每个内容都具有响应性。让我们开始我们的旅程，首先看看如何使图像内容具有响应性。

创建流体图像

常常说图像胜过千言万语。我们可以用媒体表达的东西比用文字表达的要多得多。对于销售产品的网站来说，这一点尤为真实；清晰、鲜明的图像比质量差的图像更能清晰地展现产品的形象！

在构建响应式网站时，我们需要我们的图像自动调整大小。要了解为什么这很重要，请从随附本书的代码下载中提取coffee.html并在浏览器中运行它。尝试调整窗口大小。我们应该看到类似于这样的东西：

！[创建流体图像]（img / image_03_001.jpg）

看起来不太好，是吗？撇开我对大自然最好的豆类饮料的偏爱，我们不能有不能正确调整大小的图像，所以让我们看看需要做些什么：

1. 继续提取coffee.html的副本，并将其保存到我们的项目区域。

2. 我们还需要我们的图像-这是在img文件夹中；将副本保存到我们项目区域中的img文件夹中。

3. 在一个新的文本文件中，添加以下代码，并将其保存为coffee.css：

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

1. 恢复到coffee.html。您会看到第 6 行目前已被注释掉；删除注释标记。

2. 保存文件，然后在浏览器中预览。如果一切顺利，我们仍然会看到与以前相同的图像，但这次尝试调整大小。

这一次，我们的图像会根据浏览器窗口的大小自动增长或缩小：

！[创建流体图像]（img / image_03_002.jpg）

尽管我们的图像确实更合适，但在使用此方法时，我们应该注意以下几点：

• 有时在使用响应式图像时，您可能会看到!important设置为height属性的属性；这并不是必要的，除非您在以后可能会覆盖图像大小的站点中设置大小

• 我们将max-width设置为100％作为最小值；您可能还需要设置width值，以确保您的图像不会变得太大并破坏布局

这是一种易于使用的技术，尽管有一个可能会让我们出错的缺点——你能发现是什么吗？如果我们使用高质量的图像，它的文件大小将非常大——我们不能指望移动设备的用户下载它，对吧？

不过不用担心——有一个备受浏览器欢迎的很好的替代方案；我们可以使用<picture>元素来控制根据可用窗口大小显示什么。让我们深入了解一下。

实现<picture>元素

简而言之，响应式图像是根据您的网站被查看的设备在页面上显示其最佳形式的图像。这可能意味着几件事情：

• 您希望根据用户的物理屏幕尺寸显示不同的图像资源。这可能是 13.5 英寸的笔记本电脑或 5 英寸的手机屏幕。

• 您希望根据设备的分辨率或使用设备像素比（即设备像素与 CSS 像素的比率）显示不同的图像。

• 您希望在浏览器支持的情况下以指定的图像格式（例如 WebP）显示图像。

传统上，我们可能会使用简单的脚本来实现这一点，但这样做可能会有潜在的风险，可能会下载多个图像，或者如果脚本在图像加载后加载，或者如果我们在 HTML 中没有指定任何图像并且希望脚本负责加载图像，那么可能根本不会下载任何图像。

我们显然需要一种更好的方式来管理响应式图像！HTML5 中一个相对较新的标签非常适合这项工作：<picture>。我们可以以三种不同的方式之一使用它，取决于我们是想要调整现有图像的大小，显示一个更大的图像，还是显示图像的高分辨率版本。建议的方法是：

1. srcset属性

2. sizes属性

3. picture元素

我们将详细探讨这三种方法；让我们先从在标准的<img>标签中实现srcset属性开始，然后再使用<picture>元素。

使用srcset属性

使用<picture>元素的一个关键好处是使用srcset属性来选择多个图像中的任何一个，取决于我们是想在不同视口中显示更高分辨率的版本还是不同尺寸的相同图像。

浏览器对此的支持非常好，只有 Opera Mini 和 IE11 不愿加入这个行列：

来源：caniuse.com/#search=srcset

要使用srcset属性，我们需要提供足够多的不同图像，然后根据定义的设备像素比例在适当的触发点指定应该显示什么，就像这个例子中所示：

<img src="img/small-image.png" srcset="small-img.png 1x, med-img.png 2x, lrg-img.png 3x"> 

在这里，src属性充当了那些不支持srcset的浏览器的备用图像（尽管现在支持得非常好！）。srcset属性允许我们根据设备像素比或可用视口指定不同的图像使用：

<img src="img/default.png" srcset="small.png 256w, med.jpg 511w, large.jpg 640w"> 

在这种情况下，我们的备用图像是default.png；然而，如果使用的浏览器支持srcset，那么它将在256w处显示small.png或在511w处显示med.png。然而，如果我们想要改变大小并根据可用视口使用不同的图像，那么我们就需要添加一个额外的属性——sizes。配置起来很容易，让我们暂停一下看看这在实践中意味着什么。

探索sizes属性

在响应式网站的内容中添加图片时，每个图像可能会占据元素宽度的 100％，但内容本身并不总是占据窗口宽度的 100％！例如，我们可能将每个图像元素设置为 100％宽度（以便填充其父容器），但屏幕上的整体内容只占可用屏幕宽度的 50％。

为了克服这一点，我们需要知道各种图像的 URL 以及每个图像资源的宽度；我们无法从页面布局中的标准标记中获取这些信息，因为图像在应用 CSS 之前开始下载。

相反，我们可以在 HTML 代码中使用srcset属性和适当的宽度描述符来简单设置适当的宽度。对于一些人来说，这有点具有争议，因为它开始模糊 HTML 标记和 CSS 呈现层之间的界限。不过，让我们来看一个如何设置代码的例子：

<img src="img/orchid.jpg" sizes="50vw" srcset="img/orchid.jpg 200w, img/orchid-2x.jpg 400w, img/orchid-hd.jpg 600w"> 

在这个摘录中，我们将默认设置为视口宽度的 50%或一半；然后浏览器可以根据可用宽度选择适当的图像来显示。

操作 HTML5 的元素

我们已经涵盖了使图像响应的两个关键部分，但为了将所有内容整合在一起，我们可以使用 HTML5 的<picture>元素，在大多数浏览器中得到了良好的支持：

来源：caniuse.com/#search=picture

<picture>元素使用以下语法：

<picture>
   <source media="(min-width: 60rem)" sizes="(max-width: 500px) 50vw, 10vw"
   src="img/high-res-image-2x.png 145w ">
   <source media="(min-width: 35rem)" src="img/med-res-image.png">
   <source src="img/low-res-image.png">
   <img src="img/fallback-image.png" alt="Non-supported browser.">
   <p>Text to display</p>
</picture>

在这个摘录中，我们将所有可以与<picture>元素一起使用的各种属性联系在一起；在这种情况下，我们指定了媒体查询（一个是60rem，另一个是35rem），如果我们的视口只有 50%或更少（代码中的50vw值表示），我们显示普通图像；如果更高，那么我们显示高清晰度图像（使用100vw值指定）。

注意

我们将在本章后面更详细地探讨这是如何工作的，探索发生了什么。

将所有内容放在一起

既然我们已经看到了这三个元素的使用，让我们把它们整合起来，创建一个简单的演示，根据可用视口自动调整要使用的图像。为简单起见，我们将只集中在图像上，但这并不妨碍我们将其进一步发展成一个全尺寸的页面！

让我们开始吧。对于这个演示，我强烈建议使用已安装的 Google Chrome；它的设备模式非常适合这个任务！

1. 从本书附带的代码下载中提取四个横向图片的副本，并将它们保存到项目区域根目录下的img文件夹中。

2. 接下来，打开文本编辑器，添加以下代码：

        <!DOCTYPE html> 
        <html> 
        <head> 
        <title>Adding responsive images with the <picture> element</title> 
        </head> 
        <body> 
          <picture> 
            <source media="(min-width: 800px)" sizes="(max-width: 1000px) 
            100vw" srcset="img/high-res-image.png 738w"> 
            <source media="(max-width: 799px)" sizes="(max-width: 600px) 
            100vw" srcset="img/med-res-image.png 738w"> 
            <img src="img/fallback-image.png" alt="Human"> 
          </picture> 
        </body> 
        </html> 

1. 将其保存为pictureelement.html，放在我们项目文件夹的根目录下。

2. 在 Google Chrome（或其他首选浏览器）中预览文件的结果。确保打开浏览器的设备/响应模式。

如果一切正常，我们应该看到图像在两个相似版本之间切换；为了识别哪个是哪个，我在一个图像上添加了高分辨率图像，在另一个图像上添加了中分辨率图像：

这是相同的图像，但这次使用的是中等分辨率版本：

尽管这个演示看起来很简单，但实际上并不简单。我们有能力构建一些复杂的语句，可以根据多个标准自动选择图像！了解这个演示如何工作是很重要的，因为这是使用它进行复杂示例的基础。让我们花点时间更详细地探讨一下。

探索发生了什么

如果我们浏览一下我们的图片元素演示，所使用的代码可能一开始看起来很复杂，但实际上比看起来简单！关键在于理解每个部分<source>语句以及它们如何相互作用。让我们先来解决第一个：

  <picture> 
    <source media="(min-width: 800px)" sizes="(max-width: 1000px) 100vw" 
    srcset="img/high-res-image.png 738w"> 
    ... 
  </picture> 

在这个示例中，我们指定high-res-image.png作为我们的源图像；这将只在我们的浏览器窗口显示的最小宽度为800px时显示。图像的大小将要么达到最大宽度为1000px，要么达到100vw——后者相当于可用视口空间的 100%宽度。图像旁边的738w只是代码中指定的图像宽度（1w 单位等于 1px，因此我们的图像宽度为 738px）。

转到第二个来源声明，我们发现它显示了一个类似的设置，但这次媒体查询的最大宽度限制为799px，并且图像的大小将变为600px或视口的全宽，具体取决于其当前大小：

<picture> 
  ... 
    <source media="(max-width: 799px)" sizes="(max-width: 600px) 100vw" 
    srcset="img/med-res-image.png 738w"> 
    <img src="img/fallback-image.png" alt="Human"> 
  </picture> 

为了完成<picture>元素，我们指定fallback-image.png作为那些尚未支持 HTML5 中的这个元素的浏览器的备用图像。

注意

我们只是挖掘了<picture>元素的一部分可能性；有关更多详细信息，请查看响应式图像社区组维护的网站，托管在responsiveimages.org/。

创建一个真实的例子

我们已经探讨了使用一些有用的技术使图像具有响应性的理论；现在是时候实践了！我们下一个演示的基础是使用谷歌地图制作一个响应式地图。

响应式地图，你会问？这应该是自动的，对吧？好吧，不，它不是，这使得它在移动设备上有点尴尬。幸运的是，我们可以很容易地解决这个问题；它的好处在于它只需要一点额外的 CSS：

1. 让我们开始浏览maps.google.com，然后输入我们选择位置的邮政编码；在这种情况下，我将使用 Packt 的英国办公室，即 B3 2PB。

2. 单击齿轮图标，然后选择分享和嵌入地图，如此屏幕截图所示：

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

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

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

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

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

此时，尝试调整浏览器窗口的大小。您会看到地图会自动调整大小；我们添加的 CSS 样式已经覆盖了 Google 地图中使用的标准样式，使我们的地图能够在任何设备上进行响应和访问。

进一步进行

在本章的整个过程中，我们遵循了只使用浏览器和文本编辑器构建我们的代码的原则。当然，这包括不下载任何对创建我们的示例核心的东西（保存媒体和内容）。

然而，有时这种方法并不足够，我们可能会发现需要额外的支持来完成工作。我们的首要问题应该始终是检查我们是否真的需要它，而不仅仅是懒惰！如果在回答这个问题时，我们确实发现需要额外的帮助，那么有许多来源可以尝试，以帮助进一步解决问题：

• 不用说，但是总有一天我们需要使用 jQuery（www.jquery.com）来帮助我们的开发。响应式设计的状态是，我们应该只需要 jQuery 来更容易地引用 DOM 中的元素，而不是使图像或内容具有响应性！

• 托管在responsiveimages.org/的响应式图片网站。我们在<picture>演示的最后简要介绍了它，但再次指出它是值得的。这是一个有用的资料汇编，可以帮助理解和使用<picture>元素。

• 开发人员 Scott Jehl 为<picture>创建了一个 polyfill，以扩展对那些不本地支持它的浏览器的支持；您可以从scottjehl.github.io/picturefill/下载它。

• 您需要一个响应式的轮播图吗？网上有很多可用的，但我发现工作得很好的一个是 ResponsiveSlides，可以从responsiveslides.com/获取。诚然，该项目已经存在几年了，但这个特定的插件保持了简单明了，非常符合本书的主题！

• 响应能力已经存在的一个很好的例子是使用 SVG 图像格式。这些实际上是基于矢量的图像，我们可以使用 CSS 进行操作；然而，SVG 图像的关键优势是可以自动增长或缩小，而不会失去质量。浏览器对该格式的支持非常好，尽管 IE（和 Edge）在使用这些浏览器时有一些需要注意的怪癖（有关更多详细信息，请参见caniuse.com/#feat=svg）。

• 另一个尝试的想法是使用响应式图标。一个值得一看的好例子是 FontAwesome 库，可以从fontawesome.io/获取。这些图标也可以等比例调整大小。在这种情况下，它们非常适合较小的图像，比如信用卡图标或电子商务网站上的购物篮。

• 更进一步，如何支持 WebP 图像格式？是的，这是一个尚未得到广泛支持的格式，在撰写本文时仅限于 Chrome 和 Opera。然而，当与<picture>元素一起使用时，它展示了一个不错的技巧：

        <picture> 
            <source type="image/webp" srcset="retina-image.webp 2x, 
            image.webp 1x" /> 
            <img srcset="retina-image.jpg 2x" src="img/image.jpg" 
            alt="an image" /> 
        </picture> 

• 在我们的例子中，浏览器将检查对 WebP 的支持，如果支持它，它将根据设备使用的设备像素比显示适当的 WebP 格式的图像。如果不支持 WebP，那么它将退回到使用 JPEG（尽管这也可以是不同的格式，比如 PNG）。

当我们习惯于使用响应式图片，并希望摆脱仅使用 HTML5 和 CSS3 时，我们当然可以做一些事情。但重要的是要注意，有许多在线运行的项目没有在这里列出。

这主要原因是年龄——一段时间内对响应式图片的支持不够完善，这意味着出现了许多项目来帮助提供对响应式图片的支持。对<picture>和相关元素的支持正在不断改善，这减少了一些旧项目的吸引力；值得考虑是否明智地使用它们，或者如果不使用它们的影响可以通过改变用户体验来减轻。

好的，让我们继续吧；我想是时候稍微动画一下了！好吧，这是一个糟糕的引子，因为我们接下来要探讨如何使视频具有响应性。在接下来的几页中，我们将看到虽然这里也适用一些相同的原则，但途中会有一些颠簸，这可能会影响我们的旅程。

使视频具有响应性

灵活的视频比图像稍微复杂一些。HTML5 的<video>保持其纵横比，就像图像一样，因此我们可以应用相同的 CSS 原则使其具有响应性：

   video {
      max-width: 100%;
      height: auto !important;
   }

直到相对最近，HTML5 视频一直存在问题——这主要是由于对运行 HTML 视频所需的编解码器的支持分裂。制作 HTML5 视频所需的 CSS 非常简单，但直接使用它会带来一些挑战：

• 托管视频需要大量带宽和昂贵

• 流媒体需要复杂的硬件支持以及视频

• 在不同格式和平台上保持一致的外观和感觉并不容易

对许多人来说，一个更好的选择是通过 YouTube 等第三方服务托管视频。有一个警告，他们将控制您的视频内容；如果这不是问题，我们可以让他们担心带宽问题和提供一致的外观和感觉；我们只需要让它适应页面！这需要一些额外的 CSS 样式来使其工作，所以让我们探讨一下涉及的内容。

嵌入外部托管的视频

要嵌入这些视频，我们需要使用 iframe，不幸的是，默认情况下它们不保持纵横比；我们可以通过 Thierry Koblentz 的 CSS 解决方案来解决这个问题。

假设我们有一个 YouTube 视频，比如这个，名为大野兔，由 Blender Foundation 制作：

(c) Blender Foundation | www.bigbuckbunny.org

看起来还不错，是吧？当然，我们不能立即看出这是来自 YouTube 的视频，但下一个屏幕截图清楚地显示了它是：

等等；那看起来不对，是吧？这个屏幕截图是在 Google 中拍摄的，但设置为模拟 Galaxy S5 手机的屏幕空间，但它清楚地显示视频不是响应式的。

要看到这一点，从本书附带的代码下载中提取youtube.html的副本到我们的项目区域，然后在浏览器中运行它。激活浏览器的响应式模式（或设备模式，取决于浏览器），并将屏幕调整为 360px x 640px。您很快就会看到它的调整效果不好！

我们如何解决这个问题？

诀窍是创建一个具有适当纵横比的框，比如 4:3 或 16:9（通过零高度和底部填充百分比），然后将视频放入框内，并通过绝对定位使其在框内拉伸到框的尺寸。底部填充作为帮助保持纵横比的宽度。让我们修改我们的代码来解决这个问题：

1. 在youtube.html中，在<head>部分中添加此链接：

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

1. 在下面，按照所示修改代码：

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

1. 保存文件。切换到一个新文件，然后添加以下代码，并将其保存为youtube.css，放在我们项目区域的css子文件夹中：

        .video-box-wrapper { 
          padding-bottom: 5.25%; height: 0; position: relative;padding-top: 
          1.875rem; overflow: hidden; } 

        .video-box-wrapper iframe,  
        .video-box-wrapper object,  
        .video-box-wrapper embed { position: absolute; left: 0; top: 0; 
        width: 100%; height: 100%; } 

注意

一句话注意——设置height: 0确保元素存在于 DOM 中，以便旧版浏览器可以正确格式化内部框。

1. 保存文件，返回到浏览器，并重新启用其响应式（或设备）模式，如果尚未打开。

2. 现在尝试预览结果；如果一切正常，我们应该看到类似于这样的东西。它使用相同的 Galaxy S5 大小设置，但这次放大到 150%以获得清晰度：

这看起来好多了！通过一些简单的样式，我们可以兼顾两全；我们可以让 YouTube 来处理所有繁重的工作，而我们专注于让我们的视频在多个设备上从我们的网站上可用。我们使用的 CSS 强制所有视频内容适应.video-box-wrapper容器的全宽度，然后相对于其正常位置进行定位。然后我们在底部添加了56.25%以保持经典的 16:9 纵横比，并在顶部提供了一些额外的填充，以便它不会出现在屏幕外！

注意

问题：我们是如何得到 56.25%的？这只是 9 除以 16（纵横比），即 0.5625 或 56.25%。

然而，有时我们必须托管自己的视频；这可能是为了控制可见性或防止在外部托管时播放广告。为了实现这一点，我们可以使用当前的 HTML5<video>元素在页面上呈现内容；让我们看看这在实际中是如何工作的。

介绍新的 HTML5 视频元素

如果在外部来源托管视频不可能，那么我们必须本地托管；为此，我们可以使用原生的 HTML5 视频标签，看起来像这样：

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

过去，HTML5 元素的编解码器支持在每个平台上都有所不同；2015 年，Firefox 在所有平台的浏览器中添加了对 H.264 的支持，这在很大程度上推动了对 HTML5 视频的支持。目前，对于这两种格式（MP4 和 WebM）的支持情况良好，但并非所有浏览器都支持 100% - 此截图显示了桌面和移动浏览器对 MP4 格式的当前状态：

来源：CanIuse.com

相比之下，对于 WebM 格式的支持并不是那么完整：

来源：CanIuse.com

实际上，我们唯一需要担心使用的格式是 MP4；如果需要，我们可以使用 WebM 格式。如果这样做，那么它必须在<source>列表中排在第一位；否则，浏览器将选择第一个可支持的格式（在这种情况下是 MP4），而不使用 WebM！

提示

在继续之前，我强烈建议确保你已经安装了 Google Chrome 或 Firefox - WebM 视频将在 IE9 或更高版本中工作，但如果没有为该格式添加编解码器支持，就无法使用！

既然我们已经介绍了，让我们继续并将其付诸实践，用一个简单的演示来说明<video>元素是如何运作的。

嵌入 HTML5 视频内容

如果我们的要求是必须自己托管视频，那么使用 HTML5 标准标签实现它非常容易；它包括在<video>标签中设置任意数量的不同来源，以便我们可以使用该浏览器支持的格式播放相同的视频。让我们深入了解一下我们是如何做到的：

1. 我们将从随本书附带的代码下载中提取以下内容的副本 - video文件夹和html5video.html。将它们保存到我们项目文件夹的根目录。

2. 在一个新文件中，继续添加这些样式；将文件保存为html5video.css，放在我们项目区域的css子文件夹中：

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

1. 尝试在浏览器中预览结果。如果一切正常，我们应该会看到类似于这样的东西（来自 Chrome 的截图）：

结果看起来完美 - 问题是，我们使用的是哪个版本的视频？找出的一种方法是右键单击视频，当它仍在播放时，然后单击另存为...。如果一切正常，我们应该会看到一个另存为对话框打开，准备保存 WebM 格式（如果使用 FireFox，Chrome 或 Opera）；否则将是 MP4（如果使用 IE）。

探索发生了什么

然而，真正的问题不是它是如何工作的，而是它是否是响应式的？

答案是肯定的；我们使用 HTML5<video>标签意味着我们可以选择任意数量的不同视频格式来使用；浏览器将简单地选择它能够播放的第一个可用格式。但顺序很重要：

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

如果我们交换顺序，让 MP4 排在第一位，那么 WebM 将被几乎所有浏览器忽略，因为几乎所有浏览器都可以播放 MP4！

真正的魔力不在于使用特定的视频格式，而在于我们创建的 CSS 规则：

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

我们使用百分比值意味着当我们的窗口调整大小时，它会自动缩放；视频的最大尺寸受到视频尺寸的限制，而不是屏幕上的其他元素。当然，我们可以决定将视频托管在父容器中；视频将填充该容器，但父容器可能只会延伸到站点的一部分。

构建一个实际的例子

如果你在互联网上花费了一些时间，可能会遇到一些开发者没有使用图像作为背景，而是视频的网站。

这并不是一个全新的概念；它已经存在了几年。如果小心处理，它可以运行得非常好。它是制作全尺寸视频作为响应式背景的完美候选者。它的好处是我们可以使用纯 CSS 使其响应。没错，不需要任何 JavaScript。

对于我们的下一个演示，我们将暂停创建内容。这一次，我们将从附带本书的代码下载中运行演示，并稍后更详细地查看代码。我们将使用 Blender 基金会的 Big Buck Bunny 项目的视频作为我们的背景；在此之上，我们将叠加一个使用 Lorem Ipsum 生成器生成的简单文本块。

要查看此示例，请继续运行附带本书的代码下载中的fullscreen .html演示。如果一切正常，您将看到视频在一个简单的<div>后面播放，上面有文本：

如果我们更详细地查看我们的代码，我们可以看到视频元素的使用；它被设置为自动播放，声音被静音，还设置了一个海报（或占位符）图像。然而，真正的魔力在于 CSS 样式，所以让我们更详细地探讨一下这一点。

探索发生了什么

使我们的视频工作的技巧在于这段代码。我们需要设置两个 16:9 宽高比的媒体查询（一个作为最小宽高比，另一个作为最大宽高比），以便我们的视频在屏幕上正确显示：

但在调整大小时，它会显示白色空间。我们通过设置负边距来解决这个问题，这样视口就会变得更宽，从而使我们能够将内容居中在屏幕上：

需要注意的关键点是height、top、left和width的值；尽管这些值看起来很极端，但在查看设置了16/9宽高比的内容时，它们是必需的，以帮助将视频居中在屏幕上。

完美！我们的视频播放得很好。我们可以轻松看到内容。一切应该都很好，对吧？嗯，是的和不是；诸如背景视频之类的概念并非没有风险；如果我们不小心，重要的是要了解事情可能出错的地方。让我们暂停一下，考虑一下我们的视频如果不小心可能会引起的一些潜在陷阱。

探索风险

在我们之前的例子中，我们探讨了将视频作为背景内容的概念。这是近几年流行起来的一种时尚，提供了一种有趣的效果，与我们可能会看到的标准图像不同！

然而，并非没有一定的风险；在添加视频作为背景内容时，有一些要考虑的要点：

• 可以添加视频，但我们不应该只是因为我们可以而添加它——我们使用这种方法添加的任何视频都必须增强网站的整体信息。

• 任何添加的视频可能会被设置为自动播放，但默认情况下必须将声音静音——如果可能的话，最好根本没有声音。

• 我们的视频是否符合网站品牌、语气、色彩搭配等？建立一个精彩的网站，然后用一个垃圾视频毁掉它是没有意义的。

• 成本是我们必须考虑的问题；托管视频内容可能很昂贵，因此必须尽可能压缩文件大小，并以适合多个设备（包括移动设备）的格式进行处理。

• 我们的视频不应该太长；我们必须在使它太长和不够长之间取得平衡，以使它不会感到太重复。

• 可访问性是一个关键要点；它必须具有足够高的对比度，以使文本叠加可读。

• 我们的视频可能看起来不错，但性能如何？如果您在背景中使用了一个大型、未经优化的视频，您的客户可能不会感谢您，因为这可能会减慢网站的速度；他们很可能会选择离开！

• 我们使用的兼容性技术在 IE8 上不起作用，因此必须包含一个静态占位符作为后备；以防我们使用的浏览器不支持 HTML5 视频或其属性（例如移动设备的自动播放）。

尽管我们有一些明显的指针需要考虑，但这不应该阻止我们使用这种效果；只要我们做得好，我就会不断推动可能性的边界！

使音频响应式

问题——我们已经致力于使视频响应式，但音频内容呢？

我们可以将类似的原则应用到 HTML5 的<audio>元素上；我们可以使用 max-width 而不是设置特定的宽度，并设置一个百分比来控制它在屏幕上的显示宽度。

实现这一点的代码非常简单，现在应该很熟悉——让我们看看涉及了什么：

1. 对于这个演示，我们需要使用合适的文件；出于许可原因，不幸的是，你在本书附带的代码下载中找不到任何文件！实现这一点的一种方法是复制 iTunes 文件（通常是.m4a格式），然后使用 Media.io（media.io/）等在线服务将其转换为正确的格式。在继续进行此演示之前，您需要将其转换为 MP3 和 OGG 格式。

2. 假设我们现在有了正确的文件，继续从本书附带的代码下载中提取audioelement.html的副本，并将其保存到我们项目区域的根目录。

3. 接下来，在我们项目区域的根目录中，创建一个名为audio的新文件夹；将音频文件的副本保存到其中，这些文件要么已经存在，要么是从第一步创建的。

4. 在一个新文件中，添加以下代码，并将其保存为audioelement.css，保存在我们项目区域根目录的css子文件夹中：

        audio { 
          max-width: 100%; 
          width: 800px; 
        } 

1. 尝试在浏览器中预览我们的工作结果——如果一切顺利，我们应该看到类似于这个屏幕截图的东西：

乍一看，它可能看起来并不特别，但<audio>元素本来就不打算看起来与众不同！关键在于当我们调整浏览器窗口大小时；我们设置了100%的最大宽度值，但通过在宽度属性中设置50rem的上限来限制了这一点。无论我们调整窗口多少次，音频播放器都会填满整个宽度，但不会超过50rem。

注意

与<video>元素不同，我们不能仅使用 CSS 调整高度；这需要使用 jQuery 覆盖<audio>元素，这超出了本书的范围。

让我们继续，将我们新学到的知识付诸实践，创建一个实际的例子——比如将视频全屏，并自动响应浏览器视口的变化？使用这种技术设置视频始终充满争议，但我不会逃避挑战，所以让我们毫不犹豫地深入研究，看看为什么在全屏使用视频时我们必须小心谨慎。

进一步进行

在本书的过程中，我们一直致力于使用 HTML5 和 CSS3 的核心技术；在许多情况下，这已经足够了，但总会有一天我们需要使用其他技术来帮助完成任务，因为我们已经超越了普通 CSS 和 HTML 代码的可能性。

幸运的是，在线上有很多选项可帮助我们使视频响应式，并提高我们的技能。不过，我们应该始终问自己，我们是否需要另一个库是因为生活的现实意味着我们无法在不使用它的情况下完成任务，还是因为我们变得太懒了！

如果确实需要下载和使用额外的库，有几个不错的选择可以尝试，包括：

• FluidVids：可以从toddmotto.com/labs/fluidvids获取；这个库已经有几年了，但可能值得一看。

• responsiveVideo：可以从cbavota.bitbucket.org/responsive-video/下载。这个已经存在了几年，所以可能效果不太好。

• Embed Responsively：它托管在embedresponsively.com/，并且会返回任何主要视频托管公司（如 YouTube）的适当嵌入代码；它也是响应式的！

• FitVids.js：这个插件可以从fitvidsjs.com获得，由 CSS Tricks 的 Chris Coyier 创建，可能值得一看，尽管它至少有 2-3 年没有更新了。

• MediaElement.js：它可以从mediaelementjs.com获得，并且是一个很棒的库，可以与<video>和<audio>元素一起使用；它允许我们覆盖标准元素，并使用 jQuery 和 CSS 来自定义它以满足我们的需求。有很多在线示例，以及如何使用 jQuery 实现自定义外观和感觉的适当教程。

小心提醒一下 - 一些用于 jQuery 的视频插件库已经有一段时间没有更新了；你可能会发现它们在最新版本的 jQuery 中无法正常工作。这并不一定是件坏事，因为对 HTML5 的<video>和<audio>元素的支持现在非常出色；这使得许多这些库变得多余！

注意

有些人可能会问为什么我们需要使用 jQuery 来美化 HTML5 音频或视频播放器；许多单独的元素无法使用纯 CSS 访问，并且需要 JavaScript 在用 CSS 样式之前暴露这些元素。

呼，我们几乎完成了这一部分的旅程，但在我们进入下一章节讨论如何使用媒体查询之前，还有一个制作响应式内容的部分；我们的网站上的文本怎么样？它可能不会立即让你联想到与视频和文本相关的内容（至少在使内容响应式的情况下），但一切很快就会变得清晰起来。

使文本适应屏幕

在构建网站时，毋庸置疑，我们的设计显然必须从某个地方开始 - 通常是添加文本。因此，在我们的响应式设计中，我们必须同时考虑到这一点。

现在是一个完美的机会来探索如何使我们的文本流动并填充可用空间。尽管文本不像图片或视频那样是媒体，但它仍然是必须在某个时候添加到我们的页面上的内容！考虑到这一点，让我们深入探讨如何使我们的文本响应式。

使用 em 单位进行大小调整

在处理非响应式网站时，尺寸可能会以像素值引用；这是一个完全可以接受的工作方式。然而，如果我们开始使我们的网站响应式，那么使用像素值调整内容大小就不太好了；我们必须使用其他方法。

有两种选择：em 或 rem 单位。前者是基于设置一个基本字体大小，大多数浏览器默认为 16px；在这个例子中，相应的像素大小在每条规则后面的注释中给出。

h1 { font-size: 2.4em; }      /* 38px */ 
p  { line-height: 1.4em; }    /* 22px */

不幸的是，使用 em 单位存在一个固有的问题；如果我们嵌套元素，那么字体大小将会叠加，因为 em 单位是相对于其父元素计算的。例如，如果列表元素的字体大小设置为 1.4em（22px），那么列表中的列表项的字体大小就变成了 30.8em（1.4 x 22px）。

为了解决这些问题，我们可以使用 rem 值作为替代，这些值是从根元素计算出来的，而不是从父元素计算出来的。如果你仔细观察本书中创建的许多演示，你会看到 rem 单位被用来定义演示中元素的大小。

使用 rem 单位作为替代

rem（或根 em）单位被设置为相对于根的单位，而不是父级的单位；这意味着我们消除了任何复合问题，因为我们的参考点保持恒定，并且不受页面上其他元素的影响。

这样做的缺点是支持——IE7 或 8 不支持 rem 单位，因此如果我们仍然需要支持这些浏览器，那么我们必须回退到使用像素或 em 值。当然，这引发了一个问题：我们是否仍然应该支持这些浏览器，或者他们对我们网站的使用量太小，不值得更新我们的代码？

如果答案是我们必须支持 IE8 或更低版本，那么我们可以采取混合方法；我们可以在我们的代码中同时设置像素/em 和 rem 值：

.article-body { 
  font-size: 1.125rem;  /* 18 / 16 */ 
  font-size: 18px; 
} 

.caps, figure, footer { 
  font-size: 0.875rem;  /* 14 / 16 */ 
  font-size: 14px; 
} 

注意我们首先设置 rem 值？支持 rem 单位的浏览器将首先使用这些值；不支持的浏览器可以自动回退到使用像素或 em 值。每个注释中的值都是像素等价值；例如，如果我们将18px除以16px（作为所有大小的基本值），我们将得到1.125，如文本中所示。

探索视口单位的使用

如果我们想进一步，那么还有另一种选择我们可以探索；如何使用视口单位？

这些有效地结合了两者的优点；视口单位（或1vw）是视口轴的 1%。因此，如果我们有一个宽度为 50 厘米的视口，一个vw单位将是 0.5 厘米。我们可以以与像素、em 或 rem 单位相同的方式指定大小。看看这个小节，它给出了它会是什么样子的味道：

h1 { font-size: 5.9vw; } 
h2 { font-size: 3.0vh; } 
p { font-size: 2vmin; } 

然而，美妙之处在于无论视口大小如何，字体大小都会始终正确显示，因为如果视口改变，它会自动调整大小。

提示

要看到这个在实际中的简单例子，浏览到codepen.io/alibby251/pen/xOGrqN并尝试调整浏览器窗口大小。看看文本如何自动更改大小，而不会失去质量？

进一步探讨

好吧，在这一点上，我们已经为我们的文本添加了响应能力；我们的网站看起来相当不错....我可以看到一个但的出现....

目前，对于响应式文本（特别是 vw 或 rem 单位）的支持非常好；对这两个单位会出现问题的浏览器是少之又少。然而，可能会有一天我们需要额外的帮助；与图像或视频内容不同，可供选择的选项并不多！最好的两个例子是 FlowType.js，可从simplefocus.com/flowtype/获取，以及 FitText.js，可从fittextjs.com/获取。

但问题是这些库已经有 2-3 年没有更新了，因此不太可能与最近版本的 jQuery 一起使用。这很好地说明了多年来响应式文本的发展情况，我们真的应该原生地使用它，而不是依赖 JavaScript！

总结

任何网站的关键部分必须是使用的媒体；毕竟，没有某种形式的颜色，它会变得无聊！对于响应式网站来说也是如此；在本章的过程中，我们已经涵盖了一些有用的技术来添加响应式媒体，所以让我们回顾一下本章涵盖的内容。

我们从研究使图像流畅开始，这是响应式媒体背后的基本概念；然后我们迅速转向使用 HTML5 的<picture>元素，看看它如何用于根据硬件能力指定不同大小的图像。我们探讨了一些可用的指针，如果我们决定现有的原生支持不够，我们需要从仅使用纯 HTML 和 CSS 进展。

接下来我们将看一下响应式视频；我们将探讨如何使用纯 CSS 使外部托管的视频具有响应性。我们还介绍了使 HTML5 <video> 元素具有响应性所需的技术，如果外部托管不是一个选择。我们还探讨了 HTML5 <audio> 元素，并看到我们可以使用类似的技术使其具有响应性。

然后，我们以探讨如何使标准文本具有响应性结束了本章；我们介绍了这在本书的许多演示中已经被使用过，然后探讨了不同的技术，比如使用 em 或 rem 值，这些通常比标准像素单位更好。最后，我们进行了一个关于使用视口单位来设置字体大小的快速演示，这样我们就可以看到如何在创建响应式文本时获得最佳效果。

哦，涵盖了很多内容！让我们继续。既然我们已经有了布局和内容，我们需要考虑如何正确调整它们的大小。媒体查询就是解决这个问题的方法，这将是我们下一章的主题。

第四章：探索媒体查询

移动设备将在 2014 年超过固定的互联网访问。

玛丽·米克尔（KPCB 的分析师）在 2008 年做出的大胆预测在 2013-14 年成真，当时移动互联网使用率首次超过台式机，达到了 51%。其中一部分可以归因于媒体查询的使用，其基本原则自 2000 年正式引入以来并未改变。

如今，查询可以支持从高分辨率图像到单色屏幕和手持设备的任何内容；在本章的过程中，我们将继续探索只使用浏览器和文本编辑器就可以实现的可能性，并向您展示在构建响应式网站时并不总是需要下载任何内容来创建媒体查询。

在这一章中，我们将涵盖以下主题：

• 了解媒体查询的基础知识

• 创建断点并消除对它们的需求

• 探索最佳实践和常见错误

• 进一步探索

好奇吗？让我们开始吧。

探索一些例子

打开浏览器；让我们去访问一些网站。

现在，你可能会认为我疯了，但请跟着我。我想给你看几个例子。让我们来看看在不同屏幕宽度下的一些例子。比如来自我最喜欢的咖啡公司星巴克的这个例子：

尝试调整浏览器窗口的大小；如果足够小，你将看到类似于这样的东西：

这里有另一个例子——我们不能忘记这本书的出版商 Packt 的网站：

尝试改变浏览器窗口的大小。如果我们调整足够大，它会显示这个：

对于我们的第三个和最后一个例子，让我们去访问 CSS Tricks，由克里斯·科耶尔创建的网站，网址为www.css-tricks.com：

如果我们将其调整为更小的宽度，我们将得到这样的结果：

现在，你可能会问，这一切的意义是什么？嗯，很简单。所有这些都以某种形式使用媒体查询；CSS Tricks 使用 WordPress 内置的查询，Packt 的网站使用 Drupal 托管，星巴克的网站则基于 Handlebars 模板系统。

关键在于所有的使用媒体查询来确定应该显示什么；在本章的过程中，我们将更详细地探讨如何使用它们来更好地管理响应式网站中的内容。让我们开始更详细地探索它们的构成。

了解媒体查询

开发者布鲁斯·李完美地总结了媒体查询的效果，就像水在不同容器中的表现：

清空你的思绪，成为无形无象的，如水。现在你把水放入杯子中，它就成了杯子；你把水放入瓶子中，它就成了瓶子；你把水放入茶壶中，它就成了茶壶。现在水可以流动也可以撞击。做水，我的朋友。

我们可以使用媒体查询来应用不同的 CSS 样式，基于可用的屏幕空间或特定设备特征。这些特征可能包括但不限于显示类型、屏幕分辨率或显示密度。媒体查询的工作原理是测试某些条件是否为真，使用以下格式：

   @media [not|only] [mediatype] and ([media feature]) {
       // CSS code;
    }

我们可以使用类似的原则来确定是否应该加载整个样式表，而不是单独的查询：

<link rel="stylesheet" media="mediatype and|only|not (media feature)" href="myStyle.css"> 

看起来很简单，对吧？媒体查询的好处在于我们不需要下载或安装任何额外的软件来使用或创建它们；我们可以直接在浏览器中构建大部分媒体查询。

探索可用的媒体类型

如果我们看一下前一节中的示例查询，我们会发现它的一部分是由正在使用的媒体类型组成的。这只是查询的一部分。所有媒体查询分为两部分，第一部分控制我们的 CSS 将如何显示，第二部分负责何时显示它。

看看这个例子：

<!-- CSS media query on a link element --> 
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" /> 

<!-- CSS media query within a stylesheet --> 
<style> 
@media (max-width: 757px) { 
  .sidebar { 
    display: none; 
  } 
} 
</style> 

这说明了引用媒体查询的两种方式：第一个示例没有指定媒体类型，因此我们可以推断默认情况下是所有；它的第二部分说明了当窗口宽度至少为800px时才适用。

第二个媒体查询也没有指定媒体类型，因此默认情况下会被推断为所有；这次，如果窗口宽度小于600px，.sidebar元素将不会显示。

让我们看看可以使用哪些媒体类型：

值	用于
all	所有类型的媒体
print	打印机或打印媒体内容
screen	屏幕/显示器（如计算机、手机或平板电脑）
speech	屏幕阅读器
braille	盲文触觉反馈设备
embossed	凸版盲文打印机
handheld	手持设备，不包括智能手机和平板电脑，它们使用screen代替
print	分页材料和在屏幕上以打印预览模式查看的文档
projection	投影演示
screen	彩色计算机屏幕和智能手机
speech	语音合成器
tty	使用固定间距字符网格的媒体（如电传打字机、终端或具有有限显示能力的便携设备）

此外，我们还有许多功能可以用来控制显示内容的触发器；值得了解它们，因为它们都起着重要的作用，但工作方式不同。让我们更详细地看一下列表，并逐个了解它们的作用。

列出可用的媒体特性

添加一个指定媒体目标的查询只是一半的工作；我们还需要给它一些控制何时显示的条件！为了实现这一点，我们可以提供一个或多个必须满足的条件，以便对内容进行样式化或显示。

让我们看看一些可用的选项：

属性名称	描述
aspect-ratio	视口的宽高比
device-aspect-ratio	设备的宽高比
device-[height|width]	设备屏幕的高度或宽度
height	视口的高度
min-device-pixel-ratio	检查设备的像素比率。适用于高清和视网膜设备（比率大于 2 的情况）
[min|max]-aspect-ratio	视口的最小或最大宽高比
[min|max]-device-aspect-ratio	设备的最小或最大宽高比
[min|max]-device-height	设备的最小或最大高度或宽度
[min|max]-width	视口的最小或最大宽度
orientation	视口的纵向或横向方向
resolution	设备的分辨率（以 dpi 或 dpcm 为单位）
width	视口的宽度

关键在于选择正确的属性来运行我们的测试；一个很好的例子是检查方向，以便我们可以确定平板电脑是纵向还是横向模式。我们将在本章后面充分利用其中一些查询测试。

好的，是时候继续了。到目前为止，主题是仅使用浏览器和文本编辑器可以实现的内容。这一开始可能看起来有限，但我坚持认为，许多人在创建查询时过于依赖额外的帮助（如使用 jQuery），而这并不总是必要的。主要情况下这样做是有效的，但有一些要考虑的地方：

• 您是否需要支持 IE8 或更低版本？如果是这样，那么我们需要为此提供额外的支持；然而，微软在 2016 年初做出的决定意味着 IE8 不再受支持，所以现在是真正考虑这个浏览器是否应该出现在您的设计中的时候了。

• 对于一些较新的媒体查询，比如最大分辨率，只在较新的浏览器中可用；值得检查 CanIUse.com 网站和服务器日志，以确认不支持旧浏览器是否会成为一个问题。

• 如果我们需要提供备用支持，那么不要自动假设这意味着我们必须使用基于 JavaScript 的解决方案；值得考虑您需要提供的支持，以及您是否真的需要使用媒体查询（稍后会详细介绍）。

好的，让我们继续：是时候进行实际操作，投入更实际的事情了！我们已经涵盖了构成查询的不同方面，并探讨了在仅使用浏览器和文本编辑器时需要考虑的一些因素。不过，在我们进行实际操作之前，我们需要涵盖另一个主题。有时我们需要测试多个条件。我们可以使用逻辑运算符来实现这一点。让我们快速更详细地看一下其中一些。

在我们的查询中引入运算符

当编写需要多个测试的媒体查询时，我们可以使用逻辑运算符来确认一个或多个 CSS 规则是否应用于我们的内容。如果我们使用逻辑运算符，我们需要将每个被测试的属性封装在括号中；否则，它将在我们的代码中生成错误。

让我们来看一些更常见的运算符的例子：

• And：它用于将多个媒体类型或媒体特性组合成一个复杂的查询。它的工作方式与算术和运算符一样，也就是说，需要每个条件都为真才能执行查询。

• Not：我们可以使用它来否定一个查询。它适用于整个媒体查询，只有整个查询否则会返回 false 时才起作用（比如在600px显示器上对min-width: 700px的应用）。这个运算符必须与媒体类型一起使用。

• Only：它用于仅在需要在旧浏览器中阻止应用选定样式时应用样式。

提示

媒体查询是区分大小写的，如果遇到未知的媒体类型，将返回 false。

到目前为止，我们已经讨论了媒体查询的基础知识：让我们探讨如何使用它们来通过识别我们的设计在不同屏幕尺寸下出现问题的地方来管理内容。这些断点，或者断点，是媒体查询起作用的关键 - 尽管很明显我们需要正确地设置它们，但也很重要的是要知道何时应该使用它们，何时不应该使用它们...

识别常见的断点

在响应式设计的时代，断点是成功网站的关键；这完全取决于我们定义设计在何处会出现问题，如果我们调整可用屏幕宽度。重要的是要理解没有两个网站会使用相同的查询；尽管如此，有一些我们可以用作设计基础的查询。

我们先从标准桌面开始：

@media only screen and (max-width: 768px){ 
  /* CSS Styles */ 
} 

随着手机的迅速崛起，我们不能忘记那些有幸拥有智能手机的人，比如 iPhone：

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { 
  /* Styles */ 
} 

这个查询的缺点是它同样适用于任何足够小以满足给定*-device-width尺寸的设备。这不是我们想要的（或者打算的）；为了在移动设备和桌面之间建立更清晰的分界线，我们可以调整查询如下：

@media only screen and (max-device-width: 320px) { 
  /* Styles - for mobiles in portrait mode */ 
} 

这个是用于横向模式的手机：

@media only screen and (min-device-width: 321px) { 
 /* Styles - for mobiles in landscape mode */ 
} 

更进一步，我们还可以为平板电脑，比如 iPad，提供支持：

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
  /* Styles */ 
} 

这里也有类似的警告 - 我们没有设置一个足够清晰的阈值，只能应用于平板电脑。我们可以通过添加orientation属性来解决这个问题：

@media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
  /* Styles */ 
} 

为了完整地了解情况，我们同样可以检查平板电脑内容是否以横向模式显示：

@media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
  /* Styles */ 
} 

这些断点只是可以用于向任何网站添加媒体查询的一小部分；这并不意味着我们应该盲目使用它们；我们应该只添加那些允许我们支持目标设备的查询。当然，我们可以添加自定义查询，尽管存在添加多余查询的风险。让我们花点时间考虑添加自定义查询的影响，以及为什么这可能成为我们项目的问题。

提示

值得研究一下其他人在网上创建的媒体查询；有数十个示例可供使用，其中一些将针对特定设备，如智能手机或平板电脑。

创建自定义断点

我们已经概述的媒体查询应该涵盖各种情况；在这些情况下，我们的网站无法按预期工作。

我们该怎么办？嗯，我们不仅限于使用我们已经涵盖的标准查询；我们绝对可以创建自己的！

创建自定义断点非常容易，只要我们以正确的方式来做；如果做得不正确，我们可能会创建不必要的断点，对其他设备产生有限的用途或意外的连锁效应。为了理解我们的意思，让我们通过一个（理论上的）例子来工作。

想象一下，您的网站已调整到约 335px 左右，我们发现它有点不协调——有一些元素不太合适。为了更好地管理这个断点处的内容，诱惑会是编写这样一个查询：

@media only screen and (max-device-width: 345px){ 
  /* Styles */ 
} 

我们会在由“/样式/”标头的区域添加我们的更改。

听起来合理，对吧？如果不是因为一件事：我们现在刚刚为宽度低于 345px 的查看设备创建了一整套新问题！

解决这个问题的关键是不要简单地使用更大的像素值，因为这可能会破坏其他设备的布局——包括移动设备，在纵向或横向模式下。正确的解决方法是确定我们的查询失败的确切情况，并调整查询以更好地匹配情况，或者（理想情况下）确定设计本身是否可以进行调整，以避免需要查询。

例如，如果我们的网站在 325px 和 345px 之间出现故障，并且故障仅出现在纵向模式下，我们将创建这样一个媒体查询：

@media only screen and (min-device-width : 325px) and (max-device-width : 345px) and (orientation : portrait) { 
  /* Styles */ 
} 

这如何帮助我们？好吧，将我们的查询调整得更明确可以避免与我们可能已经创建的更通用的查询发生冲突。我们还使阈值限制更加清晰；除非我们能同时匹配所有三个条件，否则我们不会触发查询。

理解原理

一些开发人员可能会问，为什么我们不只是修复可用的视口；当我们改变方向时，视口的大小也会改变，所以内容肯定会调整以适应，对吧？

嗯，是和不是。这完全取决于理解内容的定位以及我们想要支持的设备类型，除了台式机之外。我们不应忘记，在纵向模式和横向模式下拥有不同布局是完全有效的；试着在 iPad 上的横向和纵向模式下查看 Packt 的网站！

在撰写本文时，纵向模式下显示了一个额外的元素，但在横向方向上却没有。如果纵向模式中的一个元素出现故障并且显示不正确，那么仅指定数字断点将不起作用。为了解决问题，我们还必须指定受影响的方向，否则修复一个模式可能会破坏另一个模式。

在设计中小心谨慎

好的，我们已经创建了一堆媒体查询，准备用于实施到网站中。我们可以继续并开始构建一些示例，还是？如果我说暂停一会儿，你很可能会认为我已经失去了理智；但像往常一样，这是有充分理由的。让我解释一下。

使用媒体查询的一个缺点是，没有两个网站会完全相同；这意味着我们不能总是在多个网站中重复使用标准查询。有时我们需要创建自定义断点来满足网站的要求；关键是要知道我们的网站何时何地可能需要额外关注，超出我们网站可能使用的正常断点。

创建自定义的临时查询很容易，但我们确实面临着创建过多的风险，这会削弱响应式设计的整体概念。我们能绕过这一点吗？是的，我们可以；这涉及到我们设计方法的转变，即不再专注于视口尺寸，而是专注于我们的内容。

消除断点的需求

到目前为止，我们已经介绍了如何使用断点来控制根据使用的设备显示和隐藏的内容。假设你正在为客户的项目工作，并创建了一系列查询，使用值如 320px、480px、768px 和 1024px 来覆盖对各种设备的支持。

无论我们的设计看起来如何，如果我们专注于使用特定的屏幕视口作为控制设计的基础，我们总会面临两个问题：

• 跟上可用设备的数量

• 限制我们的屏幕宽度的不灵活性

所以，等等。我们创建了断点，但这可能会导致更多问题？如果我们发现自己创建了许多针对特定问题的媒体查询（除了标准的查询），那么我们将开始失去响应式网站的好处；相反，我们应该重新审视我们的网站，了解为什么设计不起作用，并看看是否可以调整它以消除对自定义查询的需求。

最终，我们的网站和目标设备将决定所需的内容——一个好的经验法则是，如果我们创建的自定义查询比标准的四到六个断点多，那么也许是时候重新检查我们的设计了！

作为与特定屏幕尺寸一起工作的替代方案，我们可以采取一种不同的方法，即遵循自适应设计而不是响应式设计的原则。我们的设计是围绕着设计开始失败的点构建的，而不是简单地指定一些固定的屏幕尺寸（比如 iPhone 6 Plus 或三星 Galaxy 设备）。

为什么？答案很简单。这里的想法是提出不同的带宽，设计将在较低和较高值之间工作，而不是简单地指定检查低于或高于某些值的固定屏幕尺寸的查询。如果现在还不完全明白，不要担心；现在的关键是我们正在创建设计，这意味着我们可以减少支持如此多的设备的需求。

让我们把这个理论付诸实践，开始创建一些演示来展示我们如何在实践中使用媒体查询。

把我们的理论付诸实践

在本章的过程中，我们已经介绍了组成媒体查询的不同部分，就像有人曾经说过的那样，现在是时候了。

是的，是时候付诸实践了。在我们开始创建一些真实的例子之前，让我们创建一些可以用来探索添加媒体查询效果的东西。我们将从调整屏幕上的一些简单框开始：

1. 从代码下载中，继续提取queryexample.html的副本并保存到我们的项目区域。

2. 在文本编辑器中，继续添加以下样式；我们将从我们的盒子开始一些基本样式：

        body { background-color: #F3ECDD; text-align: center; 
          font-family: Arial, sans-serif; color: #ffffff; 
          min-width: 33%; } 

        .box { width: 100%; background: #905f20; border-radius: 0.625em; 
          margin: 0; } 

        .box2{ min-width: 100%; background: #6b8e6f; border-radius: 
          0.625rem; 
          float: left; } 

        h3:after{ content: ' is less than 30rem'; } 

1. 然后我们需要添加我们的媒体查询；在上一个样式规则的结束大括号下面添加这个：

        @media screen and (min-width: 30rem) { 
          body { background-color: #C7B47C; } 

          .box { width: 49.5%; float: left; } 

          .box + .box { margin-left: 1%; margin-bottom: 0.625em;} 

          h3:after{ content: ' is greater than 30rem'; } 
        }  

1. 将文件另存为queryexample.css，保存到我们项目区域中的css子文件夹中。

如果我们尝试通过运行queryexample.css来预览我们的工作结果，我们应该会看到类似于这个屏幕截图的东西：

让我们了解一下这里发生了什么。在核心 CSS（第 3 步）中，我们向我们的标记添加了三个<div>元素。由于我们给它们设置了100%的宽度，并且高度默认设置为auto，它们将堆叠成一系列方框。

如果我们像之前一样使用 Chrome 并激活设备模式，那么我们就可以开始看到调整浏览器窗口大小的效果。如果我们将宽度调整到30rem以下作为我们的断点（或480px），我们可以看到方框重新对齐并同时调整大小；背景也会变成浅棕色：

既然我们已经看到了设置查询的基础知识，让我们再进一步，创建一些实际的例子。我们将从设置一个简单的网页开始，然后应用一些简单的媒体查询。

创建一些实际的例子

在接下来的几页中，我们将探讨如何充分利用媒体查询；我们将构建两个演示，以说明我们可以使用查询的一些方式。演示本身可能看起来并不复杂，但这并不是坏事；使代码复杂只会使其更脆弱，更容易破坏，并且更难以支持。

让我们来看看我们的第一个演示，它为基本作品集模板页面添加了响应式支持。

使其真实

使其真实——多么贴切的标题！有一个很好的理由。在探索新概念时，我最讨厌的之一就是探索一个如此简约的演示，以至于没有包含任何能够真正展现我想要开始在我的开发中使用的功能的东西。

创建媒体查询不应该是一个例外。在我们之前的例子中，我们创建了一些测试查询，以查看当浏览器窗口调整大小时三个方框会如何互动。但要将其放入上下文中，需要更深入一些；探索如何向可能是新站点或现有站点的作品集页面添加类似查询是一个不错的选择。对于我们的第二个演示，我们将创建一个简单的网页模板，然后开始添加和开发查询，以使其可以在移动设备上使用。

注意

这里有一个重要的观点。你们中敏锐的人可能会注意到，这不是我们之前在书中提倡的移动优先方法。是的，移动优先绝对是首选的方法，但我们生活在一个可能不可能的世界，我们可能需要为现有站点添加查询支持。即使我们不是按照我们首选的顺序进行操作，下一个演示中使用的媒体查询原则仍然适用。

让我们开始：

1. 首先，我们需要从随附本书的代码下载中提取一些文件；继续保存responsive.html，两个coffeebeans.png图像（普通和小尺寸）和video文件夹到我们项目区域的根目录。将这两个图像移动到此文件夹内的img文件夹中。

2. 在一个新文件中，添加以下样式并将其保存为我们项目区域的css文件夹中的responsive.css。第一组样式创建了我们演示的主文本区域和整体容器：

        #wrapper { width: 96%; max-width: 45rem; margin: auto; padding: 2%; 
          border: 1px solid #000; margin-top: 3rem; border-radius: 0.2rem; 
          margin-bottom: 3rem; } 
        #wrapper > header > img { display: none; } 

        #main { width: 60%; margin-right: 5%; float: left; } 

1. 这处理了移动视图顶部的“跳转到…”；现在它是隐藏的，但在媒体查询激活时将可见：

        #skipTo { display: none; } 
        #skipTo li { background: #197a8a; } 
        #skipTo a { color: #fff; font-size: 0.8rem; } 

1. 我们需要一些东西来托管我们的视频和横幅图像；这些样式为我们处理了这些：

        #video-wrapper { padding-bottom: 2rem; } 
        #video-wrapper video  { max-width: 100%; } 

        #banner { float: left; margin-bottom: 0.9375rem; width: 100%; } 
        #banner { height: 15rem; width: 44.5rem; background-image: 
          url('../img/coffeebeans.png'); max-width: 100%; }  

1. 我们的主演示窗口右侧有一个侧边区域；我们需要一个样式来控制它的尺寸：

        aside { width: 35%; float: right; } 

1. 我们的网站中使用了一些链接，主要是按钮的形式。这处理了它们的样式：

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

1. 网站的一个关键部分当然是导航。这些样式规则管理了基于一些无序列表项的演示：

        header { font-family: 'Droid Sans', sans-serif; } 
        header h1 { height: 70px; float: left; display: block; 
          font-weight: 700; font-size: 2rem; } 
        header nav { float: right; margin-top: 2.5rem; height: 1.375rem; 
          border-radius: 0.25rem; } 
        header nav li { display: inline; margin-left: 0.9375rem; } 
        header nav ul { font-weight: 400; font-size: 1.1rem; } 
        header nav a { padding: 0.3125rem 0.3125rem 0.3125rem 0.3125rem; } 
        header nav a:hover { background-color: #8e5f57; color: #fff; 
          border-radius: 0.25rem; } 

1. 最后但同样重要的是，我们需要一些东西来使我们的页脚更具吸引力：

        footer { border-top: 0.0625rem solid #ccc; clear: both; 
          height: 1.875rem; padding-top: 0.3125rem; } 

1. 保存文件。现在我们需要添加我们的媒体查询。在我们的样式表中留下两行，然后添加以下代码：

        @media screen and (max-width: 414px) and (orientation: portrait) { 
          #header { background-color: #8e5f57; } 
          #wrapper { min-width: 15.63rem; border: none; margin-top: 0; } 
          #wrapper > header > img { float: right; display: block; } 

          #skipTo { display: none; } 
          #skipTo a { padding: 0.625rem; text-align: center; 
            height: 1.25rem; background-color: #8e5f57; } 

          #main {float: left; clear: left; margin: 0 0 0.625rem; 
            width: 100%; margin-top: 10rem; } 

          #banner { display: none; } 
          aside {float: left; clear: left;margin: 0 0 0.625rem; 
            width: 100%; } 

          header h1 {margin-top: 1.25rem; height: 2.1875rem; } 
          header nav  {float: left; clear: left; margin: 0 0 0.625rem; 
            width: 100%; border-radius: none; } 
          header nav li  {margin: 0; background: #efefef; display: block; 
            margin-bottom: 0.1875rem; height: 2.5rem; } 
          header nav a  {display: block;  padding: 0.625rem; 
            text-align: center; } 
          header nav a:hover { border-radius: none; } 
        }  

1. 在第一个媒体查询下面再留出两行空白，然后添加以下代码：

        @media screen and (max-width: 736px) and (orientation: landscape) { 
          #header { background-color: #8e5f57; } 

          #wrapper { min-width: 15.63rem; border: none; margin-top: 0; } 
          #wrapper > header > img { float: right; display: block; } 

          #skipTo { display: none; } 
          #skipTo a { padding: 0.625rem; text-align: center; 
            height: 1.25rem; background-color: #8e5f57; } 
          #main {float: left; clear: left; margin: 0 0 0.625rem; 
            width: 100%; margin-top: 10rem; } 

          #banner { display: none; } 
          aside {float: left; clear: left;margin: 0 0 0.625rem; 
            width: 100%; } 

          header h1 {margin-top: 1.25rem; height: 2.188rem; } 
          header nav  {float: left; clear: left; margin: 0 0 0.625rem; 
            width: 100%; border-radius: none; } 
          header nav li { margin: 0; background: #efefef; display: block; 
            margin-bottom: 0.1875rem; height: 2.5rem; } 
          header nav a  { display: block;  padding: 0.625rem; 
            text-align: center; } 
          header nav a:hover { border-radius: none; }  
        } 

1. 保存文件，然后在浏览器中预览结果。最好使用 Google Chrome 或类似的浏览器，比如 Firefox：

一个非常漂亮的页面，我希望你会同意。它完美展示了我两个最喜欢的东西：我对咖啡的热爱和 Scrabble 棋盘游戏！我总是说咖啡一定是许多开发者武器库中的秘密武器，但我岔开了话题…

尝试调整屏幕大小；举例来说，让我们将其调整为414 x 736，或者相当于iPhone 6 Plus所需的大小：

我们可以使用 Chrome 的设备模式将方向切换为横向：

我们可以看到网站重新排列自己：

这是一个简单、干净的设计。关键在于我们可以将其作为添加更多支持其他设备的查询的基础。有一些重要的概念我们应该更详细地探讨一下，所以让我们停下来一会儿，看看媒体查询在我们的演示中起到了什么作用。

探索发生了什么

这个例子中使用的许多样式是为了美化我们的页面；对我们来说，关键规则从第 33 行和第 50 行开始，在这里我们分别为 iPhone 6 Plus 的纵向和横向模式设置样式。让我们更详细地看看这两个规则：

@media screen and (max-width: 414px) and (orientation: portrait) { 
... 
} 

这个规则规定屏幕宽度必须有一个max-width小于或等于414px；如果它更大并且仍然以纵向模式显示，那么这个规则将不适用。

在这个规则内，我们已经采用了主要块中已经使用的样式，并应用了改变，使我们能够在 iPhone 上查看网站时保持所需的效果。一个完美的例子是#banner块；在主要样式中，我们设置了一些属性来将其定位在屏幕上：

#banner { float: left; margin-bottom: 0.9375rem; width: 100%; } 
#banner { height: 15rem; width: 44.5rem; background-image: url('../img/coffeebeans.png');  max-width: 100%; } 

然而，这不适合在 iPhone 上显示，更不用说图像的尺寸是 717px x 214px。它还有 102KB！显然，我们不想在移动设备上不断下载这样大的图像（因为互联网访问很可能是按流量计费的），所以我们需要做点别的事情。

相反，我们使用了一个更小的版本，即coffeebeans-small.png。这个版本更可接受，只有 33KB，并且在移动设备上以纵向模式查看时位于页面的右上角。我们隐藏了原始版本，因为它不再需要：

@media screen and (max-width: 414px) and (orientation: portrait) { 
... 
  #wrapper > header > img { float: right; display: block; } 
... 
  #banner { display: none; } 
} 

一旦我们切换到横向模式使用它，这个规则就会生效：

@media screen and (max-width: 736px) and (orientation: landscape) { 
... 
  #wrapper > header > img { float: right; display: block; } 
... 
  #banner { display: none; } 
} 

请注意，我们不需要改变规则。图像保持相同的大小，并且已经设置为向右浮动，所以规则可以简单地重复使用。我们也必须在这里指定它；否则，它将根本不显示。要看到区别，请尝试使用 Google Chrome 模拟 iPad 模式设置演示：

我们可以看到，即使基本代码在#banner <div>中使用了coffeebeans-small.png，我们的媒体查询已经将其替换为coffeebeans.png。

提示

你可能会注意到，媒体查询的宽度没有以 rem 单位设置；这纯粹是为了与 Chrome 中的设备工具匹配。如果你愿意，你可以很容易地将它们设置为 rem 单位。

我们特意保持了演示中的规则简单；它们说明了我们如何在不费吹灰之力的情况下，让我们的页面在桌面、iPhone 6 纵向和 iPhone 6 横向模式下完美显示。然后我们可以重复相同的原则来扩展支持覆盖其他设备；关键是要确保我们使用的断点覆盖了足够多的设备，这样我们就不必在网站上添加更多不必要的内容。

现在让我们改变方向，但仍然与苹果主题保持一致。不，我不是在想食物！你们有多少人幸运地拥有 iPad？如果答案是肯定的，那么下一个演示将会很有趣。对于许多标准设备，我们在显示图像时受到分辨率的限制。

输入一个很棒的技巧。如何显示更高分辨率的图像？我们不需要下载任何东西来帮助实现这一点。大多数现代浏览器都可以直接实现这一点；我们只需要适当的媒体查询来告诉浏览器何时使用它们。

检测高分辨率图像支持

移动设备的出现（有些人可能会说是流行的崛起）带来了一个机会，支持更高分辨率的图像。

大多数用户无法在标准 PC 上区分单个像素。在典型距离下查看时，一些网站可能会显得太小而无法使用！相反，PC 将恢复到更真实的分辨率，例如 1,440 像素。

为了获得更流畅的视图，一些设备会打包额外的像素；这样做会使单个像素更难以查看，并且图像看起来非常清晰。这是由苹果发起的，他们将其营销为 Retina 显示屏；其他公司也开始效仿并制造能够支持高分辨率图像的设备。

幸运的是，我们不需要昂贵的 iPhone 或 iPad 来添加支持。我们可以通过媒体查询来实现这一点，并使用 Chrome 的设备工具来模拟测试。要了解如何操作，让我们创建一个简单的演示，切换两张蝴蝶兰植物的图像。为了知道显示哪张图像，每张图像都会在右上角显示分辨率：

1. 首先，打开你的普通文本编辑器，然后添加以下代码并将其保存为min-resolution.css：

        <!DOCType html> 
        <html> 
        <head> 
          <meta charset="utf-8"> 
          <link rel="stylesheet" type="text/css" 
            href="css/min-resolution.css"> 
        </head> 
        <body> 
          <div id="orchid"></div> 
        </body> 
        </html> 

1. 继续创建一个名为css的单独文件夹。在其中，将以下代码保存为min-resolution.css：

        #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; 
          }  
        } 

1. 我们还需要一个图像文件夹。将其创建为img，与css文件夹处于同一级别。

2. 从随书附带的代码下载中提取mothorchid.png和mothorchid@2x.png的副本，然后保存到img文件夹中。不要更改它们的名称！

3. 继续预览我们文件的结果。如果一切正常，我们将看到类似于这个屏幕截图的东西：

4. 要确认显示的大小，首先按Ctrl + Shift + I激活开发者工具栏。然后按Ctrl + Shift + M启用设备模式。我们将看到类似于这样的工具栏出现：

这里有两点需要注意的地方——一个是左边的设置（响应式），另一个是 DPR 或设备像素比。要触发显示更高分辨率的图像，尝试将左边的设置更改为iPhone 6 Plus：

注意 DPR 设置已经跳到3.0，我们的图像也已经改变：

希望你会同意这是一种简单的添加支持的方法。使用 Chrome，我们可以很好地展示高分辨率图像将会是什么样子；值得注意的是，它仍然应该在真正的设备上进行测试，因为即使是谷歌也无法完全在他们的浏览器内模拟特定的设备！

探索它是如何工作的

在这一点上，我相信你会问这一切是如何运作的。这是一个简单的技巧。关键在于我们在演示开始时使用的图像命名约定。

还记得我说过它们应该保存为从代码下载中保存的样子，不要更改名称吗？这样做的原因是我们在演示中使用了这一点。苹果设备（自 iOS4 以来）期望在文件名中看到@2x来表示高分辨率图像：

然后，我们利用我们的媒体查询，只有在检测到我们的min-resolution为120dpi或更高时，才设置为显示更高分辨率的图像。

注意

另外，你可能会看到min/max-device-pixel-ratio被使用。这是为了支持最近版本的 Safari。所有其他浏览器都可以使用min-resolution而没有问题，尽管并非所有浏览器都支持也可以使用的dppi或dpcm单位格式。

媒体查询的强大之处在于我们可以为那些可以支持更高分辨率图像的设备定制支持；如果设备无法支持，那么可以显示标准分辨率图像。

好的，现在让我们改变方向。尽管编写媒体查询是一项简单的任务，但在某些情况下，即使是最好的开发人员也可能做得不太对！这可能是从缺少视口标签到无意中编写相互冲突的查询等任何事情。让我们花点时间探索一些更常见的可能让我们犯错的地方，并看看一些指针，以帮助我们重新回到正轨。

检查一些常见的错误

在创建网站时，特别是响应式网站，很容易犯错；毕竟，学习任何新技术都是如此；我们一开始并不完美！

为了帮助您迈出响应式构建和创建媒体查询的第一步，让我们花点时间探索一些更常见的错误，了解它们为什么会引起问题，并通过一些指针来避免这些问题：

• 不包括视口标签：这是最常见的错误之一。在移动设备上工作时，如果我们希望它们在不缩放的情况下显示，我们必须包括此标签：

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

如果不包括该标签，则文本将显示得更小，因为移动设备默认会缩放页面。

• 语法错误：是的，这个老掉牙的问题是问题的另一个常见原因！尽管可能看起来很困难，但错误地输入查询可能会引发错误，特别是对于那些刚开始编写媒体查询的人来说。这里没有对与错的答案。这是一个在编写代码时要小心的问题；复制和粘贴。您可以查看 CSS Media Queries 网站（cssmediaqueries.com/）以获取大量可用的示例。

• 包容性媒体查询：让我们看一下这两个查询。乍一看，它们看起来完全合理，不是吗？毕竟，两者都设置为仅在屏幕显示，并且只有在屏幕尺寸大于767px时才会显示：

        @media screen and (max-width: 767px) {
          h1 { 
          font-size: 30px; 
          }
        }
        @media screen and (min-width: 767px) {
          h1 { 
          font-size: 40px 
          } 
        } 

问题是，我们在这里仍然存在一个问题。如果我们在样式表中设置这两个查询，那么如果我们的屏幕空间为767px或更大，它们都会生效。最好的情况是，我们可能最终得到h1为40px（而不是30px）；最坏的情况是，我们会得到一些奇怪的效果！在设置媒体查询时要小心。确保您的查询不重叠。

• 特异性和继承顺序：继续讨论重复选择器的主题（在某种意义上），我们可能会遇到的另一个陷阱是继承。例如，假设我们指定了这两个属性：

        h3 {color: darkred;}
        h3 {color: #f00;}

我们将会有什么颜色？如果你说是深红色，那么准备好惊喜；答案实际上是#f00或绿色。为什么这会给我们带来问题？如果我们写了几个媒体查询，但没有在断点上小心，或者没有正确规划我们的查询顺序，那么我们可能会多添加一个赋值。记住，如果两个选择器应用于同一元素，则具有更高特异性的选择器获胜。

在处理媒体查询时，很容易过度思考问题。在许多情况下，只需要一点预见和小心，我们就可以制定一些有用的规则，以在移动设备上管理我们的内容，而不会有太多重叠。

让我们改变方向继续前进。假设我们编写的任何代码在语法上都是正确的，现在是一个探索编写媒体查询时可以遵循的一些准则的好机会。尽管下一节的标题是探索最佳实践，但我个人讨厌这个短语。它是一个被滥用到死的短语！相反，把它们看作是一些友好的提示，以帮助改进您编写查询时的初级技能。这完全是探索可能性的艺术，同时平衡更实际的需求，比如我们的目标市场和支持的设备。

探索最佳实践

啊，使用这个短语让我感到不舒服！太多人在谈论某一主题时，总是认为自己的做法是最佳实践。

话虽如此，在创建媒体查询时，有一些有用的技巧可以使用；这不仅仅是遵循最佳实践，同样也是为了让自己更轻松地展示正确的内容在正确的设备上的正确时间：

• 设计媒体查询时，始终从小处着手。这样可以避免浏览器下载仅在较大屏幕尺寸下才需要的不必要元素。虽然也可以从大处着手，但通常需要大幅减少内容，并且不太容易管理。

• 在设计查询时，不要立即认为您必须在移动设备上包含来自桌面站点的所有内容。有时这样做并不合理。往往情况是，没有足够的空间或带宽来支持这样做！重要的是要考虑您正在构建的站点的上下文，以确保包含适当的内容。

• 要充分考虑内容的优先级。例如，在博客网站上，我们经常看到文章摘要旁边有图片。这些在较小的屏幕上显示效果不佳，因此考虑删除这些图片，只留下文章的详细信息、发布时间、作者照片等。我们仍然可以传达我们的信息，只需对设计进行一些简单的调整。

• 在使用媒体查询时要小心图片。页面大小正在增加，因此非常重要的是我们在查询中引用正确的图片。同样，如果我们有轮播等效果，那么我们应该考虑用静态图片替换它；这意味着我们可以显著减小页面的大小，因为大部分图片可以被移除。

• 不要试图迎合市场上的每一种设备；2015 年的研究显示，安卓设备有超过 24,000 种不同的型号，导致市场高度分散，几乎不可能完全支持。再次强调，服务器日志将有助于识别访问您网站的设备。通过检查这些日志，可以确定您应该关注的主要移动浏览器。

• 在设计时，考虑使用 em（或更好的 rem）单位。像素值在正常设计中效果很好，但在响应式站点中缩放时效果不佳。如果我们使用 em（或 rem）值，这将允许浏览器根据使用的缩放级别自动调整我们站点的设计。

• 使您的导航可伸缩。清晰和一致性应该优于与桌面站点相似。不要害怕使用与桌面站点完全不同的东西；清晰和导航的便利性应该优于其他因素，比如颜色。

• 尽可能使用图标和字体，甚至 SVG 图像。这些比标准图像更易于缩放，特别是在使用媒体查询时。我们甚至可以使用 CSS 更改后者的内容，并仍然保持清晰的图像。

• 注意字体大小。我们绝对可以使用媒体查询来显示更大或更小的字体，这取决于我们可用的屏幕空间。但需要注意的是，如果我们使用百分比值或 em/rem 单位，那么这些将更好地进行缩放，甚至可能无需使用媒体查询来处理字体。

• 注意视觉障碍用户，如红绿色盲。移动设备上的可用屏幕视口已经较小；如果字体大小不适应缩放，或者您选择了对比度较大的颜色，比如红色背景上的白色文字，您的用户肯定不会感谢您！

我们可以通过简单使用文本编辑器、浏览器和一些仔细的规划来完成很多事情。不过，很棒的是我们可以使用媒体查询来帮助实现这些建议中的许多。只是需要规划，这样我们就不会创建比需要的查询更多的查询！

让我们继续。在本章中，我们专注于只使用浏览器和文本编辑器来创建查询时可能的情况。我坚信太多人简单地求助于最近的库来帮助构建我们的查询；是时候回归基础了！

话虽如此，也许会有一些情况下我们需要使用 jQuery 或特定的库来帮助生成我们的查询。一个经典的例子是为旧版本浏览器提供支持，尽管不得不说是否仍然需要支持旧技术还是值得商榷的。不过假设我们有一个有效的需要使用库，让我们花一两分钟来探索一些可用的选项，以帮助创建那些不能简单使用 CSS 满足的查询。

深入探讨

在许多情况下，我们可以通过使用文本编辑器和浏览器来满足我们的需求；后者的设备模式（或响应模式）将在创建完全有效的查询方面发挥重要作用，这将适用于许多网站。

然而，有时这还不够。我们可能需要依赖额外的帮助来支持特定项目的媒体查询。然而，必须要问一下，这是否真的有必要，而不仅仅是找借口偷懒。最近浏览器中的媒体查询支持非常稳固！

话虽如此，如果我们必须使用外部帮助，那么在线上有很多选择。让我们来看几个例子：

• 纯 JavaScript 或 jQuery：不言而喻，但大多数解决方案将基于这两种技术之一；当然，这些将是明显的选择！不过需要注意的是，jQuery 始终是为了补充网站而设计的，并不是网站设计的核心部分；由于这个原因，有人可能会认为使用 jQuery 创建媒体查询不是一个好的用途。

• .resizr (resizr.co/)：这个网站是我们可以用来感受我们的网站在各种移动设备上可能运行情况的众多网站之一；它依赖于您的网站可以访问互联网，并且没有什么可以替代真实的情况！不过这是一个很好的开始，所以当您在真实设备上测试您的网站时，这应该意味着许多基本问题已经解决了。

• 我的设备像素比是多少？：托管在devicepixelratio.com/，这个工具可以计算出您的屏幕设备比例设置能够支持的内容。这对于我们可能想要使用高分辨率图像的情况非常适用。毕竟，如果您选择的设备无法显示它们，那就没有使用它们的意义了！

• Mediaqueri.es：托管在mediaqueri.es/，这个网站应该是任何开发者的武器库。它展示了使用媒体查询和 RWD 的启发式网站。

• Modernizr：可从www.modernizr.com获取，我们可以使用这个库来测试媒体查询的支持；另一种选择是使用@supports指令。在大多数情况下，可能是旧版本的 IE 会引起问题。如果我们仔细规划我们的网站，也许可以通过为 IE 提供一个基本网站，并在其他浏览器上添加额外的功能来设计出不需要这两者的需求。

• Restive.js：来自restivejs.com/，这个基于 jQuery 的插件是一个真正的多功能工具，可以让您为网站的不同方面添加响应式支持。

• 响应式设计模式：总部位于美国的 Code My Views 公司为响应式设计创建了许多模式；一旦你更习惯于使用媒体查询，这可能值得一看。你可以在codemyviews.com/blog/5-really-useful-responsive-web-design-patterns上看到更多细节。

无论你决定走哪条路，网上都有很多选项可供选择，以帮助开发你的媒体查询。关键在于要确保，如果你要添加额外的库，那么这对你的网站来说是正确的选择；这可能主要取决于你的项目是否必须支持 IE8 等旧浏览器。这个浏览器自 2009 年以来一直存在，真的应该永远被淘汰！

总结

创建媒体查询打开了无限的可能性；我们不必在每个设备上显示页面的每个元素，因此我们可以根据访问者使用的设备来选择展示什么！在这一章中，我们通过使用浏览器和文本编辑器介绍了许多有用的技巧，所以让我们花点时间回顾一下我们学到了什么。

我们以一个快速的互动演示开始，以说明一些知名网站如何使用媒体查询来重新排列屏幕上的内容，然后探讨了媒体查询的构造方式。

然后我们看了一些不同类型。这包括覆盖我们可以使用的媒体类型和功能，以控制内容的显示方式。然后我们转向了一些我们可能在代码中使用的常见断点语句，然后探讨了我们可能需要为特定目的创建自定义断点。我们还看到，如果我们对代码进行一些简单的更改，甚至可以减少或删除断点。

接下来是更实际地使用媒体查询。我们探讨了如何使用它们使简单页面上的内容在移动设备上正确显示（允许其方向）。然后我们讨论了如何使用媒体查询来控制我们在屏幕上显示标准或高分辨率的图像。

然后我们总结了一些我们可能会犯的常见错误，并讨论了一些可供选择的选项，一旦我们更习惯为我们的网站创建媒体查询，我们就可以使用这些选项。

哇，我们已经完成了技术开发的部分；作为我们创建响应式网站旅程的一部分，还有一个主题我们应该涵盖。如果解决方案不高效，那就没有意义。如果网站加载需要很长时间，你的访问者不会感谢你！我们可以通过一些简单的技巧来解决这个问题，作为优化我们的代码的一部分。我们将在下一章中探讨这个主题，以及更多内容。

第五章：测试和优化性能

在本书的过程中，我们已经探讨了响应式网页设计的一些基本要素，使用了 HTML5 和 CSS3，并学会了如何修改我们的代码，使内容在不同设备上响应。

我们应该记住，仅仅构建一个响应式网站是不够的，我们还必须测试和优化内容，使其在不同设备上尽可能高效地运行。如果我们网站上的页面加载缓慢，那显然是一个问题。在本章的过程中，我们将看一些我们可以使用的技巧和窍门，开始确保我们的网站足够响应，并且内容加载迅速。

在本章中，我们将涵盖以下主题：

• 探索页面加载缓慢的原因

• 优化我们网站的性能

• 测量网站性能

• 测试跨浏览器兼容性

• 探索最佳实践

好奇吗？让我们开始吧！

了解速度的重要性

使用可以访问互联网的不同设备的出现意味着速度至关重要——从托管服务器下载内容所需的时间以及用户与网站互动的速度对于任何网站的成功至关重要。

为什么重点关注我们网站在移动设备或屏幕分辨率较低的设备上的性能？有几个原因，包括以下：

• 近 80％的互联网用户拥有智能手机

• 大约 90％的用户通过移动设备上网，其中 48％的用户使用搜索引擎来研究新产品

• 大约 72％的用户会在加载时间超过 5-6 秒时放弃网站

• 移动数字媒体的使用时间现在显著高于桌面使用

如果我们不考虑这样的统计数据，那么我们可能会继续构建我们的网站，但最终会导致客户失去收入和市场份额，如果我们没有充分考虑我们的网站应该在何处运行的范围。与此同时，还有性能的问题；如果我们的网站速度慢，那么这将使客户失去兴趣并导致销售额下降。

旧金山基思度公司进行的一项研究表明，移动用户在关闭网站并对其失去信心之前等待 6-10 秒。与此同时，Guy Podjarny 为 Mediaqueri.es 网站（mediaqueri.es）进行的测试表明，我们经常为大屏幕和小屏幕下载相同的内容；当然，只要进行一些简单的更改，我们就可以根据需要调整内容以更好地适应台式电脑或移动设备！

那么，我们能做些什么？在开始探索何处进行更改之前，让我们看一看网站运行缓慢的一些原因。

了解页面加载缓慢的原因

尽管我们可能构建了一个在多个设备上运行良好的网站，但如果速度慢，那还是不够好！当然，每个网站的运行方式都不同，但有一些因素需要考虑，这些因素可能会影响页面（和网站）的速度：

• 不必要地下载数据：在响应式网站上，我们可能会隐藏在较小设备上不显示的元素；在代码中使用display: none意味着我们仍然下载内容，即使我们在屏幕上没有显示它，这导致网站加载缓慢和带宽使用更高。

• 在缩小图像之前下载图像：如果我们没有使用适当大小的图像优化我们的网站，那么在移动设备上可能会下载比必要更大的图像。当然，我们可以通过使用基于百分比的大小值使它们变得流动，但如果原始图像仍然太大，这会给服务器和浏览器增加额外的需求来调整它们的大小。

• 网站上使用复杂的 DOM: 在创建响应式网站时，我们必须添加一层额外的代码来管理不同的设备；这使得 DOM 更加复杂，从而减慢了我们的网站速度。因此，我们必须确保不添加任何不必要的元素，这些元素需要浏览器额外的解析时间。

• 从外部来源下载媒体或源: 不言而喻，这些不在我们的控制范围内；如果我们的网站依赖于它们，那么如果这些外部来源失败，我们的网站速度将受到影响。

• 使用 Flash: 依赖 Flash 的网站显然比不使用该技术的网站加载速度慢。值得考虑的是，我们的网站是否真的需要使用它；Adobe 最近的变化意味着 Flash 技术正在被淘汰，而更倾向于使用其他方式进行动画，比如 HTML5 Canvas 或 WebGL。

还有另一个要考虑的问题，我们在这个列表中没有涉及；自从九十年代中期互联网诞生以来，页面的平均大小显著增加。尽管这些数字可能不是 100%准确，但它们仍然给人一种明显的印象：事情已经发生了变化。

• 1995 年：当时，平均页面大小约为 14.1 KB。原因可能是它包含了大约两三个嵌入对象，比如图像。这意味着只需两三次对托管网站的服务器的调用。

• 2008 年：平均页面大小增加到约 498 KB，平均使用约 70 个对象，包括对 CSS、图像和 JavaScript 的更改。尽管宽带的可用性增加了，但并非每个人都能负担得起快速访问，因此如果我们的网站加载速度慢，我们将失去客户。

但并非一切都已经失去——我们可以使用一些技巧来帮助优化我们网站的性能。其中许多同样适用于标准网站和响应式网站——让我们更详细地看一下。

优化性能

到目前为止，我们已经探讨了我们的网站可能加载缓慢的一些原因，以及如果我们不解决性能问题将面临的后果。尽管我们可能面临的一些问题可能不容易解决，但我们仍然可以做出改变，帮助改善我们网站的性能。

从谷歌开始

分析显示，如果页面加载时间超过 4-5 秒，那么客户经常会选择放弃（也就是说，离开）。超过一秒的延迟同样会导致用户体验不佳。

一个很好的资源可以帮助我们了解一些问题的来源，那就是谷歌这个庞然大物。我们可能会批评它过于强大，但它显然知道一些有用的技巧！

谷歌表示，我们的页面不必在 4-5 秒内完全加载，但在此时间内应该可用；任何优先级较低的内容可以放在折叠处或在后台加载。

基本上，谷歌建议我们的服务器响应时间应该小于 200 毫秒——我们还应该探索诸如客户端渲染之类的方面，以帮助减少加载内容所需的时间：

从谷歌开始

尽管大部分内容适用于任何网站，但对于响应式网站来说尤为重要，因为需要额外的代码来管理移动设备的体验。

谷歌还建议我们考虑执行这些任务：

• 最小化呈现内容所需的重定向和往返次数

• 优化 JavaScript 执行和图像大小

• 避免阻止上折内容中的 JavaScript 和 CSS，通过将脚本推送到页面底部

• 减少页面调用的域名数量，有助于避免移动和桌面客户端之间的重定向

此外，我们可以探索使用其他技巧来提高性能。这些包括以下内容：

• 使用缓存：我们可以考虑使用这种方法来临时存储不经常更改的数据；如果内容没有更改，它将有助于减少对服务器的请求（因此带宽使用），。随着 HTML5 的出现，我们甚至可以使用离线 AppCache 功能。这还有一个额外的好处，即在我们的互联网访问失败时，可以使内容离线可用。类似的技术也存在于本地存储；虽然默认情况下无法离线使用，但如果需要，它可以用于缓存更持久的内容。

• 使用可缩放矢量图形（SVG）：与 JPEG 或 PNG 图像不同，这些图像可以在不损失质量的情况下调整大小，因此非常适合响应式设计；它们的大小通常比等效的标准图像小。但并不是每个应用都适合使用它们，因为它们更适合用于线条绘图或标志。

• 应用片段缓存：如果我们生成需要服务器资源来呈现的动态页面，但只有一小部分内容发生变化，那么应用片段缓存意味着我们可以存储不发生变化的内容的静态版本。然后在请求页面时，我们发送缓存的内容，只应用需要更新内容的更改。这减少了对我们的数据库后端的调用次数，因此减少了显示内容所需的资源。

• 优化数据库：如果我们的网站是一个内容来自不同来源的网站，那么内容将经常更新；垃圾数据也会同样增加。我们应该定期花时间清理数据库中的内容，以确保它尽可能小而且工作效率高。

进一步进行

如果我们想进一步探索，那么有一些更先进的、侵入性更大的改变可以帮助优化我们的网站。这需要更多的工作，因此应该计划为长期改变：

• 启用 GZip 压缩：我们可以使用这个来压缩资源，这将使页面加载更快。但是，这不应该在没有计划的情况下应用于整个网站；一些元素，如 CSS 或 JavaScript，在开发过程中可以进行压缩或缩小，因此应用 GZip 压缩不会产生任何好处。

• 选择我们的主机：有数十个主机可供选择；每个主机都将提供不同级别的功能和性能，这可能会影响我们网站的运行。选择合适的主机需要花时间；值得比较不同的主机，看看它们的表现如何，并从其他人那里获得推荐，看看谁在较长时间内表现良好。

提示

查看www.whoishostingthis.com上的公司评论，看看它们与其他公司相比如何。

• 排除不需要的内容或媒体：这几乎是不言而喻的，但我们不应该加载不需要的内容！理解客户需求是关键；如果客户坚持要在台式机和移动设备上提供所有内容，那么有必要向他们解释为什么这不是一个好的做法，并鼓励他们明白，在移动设备上提供较少的内容并不一定会导致糟糕的用户体验。

• 探索使用内容交付网络（CDN）：这有助于更快地呈现内容，因为它是从距离客户端最近的本地服务器获取的。内容通常上传到一个中心点，然后复制到世界各地的几个关键服务器；这减少了内容传输的距离和呈现屏幕上内容所需的时间。

• 限制 HTTP 请求：作为开发的一部分，我们应该考虑网站将需要向服务器发出的 HTTP 请求的数量，并努力尽量减少这些请求。这种减少将有助于减少网络流量并提高性能，因为我们不需要频繁访问 DOM，也不需要等待内容下载的时间太长。我们可以使用工具，比如创建图像精灵或预处理器将多个 CSS 文件合并成一个，来帮助尽量减少 HTTP 请求。

优化网站需要时间，但在精炼网站上花费的努力将会带来增加的赞助和最终增加的销售额。问题是，除非我们测试它，否则我们不会知道我们的网站表现如何；让我们更详细地探讨一些可以帮助我们评估网站运行情况的工具。

测试我们网站的性能

我们构建了响应式页面，改善了外观和感觉，也优化了网站的性能。但在应用上线之前，开发人员（或专门的测试人员）有责任测试网站的性能。

有一组工具可以使用：

• mobiReady（ready.mobi/）：这个免费工具用于测试响应式网站在不同分辨率下的性能。它根据诸如发送或接收的数据和发出的请求数量等因素，给每个页面打分，最高分为五分。

• Webpagetest（www.webpagetest.org/）：这个在线工具可以帮助我们测试网站的性能，针对我们想要的特定位置和浏览器。我们可以测试页面的许多不同因素，比如缓存静态内容、有效使用 CDN，或者是否启用了持续连接。

• Google 的 Pagespeed Insights 工具（developers.google.com/speed/pagespeed/insights/）：使用这个工具，我们可以对我们的响应式网站的速度进行分析，包括桌面和移动版本。这个工具根据网站的速度和用户体验给出 100 分的评分，并提供一个我们可以修复的指针列表，以及如何修复的详细信息。

• IntoDns.com（www.intodns.com/）：虽然这不是一个性能测试工具，但它可以帮助确定我们的 DNS 是否影响了网站的性能。它提供了网站和邮件服务器的报告，我们可以用来解决问题，最终帮助保持性能达到最高效率。

• YSlow（yslow.org/）：这个书签工具可以根据三个预定义的规则集或我们定义的自定义规则集对任何选择的网站进行评分。它根据不同数值的数组提供建议，比如 DNS 查找、使 AJAX 可缓存、避免 CSS 表达式和配置 eTags 等，来帮助我们改善页面的性能。

这些是一些有用的工具，可以帮助我们提高网站的性能和优化（还有很多在线工具可用）。然而，如果我们只专注于这些工具，我们就会错失一个机会。那么，我们可以利用浏览器中已有的功能呢？

大多数（如果不是全部）浏览器都内置了某种形式的 DOM 检查器，或者可以作为独立选项使用。这些工具可以提供一些有用的信息，可以作为对外部服务更深入详细信息的前提。为了看看可能性，让我们探索一下，如果我们在 DOM 检查器中对一个网站进行简单检查，我们可以得到什么；在这个例子中，我们将使用在线零售的权威亚马逊进行相同的测试两次：第一次将作为桌面浏览器，第二次将作为（模拟的）移动版本，使用 Chrome 内置的 DOM 检查器。

通过桌面示例进行工作

对于我们的测试，我们将从桌面浏览器开始——我们将使用谷歌的 Chrome，因为它有一套很好的工具；其他浏览器也可以使用，但可能得不到完全相同的结果。让我们开始吧，以亚马逊作为我们测试的基础：

我们需要做的是：

1. 启动 Chrome，然后按下Shift + Ctrl + I显示开发者工具栏。

2. 寻找窗口左上角的红色录制按钮，然后点击它。

3. 回到 Chrome 的窗口，然后浏览到www.amazon.com。页面加载完成后，点击红色的录制按钮停止录制。

此时，我们将得到一组结果，可以浏览类似于这个摘录：

起初，这些结果可能看起来毫无意义，但我们想要的细节在窗口底部。

这显示了发出的服务器请求数量，传输的内容量以及初始解析 DOM（DOMContentLoaded）所花费的时间；然后，完全下载内容（由Finish和Load事件的触发来指示）。

注意

请注意，DOMContentLoaded时间仅与解析文档有关，并不考虑其他资源（如脚本、图像或外部样式表）是否已下载。

尽管亚马逊的网站下载了相当数量的内容，但他们巧妙地利用了我们所介绍的一些技巧，帮助减少带宽使用并提高页面渲染速度。我们如何知道呢？尝试点击屏幕截图中显示的最后两个链接（或者浏览器中显示的资产列表中的链接 4 和 5）。

第一个链接显示了一个压缩的 CSS 样式表；如果我们仔细观察，可以推断出其中一些链接是使用自动化过程生成的。一个示例中的 PNG 文件名超过 70 个字符！使用长名称会增加文件大小；图像需要准确命名，但文件名长度要合理！

考虑到页面的大小和请求的数量，可能会认为这个网站面临性能问题。然而，如果我们仔细观察，就会发现很多内容是在后台加载的。这意味着我们仍然提供了良好的用户体验，优先加载了内容，次要内容在后台加载。

注意

要了解 Chrome 开发者工具中网络选项卡中所有设置的含义，可以查看谷歌开发者网站上的主要文档，网址为bit.ly/2ay9H8g。

现在让我们改变方向，关注在移动设备上查看相同的网站——这次是 iPhone 6 Plus。

在移动设备上查看

我们再次进行相同的测试，但这次将 Chrome 设置为模拟 iPhone 6 Plus，然后我们应该看到这样的结果：

真正的测试在于请求的数量，数据传输量和页面加载所花费的时间。这一次，我们的浏览器发出了 103 个请求，从服务器传输了 1.8 MB 的数据，并在大约 12 秒内完成了总下载：

在这里，我们可以清楚地看到，为了为客户提供最佳的用户体验，亚马逊巧妙地减少了页面大小和请求的数量。

我们应该不断监控我们的网站性能；随着 CSS3 属性的频繁添加或更新，我们可以开始更新我们的网站，并开始减少对外部库的依赖，从而提高网站的速度，最终提供更好的用户体验。

最佳实践

在这一部分，您将学习一些最佳实践和范例，这将帮助我们实现网页开发的实际目标：

• 砖头优先设计范式：在构建响应式网站时，最好的做法是以移动设备为基准，然后再添加额外功能以适应桌面使用。我们的思维应该是尽量满足移动设备用户的最低要求。

今天，我们知道每年移动设备销售的主要部分已被智能手机超越。尽管有很大比例的用户不经常购买移动设备，他们仍然拥有能够支持 Web 应用甚至本地应用的设备。除此之外，我们仍然有那些使用一些旧一代智能手机的人。我们甚至可以加入其他设备，如 Kindle 和半网页能力设备；如果我们加上这些数字，我们可能会达到一个惊人的总数！

现在针对这个庞大的受众，让我们考虑一些情况：

• 他们不会进行研究

• 他们不会阅读长篇文章

那些使用较旧手机的用户可能需要使用类似普通座机电话的标准键盘来浏览页面，而不是使用标准键盘。

较旧设备屏幕的小尺寸使得提供移动优先布局更加困难；这使得我们只显示这些用户所需的基本内容变得更加重要，其他元素应该从显示或下载中移除。

为旧浏览器提供支持

另一个最佳实践是为那些功能有限且不如今天的移动设备快速的旧设备改善我们网站的性能。

我们知道自从有了互联网，我们就有了用来显示内容的网络浏览器。我们不应忘记仍然有用户使用缺乏现代功能的旧移动设备；我们可以使用优雅降级来处理这个问题。

优雅降级是一种策略，用于处理不同浏览器的网页设计。如果我们使用优雅降级策略构建网站，那么它首先是为现代浏览器设计的，然后是为具有较少功能的旧浏览器设计。它应该以这样一种方式退化，使得我们的网站在外观和功能上仍然良好，但功能较少。

注意

请注意，优雅降级并不意味着我们告诉用户下载最新的浏览器来查看我们的网站。

但是今天的现代设计师和开发人员不喜欢这种方法。主要原因是这经常变成了一个要求，即我们的用户应该下载最新和更新的浏览器才能查看我们网站的最佳视图。我们应该记住这不是优雅降级。

如果我们要求用户下载现代浏览器，那意味着我们正在使用以浏览器为中心的方法。一些我们应该记住的关于优雅降级的点，同样也适用于渐进增强：

• 我们应该编写符合标准的有效 HTML。

• 我们应该使用外部样式表

• 我们应该始终将我们的脚本链接到外部。

• 我们应该确保我们的内容对没有 CSS 或 JavaScript 的旧浏览器是可访问的。

考虑支持哪些功能

在开发响应式网站时，我们应该检查我们的目标浏览器或设备是否支持特定功能，而不是简单地假设它可以使用。

例如，如果我们在旧的 Android 手机上安装最新的 Chrome 浏览器，我们可能会认为它会支持最新的功能，比如 CSS 动画、背景视差效果和 WebGL。

但是，这真的是这样吗？如果我们试图在一个不支持旧安卓设备的功能的网站上操作会发生什么？最终结果可能是我们的浏览器变得无响应或崩溃；我们将被迫重新启动它以恢复服务。

最近，安卓用户在这方面遇到了很大的问题，其中最明显受到影响的应用是 Google Talk/Hangout。随着它们的升级，Google 最轻量级的聊天服务因旧设备的性能问题而变得几乎无法使用。

这样过滤掉那些在小屏幕上不太可用且不太相关的功能非常重要。一个很好的例子是使用接近传感器的应用程序。这有助于推动制造商将这成为所有新智能手机的标准功能。

让用户选择他们想要的

我们开发了一个引人注目、响应式、动画化和触摸导向的网站，但对于网络连接差或旧设备的用户呢？

如果网站在初始加载或后续页面刷新时出现卡顿，我们应该怎么办？

读者当然会困惑于他们应该怎么做。

这是我们应该做的一件简单的事情。曾经在旧设备或慢的网络连接上运行 Gmail 吗？如果是的话，那么你一定注意到了加载基本 HTML（用于慢速连接），甚至是这个宝石，慢速连接意味着我们可能被迫使用 Gmail 的简单视图，因为慢的网络连接使得使用标准视图变得不可能：

对于那些习惯于高速电缆或宽带连接的精英，他们可能很难相信其他用户没有这种奢侈，被迫使用基本视图，就像我们的例子一样。使用这个选项会加载 Gmail 的基本 GUI 版本，它针对较慢的连接进行了优化，并允许用户与网站进行交互。

这说明了一个很重要的观点——如果一个网站必须使用最新的功能，那么我们应该考虑在我们的应用程序中实现基本或标准模式。我们已经从只有少数网站拥有所有最新功能并获得所有流量的日子中进步了，为用户提供他们在网站上寻找的内容才是他们关心的。

我们需要包含整个库吗？

我们应该始终遵循使用或保留的标准。跟踪所有正在使用的库和模块是困难的；我们必须在使用的库和维护网站速度之间取得微妙的平衡。

现在许多框架和库都有自定义功能的选项；例如，我们可能只需要 jQuery 的一些关键元素（如果我们在使用它），我们可以选择在下载库时排除多余的功能。然而，如果我们仍处于开发阶段，那么我们将需要整个库；我们可以选择运行我们的应用程序所需的部分，然后将其缩小以供生产使用。

考虑跨浏览器兼容性

任何开发者心中必须时刻牢记的一个问题是如何在构建网站时保持最大的浏览器兼容性；如果在足够多的浏览器上无法运行，那么 UI 再惊艳也没有用！

任何不支持目标浏览器市场的网站（即，网站受众最多使用的浏览器）都面临失去业务和声誉的风险。这使得我们不仅需要测试我们的网站，而且如果我们正在制作响应式网站，还需要在多个浏览器上进行测试。这种测试是保持客户满意度和市场份额的关键步骤。在我们考虑一些可用的解决方案之前，有许多技术可以帮助减少与跨浏览器兼容性相关的问题，让我们更详细地看看我们面临的一些挑战。

概述挑战

任何设计师的乌托邦是拥有一个 100%无 bug 的网站；然而现实是，虽然这总是开发者心中的期望，但却是不可能实现的！

为什么？一个关键考虑因素是 CSS3 的使用（以及现在存在的 CSS4 的元素）；尽管支持不断改进，但在每个浏览器提供对所有 CSS3 属性的一致支持之前还有一段路要走。同样地，对于响应式媒体和媒体查询的支持在旧版浏览器中也不被支持，因此我们必须考虑我们能够为这些浏览器提供多少支持。

考虑可能的解决方案，我们已经提到了对响应式网站至关重要的三个因素，为了解决它们，我们有许多选择。

我们可以（也应该）考虑使用基本内容构建我们的网站，这样可以在任何浏览器上运行；然后通过添加一些可能只对某些浏览器有效但并不是整体用户体验关键的额外功能，逐步增强体验。相比之下，我们也可以认为我们的网站是基于最新技术和浏览器构建的，但随后添加支持，以允许内容在旧版浏览器上优雅降级。

我们能够解决这些问题吗？当然可以，有许多不同的选择。然而，有一点我们应该考虑，使用 JavaScript 解决方案并不一定是最佳解决方案；我们可以使用一些技巧来帮助保持兼容性。在我们讨论这些之前，让我们花一点时间考虑一下在使用 JavaScript 作为解决方案时可用的一些选项：

• Adapt.js：这个脚本不使用媒体查询；相反，它根据浏览器窗口大小等值来确定加载哪个 CSS 文件。该脚本可以从adapt.960.gs/下载。

• Modernizr.js：这个库允许我们选择要支持的元素，比如 HTML5 的<video>元素；当检测到选择的元素正在使用时，Modernizr 为我们提供了一个优雅降级内容的选项，不让我们的网站简单地垮掉！该库可以从modernizr.com/download下载。

• Respond.js：这个解决方案使用 JavaScript 为旧版浏览器（如 IE6-8）提供断点支持，基于我们在配置页面时指定的大小。我们可以以类似的方式使用它，如将设备宽度设置为 414px，以适应 iPhone 6 Plus 的纵向模式。有关该库的更多详细信息和下载，请访问responsejs.com/。

尽管这些解决方案都能很好地工作，但它们都有一个固有的缺点——JavaScript！在这个现代时代，大多数浏览器可能默认已经打开了 JavaScript，但也会有一些情况下没有打开；让我们探讨一下为什么使用 JavaScript 并不总是正确的解决方案。

理解 JavaScript 的缺点

在任何响应式网站的构建阶段，我们自然需要确定要支持哪些断点。这将基于诸如 Google Analytics 之类的统计数据。然后通常的做法是在我们的 CSS 样式表中使用媒体查询来在需要时加载元素。这对于最近的浏览器（过去一年到十八个月内的任何浏览器）效果很好，但对于旧版浏览器来说，这将是一个问题。

我们可以使用基于 JavaScript 的解决方案来支持它们：

• 我们提到的所有解决方案都需要 JavaScript——如果它被关闭，那么它们显然就不会起作用！

• 一些解决方案使用 AJAX 来获取内容（如 Adapt.js）。这可能会在获取内容时出现短暂的闪烁。开发人员已经尽量将其减少到最低，但无论他们如何努力，都不可能完全消除它；在网站上使用时会显得奇怪。

• 一些解决方案在旧设备上不起作用，Adapt.js 就是一个很好的例子。

• 如果 JavaScript 被关闭，我们可以使用默认样式表，使用<no script>标签；问题是，我们支持什么屏幕尺寸？

• 使用 JavaScript 将需要服务器加载额外的资源，这会给服务器增加额外的负担；JavaScript 始终旨在提供额外的功能，并且在该功能对站点的成功运行至关重要时不应使用。

显然，这些缺点使得在使用 JavaScript 时成为一个不太吸引人的选择！然而，我们应该问的两个关键问题是：我们真的需要支持旧的浏览器，比如 IE8，并使用 JavaScript 来支持它们吗？

提供基于 CSS 的解决方案

支持哪些浏览器是一个会分裂开发人员和设计师的问题；一方面，我们有创意人员希望利用最新的功能，而另一方面，其他人会说我们必须尽可能支持广泛的浏览器群体。

后者通常需要在旧浏览器中使用 JavaScript；考虑到这需要从服务器调用额外的资源，因此尽可能使用 CSS 是有道理的。为此，我们可以考虑使用相对较新的@supports功能（或称为功能查询）。这与媒体查询类似，允许我们根据浏览器中是否支持所选样式来设置元素的样式。这在最近的大多数浏览器中得到了很好的支持（当然 IE 除外，它总是喜欢与众不同！）：

然后我们可以在主要标记中创建这样的代码：

<article class="artwork"> 
  <img src="img/myimg.jpg" alt="cityscape"> 
</article> 

当它受支持时，使用这样的代码来设置样式：

@supports (mix-blend-mode: overlay) { 
  .artwork img { 
    mix-blend-mode: overlay; 
  } 
} 

然而，如果它不受支持，我们只需添加一个功能查询来使其优雅地降级：

@supports not(mix-blend-mode: overlay) { 
  .artwork img { 
    opacity: 0.5; 
  } 
} 

美妙之处在于，我们不依赖任何外部库来支持可能是核心功能的东西；我们可以使用这个来支持新的 CSS3 样式和现有属性。当然，这意味着我们的样式代码库会增加，但这是有限度的，因为增加的是已经被缓存的现有文件，而不是从服务器调用额外的新资源！

测试网站的兼容性

在这个阶段，我们的网站将被优化和测试性能，但兼容性呢？

尽管可用浏览器的范围保持相对静态（至少对于主流使用的浏览器），但它们提供的功能不断变化；这使得开发人员和设计师难以处理支持每个浏览器所需的所有细微差别。

此外，广泛的范围使得支持成本高昂。在理想的世界中，我们会支持每个可用的设备，但这是不可能的；相反，我们必须使用分析软件来确定哪些设备正在使用我们的网站，因此值得支持。

找出解决方案

如果我们在 iPhone 6 等设备上测试我们的网站，很有可能它也会在其他苹果设备上运行良好，比如 iPad。对于在三星 Galaxy S4 等移动设备上进行测试也是如此；如果它们需要进行比其他设备更多的调整，我们可以使用这个原则来帮助优先支持特定的移动设备。

但最终，我们必须使用分析软件来确定谁访问我们的网站；诸如浏览器、来源、操作系统和使用的设备等信息将有助于确定我们的目标受众应该是什么。这并不意味着我们完全忽视其他设备；我们应该尽量确保它们也能与我们的网站配合，但这在开发过程中不是优先考虑的事项。

需要注意的关键一点是，我们不应该尝试支持每一种设备；这样管理成本太高，而且我们永远也无法跟上所有可供出售的设备！相反，我们可以使用我们的分析软件来确定我们的访问者使用的设备；然后我们可以测试一些不同的属性：

• 屏幕尺寸：这应该包括各种不同的桌面和移动设备的分辨率。

• 连接速度：在不同的连接速度下进行测试将帮助我们了解网站的行为，并确定我们可能需要进行更改的机会或弱点。

• 像素密度：一些设备将支持更高的像素密度，这使它们能够显示更高分辨率的图像或内容。在设计网站时（尤其是响应式网站），我们显然希望将我们的内容放在屏幕上的正确位置。高分辨率显示器提供的清晰度使得我们更容易微调如何在屏幕上显示这些内容；这将使查看和修复显示网页内容的任何问题变得更容易。

• 交互风格：能够在不同设备上查看互联网意味着我们应该考虑我们的访问者如何与网站进行交互：他们纯粹在桌面上使用，还是使用平板电脑、智能手机或游戏设备？最有可能的是前两者会在一定程度上被使用，但后者不太可能被广泛使用。

一旦我们确定了应该支持哪些设备，那么我们就有一系列工具可供我们使用，来测试浏览器兼容性。这些工具包括物理设备（理想，但维护成本高昂）、模拟器或在线服务（这些可以是商业的或免费的）。让我们看一下可供选择的一些工具，以帮助我们测试浏览器兼容性。

探索可用于测试的工具

当我们计划测试移动或响应式网站时，我们需要在开始测试之前考虑一些因素，以帮助交付一个在所有设备和浏览器上看起来一致的网站。这些因素包括回答以下三个问题：

• 网站看起来好吗？

• 是否有已知的错误或缺陷？

• 我们的网站真的是响应式的吗？

为了帮助测试我们的网站，我们可以使用一些可用的工具（付费或免费）；但需要注意的一点是，我们可以通过简单地使用大多数浏览器中可用的开发者工具栏，已经对我们的网站的工作情况有一个很好的了解！

当然，这不是我们绝对依赖的东西，但它提供了一个完美的起点。当我们的需求超出了浏览器提供的功能时，我们总是可以升级到商业选项。让我们简要看一下有哪些可用的选项：

使用 Chrome 查看

我们可以通过在 Chrome 中按下Ctrl + Shift + M来轻松模拟移动设备；Chrome 会在窗口顶部显示一个工具栏，允许我们选择不同的设备：

如果我们点击菜单项（当前显示为 iPhone 6 Plus）并将其更改为“编辑”，我们可以添加新设备；这使我们能够设置特定的尺寸、用户代理字符串以及设备是否支持高分辨率图像：

现在让我们切换一下，看看 Firefox 中有哪些选项。

在 Firefox 中工作

响应式设计视图选项可使用与 Chrome 相同的Ctrl + Shift + M选项；我们也可以通过导航到工具 | Web 开发者 | 响应式设计模式来访问它。

当在 Firefox 中激活模式时，我们可以在不同的屏幕尺寸之间切换：

尽管浏览器在提供网站运行情况的指示方面已经有了一定的进展，但它们只能满足有限范围的视图。有时，我们需要更进一步，使用商业解决方案来同时测试我们的网站在多个浏览器上的运行情况。让我们来看看商业上可用的一些选项。

探索我们的选择

如果你花了一些时间开发代码，那么你很可能已经知道 Browserstack（来自www.browserstack.com）。其他选项包括以下内容：

• GhostLab：www.vanamco.com/ghostlab/

• Muir：labs.iqfoundry.com/

• CrossBrowserTesting：www.crossbrowsertesting.com/

然而，如果我们只需要检查我们的网站的响应水平，那么我们不需要使用付费选项。有许多网站可以让我们检查，而无需安装插件或额外的工具：

• Am I Responsive: ami.responsive.is

• ScreenQueries：screenqueri.es

• Cybercrab 的屏幕检查设施：cybercrab.com/screencheck

• Remy Sharp 的检查站点：responsivepx.com

我们还可以使用书签工具来检查我们的网站在不同设备上的运行情况——可以尝试的一些例子在codebomber.com/jquery/resizer和responsive.victorcoulon.fr/；值得注意的是，当前的浏览器已经包含了这个功能，使得书签工具作为一个选项变得不那么吸引人。

遵循最佳实践

我们必须问自己的一个关键问题是，在开发网站时，我们将在多大程度上支持特定浏览器的使用。这个问题的答案将在监控分析软件中，确定哪些浏览器正在使用。

在大多数情况下，它应该显示正在使用的现代浏览器，但仍然有一些使用旧浏览器的情况；例如，IE6 仍在使用，尽管其市场份额现在只有微不足道的 0.25%，截至 2016 年 4 月。这引发了一个问题，即如果监控我们网站的分析数据显示，只有一个微小的百分比（例如低于 1%）的用户使用旧浏览器，那么我们可能会决定不支持它们，如果所需的工作量和资源不足以证明从这么小的市场份额中获得回报的话。

这样说，有一些基本的技巧可以帮助我们优化我们的网站：

• 我们应该尽量避免使用 hack。条件注释是一个更好的选择，尽管我们应该定期检查并删除不再适用的样式（例如供应商前缀，它们不再适用）。

• 尽量在你的代码中使用<!DOCType html>。这将告诉浏览器它应该遵循 HTML5 规则；如果浏览器不支持 HTML5，它将自动降级。

• 我们可以使用 W3C 验证服务来检查我们的代码是否一致。不过，更好的选择是将其纳入开发过程的一部分；我们可以很容易地用 Node.js 做到这一点，所以它可以自动完成。

• 在现代网站时代，JavaScript 已经成为开发的一个必不可少的工具。很容易就会倾向于使用它，而不真正考虑其他选择。尽量避免使用 JavaScript。它是设计用来补充现有代码的，并且不应该依赖它来提供核心功能。CSS 的状态现在已经是这样，以至于以前只能用 JavaScript 实现的样式功能现在可能用 CSS 实现，并且提供更流畅的结果！

总结

在本章中，我们了解了性能是什么，以及如果网站性能不佳会有什么后果。然后，我们探讨了什么因素可能导致我们的网页加载缓慢。在本章中，我们还学习了如何使用在线可用的各种工具来衡量网站的性能，并介绍了我们可以采取的措施来改善网站的性能。然后，我们介绍了一些关于网站性能的最佳实践。

我们接着探讨了保持跨浏览器兼容性的重要性，并考虑了一些可用的解决方案来处理跨浏览器问题。然后，我们讨论了在测试跨浏览器兼容性时所面临的挑战，涉及了各种可用浏览器和设备的组合。除此之外，我们发现了如何解决这个问题并制定策略以获得最大的输出。最后，我们看到了一些在线可用的工具，用于测试我们的网站在各种浏览器和设备组合上的兼容性。我们现在已经完成了创建响应式网站基础知识的旅程。希望您喜欢阅读本书，就像我们写作一样，并希望它能帮助您开始使用简单的 HTML 和 CSS 进入响应式设计的世界。