押注APP下&#x8F7D

来源：蜘蛛抓取(WebSpider) 时间：2022-10-15 00:26 标签： VK68e6b61093270f8ab6fe

，在其中研究了使用数据URI进行性能友好的界面设计的一些可能性。

在今天的Premium教程中，我们将采用介绍性文章中介绍的一些理论，以一些用于开发完全实现的用户界面的示例为基础。 为了使事情有趣，我们还将使我们的设计具有响应性，并且将使用Dribbble API和jQuery从Envato Dribbble feed中提取一些图像。

有很多要讲的内容，所以让我们开始吧！

正如我已经提到的那样，本教程基于教程中 。 即使您对数据URI的了解已经扎实，我还是强烈建议您在开始此处之前先阅读本文。 我将使用初始文章中的练习中的一些代码来节省时间，因此，我将要求您在以下几点上跳回到原始文章。

其次，在该项目中，我们将严重依赖数据URI，以便为您提供大量使用此技术的实践。 是否实际在生产中大量使用数据URI还是有争议的（尤其是如果支持<IE7），因此请记住，数据URI只是工具箱中的另一个工具，这些技术不一定适合每种情况。

最后，该项目在Webkit，Firefox和Internet Explorer的最新版本中进行了测试。 您可以放心地假定此接口在IE7及以下版本中将无法完全发挥作用（尽管如果需要，可以很容易地将后援应用于旧版IE版本）。 此外，在本教程中，我将引用-webkit和CSS3元素的通用前缀，但是源文件将包含所有供应商前缀。

关于数据URI的两分钟回顾

在开始破解之前，让我们快速回顾一下数据URI方案是什么，以及为什么它可以作为向浏览器提供元素的好选择，这些元素通常会消耗资源并降低性能。

  • 数据URI是一种将二进制数据编码为ASCII文本字符串的方式，现代浏览器可以读取和呈现该字符串。
  • 数据URI通常用于替换图像文件，但是可以对任何二进制数据进行编码，包括SVG，多媒体，字体等。
  • 使用数据URI的主要好处是减少了在浏览器窗口中加载页面所需的HTTP请求数量。 简而言之，每增加一个HTTP请求（通常）都会对网站的整体性能产生负面影响。
  • 数据URI比标准文件类型（例如JPG图像）大33％左右，但通过压缩和gzip压缩，该数量通常减少到5％以下。 这个额外的文件大小通常不是一个大问题，但是在选择最佳技术以将资产包含到设计中时要牢记这一点。
  • 数据URI冗长，毫无意义，看起来也不是很漂亮，使得标记和样式表难以阅读，浏览和维护。 最好在文本编辑器中使用代码折叠！

本教程将分为三个单独的阶段，我们将按以下顺序进行处理：

  1. 使用HTML和CSS中的参考图片设计“全角”网站。
  2. 添加媒体查询以使站点在较小的视口中响应。

好的！ 聊够了！ 让我们开始编码吧！

对于我们的设计，我们将以作为起点。 我们不会在项目中使用样板的所有功能（例如，现代化脚本或分析），但是最好在初始阶段保持“原样”，然后在项目后期返回以减少我们最终没有使用的功能（或者将来可能不会使用）。

快速说明一下，如果您真正专注于将HTTP请求减少到最低限度，则可以轻松地将每个函数包含在HTML的<script>标记中。 我选择今天不这样做，是为了使HTML和Javascript之间的分隔更容易理解。

如果您一直在密切关注，则网站的主要内容部分将如下所示（按比例缩小）：

做得好！ 在我们开始项目的最后一部分之前，花点时间喝杯咖啡，休息一下……打开响应界面。

步骤18：规划响应式设计

由于我们是在浏览器中进行设计，因此无法受益于为小视口显示引用模型。 在我们超越自我之前，最好计划一下媒体查询的总体方向并建立一些基本的响应式基础结构。

以下是我们的设计在较小视口中的主要功能：

  • 内容项将从480px到767px的视口从跨越三个变为两个
  • 对于小于480像素的视口（即移动视图），内容项将彼此堆叠。
  • 界面导航将放置在徽标下方，当小于767px时将占据视口宽度的100％
  • 项目之间的边距将根据需要进行调整。

如您所见，这是一个非常简单的游戏计划，只需两个媒体查询即可实现。

在样式表的“媒体查询”部分下，创建以下两个媒体查询：

在响应性上下文中，有很多方法可以访问导航菜单，但是今天，我们将保持快速，基本和不依赖JavaScript的状态。

在上一步中创建的第一个媒体查询（767px以下）中，添加以下代码：

这个简单的代码块将导航移动到主标题下，将其宽度更改为100％，并添加一些基本样式。

步骤20：更改特色内容项目的布局

回到我们的响应式迷你计划，介于480像素到767像素之间，特色内容项将显示为两宽，而低于480像素的内容将显示为一宽，彼此叠放。

首先，我们将扩展我们的第一个媒体查询，以创建两个范围的特色内容项显示。

接下来，将以下规则添加到第二个媒体查询中，以管理小于480px的视口：

步骤21：调整边距和间距

最后，完成设计所需要做的就是调整一些边距，以确保我们在元素之间保持合理的边距。

在我们的<767px媒体查询中，添加以下规则：

在我们的<480px媒体查询中，遵循以下规则：

只要有可能，就可以以百分比形式保留边距，这使我们的界面几乎可以在任何视口大小上表现出色，而不仅仅是一组预定的断点。

花一点时间清理代码，确保所有内容都按照逻辑顺序排序，然后退后一步，欣赏所有辛苦的工作。 我们完成了！

如果您已完成整个教程，现在将掌握一系列智能技术，以提高站点的性能，以及将图像和图标字体编码为base64编码数据URI所需的所有工具。 。

请记住，数据URI并非始终是每种情况的最佳选择，在确定对网站资产进行编码是否是最佳解决方案时需要谨慎考虑，并且在减少HTTP请求与文件大小以及代码可维护性和可读性之间取得平衡非常重要。 。 数据URI使用得当，是您的Web设计工具箱中的宝贵工具。

希望您喜欢本教程，也喜欢本教程！

您如何在项目中使用数据URI？ 在下面发表评论。

我要回帖

更多关于 VK68e6b61093270f8ab6fe 的文章

 

随机推荐