3 种不同的响应式布局；哪一种最适合您？

ahad1020

到目前为止，我们已经讨论了如何开始使用 HTML 电子邮件，以及如何在电子邮件中成功使用 CSS。接下来，我们将讨论响应式布局，这是一个大话题™。鉴于此，我们将慢慢来。在我开始深入探讨响应式电子邮件之前，让我们先了解一下“响应式”的含义，然后探索三种可用于设计营销信息的不同类型的响应式布局。

定义“响应式”
我们今天所熟知的“响应式设计”这个术语，最早是由 Ethan Marcotte 在2010 年 5 月发表于 A List Apart 的一篇文章中提出的。他最初的定义是：“流体网格、灵活图像和媒体查询是响应式网页设计的三大技术要素，但它也需要一种不同的思维方式。与其将内容隔离到不同的、特定于设备的体验中，不如使用媒体查询在不同的浏览环境中逐步增强我们的作品。” 听起来很熟悉，对吧？

然而，自那篇开创性的文章发表以来，“响应式”的概念已经扩展到包括“移动优先”等内容，设计师首先要考虑资源在移动设备上的显示方式。实现“响应式”的方法有很多，例如使用 CSS 媒体查询、JavaScript、服务器端代码或三者结合。不过，由于本系列主要关注电子邮件，因此我们将探讨如何仅使用 CSS 来实现。

那么，我们知道它的意思；它是如何使用的？

3 种不同的“响应式”布局
在实现响应式设计时，我们可以使用三种不同的响应式布局来实现所需的功能。选择哪一种布局很大程度上取决于您自己，以及您是使用工具来完成繁重的工作还是自行编写代码。请注意，虽然其中一些布局从技术上讲并非“响应式”，但它们通常可以互换使用，因为它们执行的功能有些相似，尽管每种布局都采用不同的实现方式。

“自适应”布局
我们将要讨论的第一种布局方法称为“自适应”。这种方法使用固定宽度的元素，这些元素使用绝对测量单位（通常为像素）定义。因此，无论您决定某个元素的尺寸，无论是图片、侧边栏还是其他元素，它都将保持该尺寸。不同屏幕尺寸之间的区别在于这些元素的布局方式。

它是如何工作的呢？嗯，一系列特定的屏幕宽度（也就是断点）与 CSS 媒体查询（还记得吗？）结合使用，以确定基于设备屏幕宽度显示的布局。根据所使用的断点，资源的布局可能会发生变化；元素的显示顺序和方式可能会发生变化，以及它们在布局中的位置。因此，设计师实际上需要为同一份资源设计多个版本，每个断点一个版本。值得庆幸的是，在处理电子邮件时，我们需要处理的断点远不及处理完整网页那么多，这意味着需要设计和编写的布局版本更少。

正如您所料，这种方法有一些优点和缺点。

优点
更易于设计。由于您确切地知道元素在资源中的位置以及大小，瑞士电话号码库 设计师可以更好地了解用户与其交互时的体验。由于处理的是绝对值而不是百分比，因此所涉及的数学运算也大大减少。
加载时间。由于所有内容都是固定大小，浏览器/客户端无需进行任何复杂的计算来确定内容的大小或位置；这些都已经定义好了。
缺点
僵化的设计。从易于设计的角度来看，它的优点也可能变成缺点。设计僵化，无法随着视口宽度的变化而变化，元素的大小保持不变，只是重新排列它们的位置，而不是流畅地响应屏幕宽度。
工作量。由于需要设计和编码资产的多个版本，因此从端到端创建可能需要更长的时间。
“流体”布局
第二种“响应式”布局被称为“流体”设计。顾名思义，这种布局会流动以完全填满其容器（无论是屏幕还是包含元素）。它会根据任何屏幕尺寸进行变化，而不是依赖于“自适应”布局所用的宽度设置列表。这是因为元素的大小是通过设置相对单位（例如百分比或 em）而不是绝对单位（例如像素）来确定的。因此，随着宽度的变化，所有内容都会保持比例。

让我们举例说明流体布局的优缺点：

优点
灵活性。这种布局本质上比“自适应”布局更灵活，因为它使用百分比而不是绝对测量值。
缺点
布局不会改变，只是变大或变小了。在较小的屏幕上，列可能会变得非常窄，从而影响可读性。
设计难度大。使用这种方法设计出适合各种屏幕尺寸的布局极其困难。
加载时间。由于浏览器或电子邮件客户端必须计算出每个元素的大小，因此加载和渲染时间可能会受到轻微影响，尤其是在布局复杂度增加的情况下。
“响应式”布局
第三种布局方法就是我们今天在考虑“响应式设计”时通常会想到的。这种方法结合了自适应布局的可变性与流体设计的灵活宽度，使设计师能够真正地让布局响应浏览器或电子邮件客户端，并为给定的设备提供最佳的布局。

此方法依赖于 CSS 媒体查询，并结合断点来适应用户的浏览器。元素可以扩展或收缩、重新排序，甚至有条件地显示或隐藏，所有这些都取决于用户的设备和营销人员的需求。