jQuery响应式Web设计全绝不原创的飞龙

421 200

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

代码块设置如下：

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

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

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

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

在本章中，我们将学习：

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

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

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

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

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

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

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

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

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

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

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

媒体查询大多数被使用，大多数浏览器原生支持（Firefox3.6及以上，Safari4及以上，Chrome4及以上，Opera9.5及以上，iOSSafari3.2及以上，OperaMobile10及以上，Android2.1及以上，以及InternetExplorer9及以上）。现在，问题来了：IE6-IE8呢？对于这些浏览器，有一个被称为Respond的已知轻量级解决方案，在需要支持旧浏览器时非常有用（更多信息请参见第十章，确保浏览器支持）。

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

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

/*Standarddesktopscreens*/@mediaonlyscreenand(min-width:1025px){CSSGOESHERE}/*Tablets*/@mediaonlyscreenand(min-width:481px)and(max-width:1024px){CSSGOESHERE}/*Smartphones*/@mediaonlyscreenand(max-width:480px){CSSGOESHERE}为了澄清这段代码，下图是对这段代码的视觉解释，其中显示布局可以根据设备屏幕的不同方式显示：

下载示例代码

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

以下是Adapt.js的特点：

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

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

缺点如下：

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

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

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

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

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

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

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

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

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

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

#wrap{width:960px;}#content{width:690px;float:left;}#right-sidebar{width:270px;float:left;}注意让我们来看看这个神奇的公式：目标/上下文=结果。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

...

...
...
以下是该代码的预览：

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

HTML结果应该如下：

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

使用FluidBaselineGrid的主要优势如下：

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

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

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

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

............下面的图示展示了结果：

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

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

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

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

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

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

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

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

.........下图显示结果：

注意到3、6和3的和等于12。另外，还有一个选项可以将类从small更改为large。如果我们交换这些类，当我们减小浏览器宽度达到768像素时，每个

标签将占据最大宽度。这两个类可能会同时出现——在小于768像素的小屏幕上显示内容——而在大屏幕上，宽度就像前面的示例中给出的那样。

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

...

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

83Nested9Nested4以下图显示结果：

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

28,offset2结果如下所示：

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

6centered结果如下：

48,last以下是结果：

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

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

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

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

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

2a练习-为线框创建布局设计现在，我们已经有了线框并了解如何操作网格的列，我们需要根据列中的主要元素调整线框，如下截图所示：

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

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

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

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

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

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

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

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

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

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

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

#bannersdiv{text-align:center;height:100px;line-height:100px;background:#f65050;}#bannersdiv:first-child{background:#7ddda3;}#bannersdiv:last-child{background:#506ff6;}@mediaonlyscreenand(max-width:48em){.subcontent,asidespan{display:none;}aside.img-aside{display:block;margin:0auto;}asidediv{text-align:center;}}@mediaonlyscreenand(min-width:48em){aside.img-aside{float:left;}}摘要在本章中，我们学习了三种使用JavaScript解决方案呈现特定CSS代码的不同方法：Adapt.js、Respond.js和Breakpoints.js。现在，我们也明白了如何通过数学运算将像素转换为百分比，并发现结果。我们还学习了什么是响应式网格系统，以及如何使用每种类型的响应式网格系统。

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

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

在这一章中，我们将：

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

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

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

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

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

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

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

不幸的是，