响应式电子邮件_四工厂技术可创建无媒体查询的响应电子邮件

响应式电子邮件

by Rémi Parmentier

由RémiParmentier

四工厂技术可创建无媒体查询的响应电子邮件 (The Fab Four technique to create Responsive Emails without Media Queries)

I think I found a new way to create responsive emails, without media queries. The solution involves the CSS calc() function and the three width, min-width and max-width properties.

我想我找到了一种无需媒体查询即可创建响应式电子邮件的新方法。 该解决方案涉及CSS calc()函数以及width ， min-width和max-width三个属性。

Or as I like to call them all together: the Fab Four (in CSS).

或者，我喜欢将它们全部称为：Fab四(在CSS中)。

问题 (The problem)

Making responsive emails is hard, especially since email clients on mobile (like Gmail, Yahoo or Outlook.com) don’t support media queries. An hybrid approach, a Gmail first strategy, or a responsive email without media queries are great ways to adapt to this situation.

制作响应式电子邮件非常困难，尤其是因为移动设备上的电子邮件客户端(例如Gmail，Yahoo或Outlook.com)不支持媒体查询。 混合方法 ， Gmail优先策略或不带媒体查询的响应电子邮件是适应这种情况的好方法。

That last approach has been my favorite so far. The big idea is to have columns as <div>s with a fixed width aligned with “display:inline-block”. Once a screen can no longer contain two blocks side by side, they will naturally flow below each other. But I’ve always had a problem with this.

到目前为止，最后一种方法是我最喜欢的。 最好的主意是使列<d iv>的宽度固定为与“ display：inline- block”对齐。 一旦屏幕不再能够并排包含两个块，它们自然就会在彼此之间流动。 但是我一直对此有疑问。

Once all the blocks are stacked, they don’t take the full width of the email.

一旦所有块堆叠在一起，它们就不会占用电子邮件的全部宽度。

I’ve been looking for ways to solve this problem for a long time. Flexbox is a great contender, but unfortunately Flexbox support in an email is abysmal.

我长期以来一直在寻找解决此问题的方法。 Flexbox是一个很好的竞争者，但是不幸的是，电子邮件中对Flexbox的支持非常糟糕。

一个办法 (A solution)

记住width ， min-width和max-width (Remembering width, min-width and max-width)

On top of the calc() function, the solution I found involves these three CSS properties. In order to fully understand how it works, here’s a reminder of how width, min-width and max-width behave when used together (as clearly summarized by fellow french front-end developer Raphaël Goetter).

在calc()函数之上，我发现的解决方案涉及这三个CSS属性。 为了完全理解它是如何工作的，这里提醒人们，当在一起使用width ， min-width和max-width时(法国前端开发人员RaphaëlGoetter 明确总结了这一点)。

• If the width value is greater than the max-width value, max-width wins.

  如果宽度值大于最大宽度值， 则以最大宽度为准。

• If the min-width value is greater than the width or max-width values, min-width wins.

  如果最小宽度值大于宽度或最大宽度值， 则以最小宽度为准。

Can guess what the width of a box with the following styles would be ?

可以猜出具有以下样式的盒子的宽度是多少？

.box {    width:320px;    min-width:480px;    max-width:160px;}

(Answer : the box would be 480px wide.)

(答案：该框的宽度为480px。)

介绍calc()和魔术公式 (Introducing calc() and the magic formula)

Without further ado, here is an example of the Fab Four to create two columns that will stack and grow below 480px.

事不宜迟，下面是Fab四工厂创建两个列的示例，这些列将堆叠并增长到480px以下。

.block {    display:inline-block;    min-width:50%;    max-width:100%;    width:calc((480px — 100%) * 480);}

Let’s break it down for each width property.

让我们对每个width属性进行分解。

min-width:50%;

The min-width property defines our column widths on what we could call our desktop version. We can change this value to add more columns (for example, 25% for a four columns layout), or set columns with fixed pixel widths.

min-width属性定义了我们可以称为桌面版本的列宽。 我们可以更改此值以添加更多列(例如，四列布局为25％)，或设置像素宽度固定的列。

max-width:100%;

The max-width property defines our column widths on what we could call our mobile version. At 100%, each column will grow and adapt to the full width of their parent container. We can change this value to keep columns on mobile (for example, 50% for a two columns layout).

max-width属性定义了我们可以称为移动版本的列宽。 每列以100％的比例增长并适应其父容器的整个宽度。 我们可以更改此值以使列保持移动状态(例如，两列布局为50％)。

width:calc((480px — 100%) * 480);

Thanks to the calc() function, the width property is where the magic happens. The 480 value matches our desired breakpoint value. The 100% corresponds to the width of the parent container of our columns. The goal of this calculation is to create a value bigger than our max-width or smaller than our min-width, so that either one of those property is applied instead.

多亏了calc()函数， width属性才是神奇的地方。 480值与我们所需的断点值匹配。 100％对应于我们列的父容器的宽度。 此计算的目标是创建一个大于我们的max-width或小于我们的min-width的值 ，以便改为应用其中一个属性。

Here are two examples.

这是两个例子。

With a parent of 500px, the calculated width equals -9600px. It is smaller than the min-width. So the min-width of 50% wins. Thus we have a two columns layout.

父级为500px时，计算出的宽度等于-9600px。 它小于最小宽度。 因此，最小宽度为50％获胜。 因此，我们有两列布局。

With a parent of 400px, the calculated width equals 38400px. It is bigger than the min-width, but max-width is smaller. So the max-width of 100% wins. Thus we have a one column layout.

父级为400px时，计算出的宽度等于38400px。 它大于最小宽度，但最大宽度较小。 因此，最大宽度为100％会获胜。 因此，我们有一列布局。

演示版 (Demo)

Here is a demo of what this technique can do. You can see the full demo online here (or on Litmus Builder or on CodePen).

这是此技术可以做什么的演示。 您可以在此处 (或在Litmus Builder或CodePen上 ) 在线查看完整的演示 。

And here are two screenshots of this demo in Gmail, on the desktop webmail and on the mobile app on iOS. Same code, different render.

这是Gmail中此演示的两个屏幕截图，分别位于桌面网络邮件和iOS上的移动应用程序中。 相同的代码，不同的渲染。

In this demo, I’ve set a few examples of different grids (with two, three, four columns). The first grid, with the images, is built to go from four columns on desktop to two columns on mobile. The other grids are built to grow full width on mobile.

在此演示中，我设置了一些不同网格的示例(具有两，三，四列)。 建立带有图像的第一个网格，使其从台式机上的四列移动到移动设备上的两列。 其他网格的目的是在移动设备上增加整个宽度。

Also, notice how the title switches from a left aligned position on desktop to a centered position on mobile. This is achieved by giving the title a fixed width of 190px and a “margin:0 auto;” to center it. On desktop, the title’s parent container has a min-width of 190px applied, so the logo stays on the left. On mobile, the parent container grows full width, so the logo becomes centered.

另外，请注意标题如何从台式机上的左对齐位置切换到移动设备上的居中位置。 这是通过为标题设置固定宽度190px和“ margin：0 auto; 以使其居中。 在桌面上，标题的父容器的最小宽度为190px，因此徽标保留在左侧。 在移动设备上，父容器的宽度会增加，因此徽标会居中。

A great aspect of this technique is that, since everything is based on the grid’s parent width, an email can adapt even on a desktop webmail. For example, on Outlook.com, no matter if you chose to have the reading pane on the bottom or on the right, the email will correctly responds to the reading pane’s width. This would be impossible to do with media queries.

该技术的一个重要方面是，由于一切都基于网格的父级宽度，因此即使在桌面Web邮件上，电子邮件也可以适应。 例如，在Outlook.com上，无论选择在底部还是在右侧放置阅读窗格，电子邮件都将正确响应阅读窗格的宽度。 这对于媒体查询是不可能的。

翻译自: https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/

响应式电子邮件