2024年响应式网页设计测试(热门10篇)

响应式网页设计测试 第1篇

在第三章建立响应式导航菜单中，我们已经看到了八种不同的流行菜单技术，每种都用于自己的目的。不幸的是，没有一种_万金油_菜单可以在所有情况下很好地工作。

为了始终与渐进的用户体验紧密相连，我们必须研究如何通过新的 JavaScript/jQuery 插件来改进我们的网站作为一个产品，常常可以找到。

我们将看到三个补充插件，与我们之前见过的插件相比，它们在方法上带来了一些小的差异。它们是 Sidr、EasyResponsiveTabstoAccordion 和 FlexNav。

Sidr 是一个用于创建侧边菜单的 jQuery 插件，在响应式网站上非常常见。它还允许多个 Sidr 菜单（在两侧），以及与外部内容一起使用。

让我们尝试通过创建一个标准的 HTML 文件，并添加插件中包含的 CSS 文件来实现以下示例，可以从下载。我们会发现两种显示菜单的选项，一种是暗色调（），一种是浅色调（）。我们可以使用它们或扩展它们来覆盖一些样式。

所以，在标签中包含其中一个后，我们可能会设置初始样式，以在屏幕大小高于 767 像素时隐藏菜单标题。

现在，让我们使用以下 HTML 代码作为示例来说明插件的使用方法：

在 DOM 底部（在 结束标签之前），我们需要包含 jQuery 和 Sidr 库。之后，我们将通过将 Sidr 的执行与负责打开侧边菜单的菜单按钮绑定来绑定 Sidr 的执行。

我们定义的 #sidr-main ID 将是侧边栏菜单 的 ID，而 #navigation 是我们选择在此侧边栏内显示的菜单的 ID。

在下面的截图中，我们将看到此实现的结果。单击菜单链接后，将在小于 767 像素的屏幕上显示浅色主题菜单（此值由我们自定义）：

EasyResponsiveTabstoAccordion 是一个轻量级的 jQuery 插件，特别是在小型设备（如平板电脑和智能手机）上显示时，可以优化普通、水平或垂直选项卡为手风琴。

此插件的目标是根据屏幕尺寸调整元素。此外，它通过首先显示第一个选项卡的内容，然后显示其他选项卡的内容，优先显示内容阅读。此插件实现的效果完全使用 jQuery 实现，有助于提供跨浏览器兼容性。

更好地理解其工作方式的方法是实践。从 下载后，让我们创建一个标准的 HTML 文档，并将 CSS 文件添加到 标签内：

现在，我们将使用以下 HTML 代码作为选项卡内容的样本：

然后，在 DOM 底部（在 结束标签之前），我们需要包含 jquery 和 easyResponsiveTabs 库。然后，我们将通过提供容器元素的 ID 来执行脚本：

当在智能手机和屏幕尺寸大于 768 像素时，此插件的可视结果如下：

当执行脚本时，会有一些可选参数需要提供，例如：

type: 'default'：可以设置为 default、vertical、accordion

width: 'auto'：可以设置为 auto 或任何自定义宽度

fit: true：它有助于将整个内容适配到容器中

closed: false：它在启动时关闭面板

activate: function(){}：这是一个回调函数，用于包含一些在选项卡更改时触发的自定义代码

FlexNav 是一个 jQuery 插件，可以简化复杂且响应式的导航菜单的创建，而无需编写大量代码。它采用了首先适配移动端的方法，只需轻触目标即可在触摸屏上显示子菜单。

除了以设备无关的方式控制这些嵌套子项之外，该插件还改进了通过键盘 tab 支持导航的可访问性，并为旧浏览器提供了回退。

有关其实现，您将在 中找到可下载的文件。从标准 HTML 文档开始，需要在包含 CSS 文件的 标签中添加此代码：

现在，我们将在简单的无序列表中包含以下 HTML 代码，添加类和数据属性：

然后，在 DOM 底部（ 结束标记之前），我们将包含 jQuery 和 FlexNav 库。之后，我们将通过通知要转换为响应式的菜单元素的 ID 或类来执行脚本。

这是在智能手机和平板电脑上查看时该插件可能提供的视觉示例：

当我们执行脚本时，也可以向插件提供一些选项，例如：

'animationSpeed':'250': 这设置了接受 fast/slow 的动画速度

'transitionOpacity': true: 这指定了默认的不透明度动画

'buttonSelector': '.menu-button': 这指定了默认菜单按钮类

'hoverIntent': false: 仅用于 hoverIntent 插件

'hoverIntentTimeout': 150: 仅用于 hoverIntent 插件

例如：

响应式网页设计测试 第2篇

我们将看到两个专注于分析网页并提出改进性能建议的浏览器工具，PageSpeed Insights 和 YSlow，基于一套极其专业且在不断发展的高性能网页规则。

此外，还有两个我推荐使用的在线工具，可以运行简单测试或进行高级测试，包括多步事务、视频捕获、内容阻止等功能——WebPageTest 和 Mobitest。

测试网站性能是维护快速站点的关键；尽管这超出了本书的范围，但如果您想进一步探索这一问题，可以参考Sanjeev Jaiswal的Instant PageSpeed Optimization和Steve Sounders的Even Faster Web Sites，了解更多信息。

PageSpeed Insights 是由谷歌开发的在线工具，旨在帮助开发人员优化网站性能。它评估页面对多种不同规则的符合性，这些规则涵盖了前端最佳实践。

PageSpeed Insights 提供了描述如何最佳实施规则并将其纳入开发流程的提示和建议。

您可以在以下截图中注意到，每个显示的通知都有一个摘要内容，并且可以展开以获取更多详细信息和进一步的链接：

YSlow 是由 Yahoo!开发的浏览器插件，也专注于分析网页并提出改进性能的建议。它的一些特性如下：

根据预定义规则集或用户定义的规则集对网页进行评分

建议如何提高页面的性能并详细解释原因

总结页面的组件，便于更快地搜索关键问题

显示页面的整体统计信息

提供性能分析工具，包括 ™（用于图像优化的在线工具）和 JSLint（查找脚本中常见错误的代码检查器）

这个插件的网站可以从访问，显示了每个最佳实践规则的默认权重的表格，这样我们就可以在其他问题之前优先处理关键问题(_grading)。

让我们看一下它的界面以及每个规则是如何描述的。通常，在开始修复之前，关于规则的简要解释（如下面的截图所示）就足够了：

WebPagetest 是一个最初由 AOL 开发的工具，现在由 Google 支持。我们可以通过访问来使用它，并进行简单测试或执行高级测试，包括多步事务、视频捕获和内容阻止。

丰富的诊断信息包括资源加载的瀑布图、页面速度优化检查，并提供改进建议，这些建议可能在我们输入网站 URL 后实现。然后我们将通知我们想要测试的站点，我们想要测试的语言环境，以及我们想要使用的浏览器。以下是 WebPagetest 的测试结果截图：

Mobitest 是一个很棒的工具，模拟了真实的移动设备加载网站，捕获页面大小、总加载时间和其他与性能相关的统计数据。虽然它是一个很好的检查工具，但它不能替代您从带宽有限的手机连接获得的真实统计数据。

访问后，运行性能测试只需一个步骤，即输入网站 URL，选择设备/位置选项并提交。

有时候完成报告需要很长时间，所以这个工具取决于队列中排在我们前面的测试数量。

以下是一个生成的报告示例：

尽管这个站点很轻量，但仍然有可以实施的改进。让我们看看加载活动过程的生成图表，即瀑布图示例：

Mobitest 提供的瀑布图（水平条形图）演示了每个资源逐步请求、服务器处理和返回的过程。

因此，在第二行中，加载在另一个网站托管的静态图像需要很长时间，可以通过添加expires头部和使用 CDN 来改进。

在本章中，我们学习了一些最佳实践，比如使用 CDN 来改善内容传递和缓存静态图片，通过条件加载、文件合并、CSS 精灵减少 HTTP 请求，通过优化图片来减小载荷大小，将 JPEG 图像保存为渐进式，并且使用 HTML5 和 CSS3 简化页面结构。此外，我们还学习了如何使用 PageSpeed，YSlow，WebpageTest 和 Mobitest 等工具进行性能测试。

响应式网页设计测试 第3篇

加载时间是导致用户放弃页面的主要因素。如果页面加载时间超过 3-4 秒，用户会转到其他地方。

对于移动设备上的页面，需要快速加载的需求更加迫切，因为用户觉得页面加载时间比桌面设备上更长，这也是当前大多数网站（根据 KISSmetrics 的文章 加载时间 数据显示为 73%）的情况。

加载时间的一大部分被花在执行客户端处理和加载资源，如样式表、脚本文件和图像上。

在本章中，我们将学习通过以下方式改进响应式网站的性能:

使用内容交付网络

减少 HTTP 请求

缩小有效负荷的大小

优化客户端处理

使用工具检查网站性能

响应式网页设计测试 第4篇

尽管 Opera 移动浏览器已经不再处于巅峰时期，但根据网站的数据，它仍然占移动设备访问量的 ％。这也是为什么在这个移动浏览器中至少检查我们网站的主要基本功能仍然很重要的原因。

Opera Software 公司为开发人员提供了良好的支持，他们提供了一个内置 Mobile Opera 浏览器的模拟器。其浏览器也构成了模拟器的基础，您可以使用它来测试各种不同的移动设备。您可以在下载该应用程序。

响应式网页设计测试 第5篇

减少页面包含的组件数量，从而减少加载网站所需的 HTTP 请求数量，这不仅与每个文件的 KB 数量有关。还有一个问题是每个 HTTP 连接在将文件返回给浏览器之前，服务器处理每个请求所消耗的短时间。

我们将看到一些减少请求数量的技术:

使用条件加载器

将多个脚本合并成一个脚本

将多个 CSS 文件合并成一个样式表

使用 CSS 精灵

条件加载器，如 RequireJS 或 ，在本书之前我们已经谈到过，它们只会加载所需的代码。

理想的结果是在生产中整个网站将只有一个 CSS 文件和一个 JavaScript 文件。

解决这个问题的方法是将一堆 JavaScript 文件合并成一个，减少请求并加快页面首次加载速度，尽管在移动设备上可能无法有效缓存。

缩小是消除不必要字符的最佳做法，如额外空格、换行符、缩进和注释。根据我的个人测试，这种改进可以平均减少文件大小 20%。

这个值并不准确，因为它取决于文件的大小、白色空间的数量等。

这种组合可以很好地提高性能，主要是因为它通常在网站显示内容之前执行。

有几个在线工具可以执行这项任务。我个人最喜欢的是 YUI 压缩器，你可以通过访问 和 Google Minify（）来执行。

响应式网页设计测试 第6篇

随着技术和趋势的不断发展，每天都会出现新的插件，这些插件对于开发响应式网站变得越来越有帮助。通过诸如、 和 等博客及时了解它们非常重要。

在本章中，我们将重点介绍不同的插件，涵盖以下主题：

网站结构的插件，例如 Columns、Equalize 和 Packery

用于菜单导航的插件，例如 Sidr、EasyResponsiveTabstoAccordion、FlexNav 和其他杂项插件

响应式网页设计测试 第7篇

每个窗体都是独立的，可以单独使用「开发者模式」来调整。如果需要一次性刷新就需要点刷新按钮了，但这个需要设置本地的CSS样式表或JS库。

方法一：直接在Chrome商店安装（推荐）

方法二：用压缩包版安装（下载地址在下面）

压缩包安装流程：

1、在Chrome浏览器地址输入chrome://extensions/

2、启用「开发者模式」

工具名称：响应式布局预览工具（Responsive Viewer）

该扩展今年年底才上线，已累计1万多人下载使用，使用量这么多的话，开发者应该会继续开发更多新的功能上去，我们一起期待。

这么好用的响应式布局测试工具，快分享给你身边的设计师和开发同事吧！

响应式网页设计测试 第8篇

回退是在开发网站时的支持流程的一部分。其目标是为我们应用于网站的技术提供替代方案，但并非所有浏览器都支持此特定功能。

此术语可以分为 polyfills 和 webshims。

Polyfill 是一种特定的代码，用于模拟不原生支持某项特性的浏览器。Polyfills 总是尝试模仿原始浏览器特性，但有几种情况下可能会导致轻微的副作用，如增加加载时间或降低性能。

一个 polyfill 的例子是 html5shiv 脚本，我们只需将其放入代码中，它就会像没有任何变化一样起作用。我们稍后会谈论 html5shiv。

Shims 提供了一个回退，但通常具有自己的 API，并且可能需要修改代码以使 shim 起作用。这就是为什么我们有像 这样的库来加载这些内容（如果需要的话）。我们稍后会看到使用 的示例。

让我们看看两个功能检测工具，在我们提供回退时可能会有用。

响应式网页设计测试 第9篇

事实证明，在设备本身上检查设计没有比在我们的测试模拟器中消耗更多的时间，浏览器工具是使测试变得更快的解决方案，但不会能够复制一个与真实情况完全相同的网站。

尽管它们会非常接近，但我们可以将这种类型的测试定义为仅作为初始测试过程，然后在真实设备上进行测试，以确保所有功能都运行良好。

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

使用浏览器工具模拟设备

在设备模拟器上测试

响应式网站单元测试的提示

响应式网页设计测试 第10篇

在本章中，我们学习了三个类别的补充插件，这些插件补充了前几章的内容。对于结构插件，我们学习了如何使用 Columns 来创建简单的响应式结构，使用 Equalize 更好地分配页面上浮动元素的位置，以及使用 Packery 来创建卡片布局网站。我们还学习了使用 Sidr、EasyResponsiveTabstoAccordion 和 FlexNav 来显示菜单和选项卡的不同方法。在 杂项 部分，我们看到了如何使用 SVGeezy、Prefix free、MagnificPopup 插件、Riloadr 和 Calendario。

在最后一章中，我们将看到不同的技术来检测网站加载速度。性能主题非常广泛，但由于有效处理这一指标非常重要，因此在创建响应式网站时，我们将看到一些提高性能的技术。