如何创建响应式电子邮件模板？

Posted 2023-02-16

【中文标题】如何创建响应式电子邮件模板？

【英文标题】：How to create Responsive Email Template?

【发布时间】：2013-09-01 11:31:23

【问题描述】：

我可以使用媒体查询构建响应式布局，但这些样式我们只能在外部/内部 CSS 中编写。我们不能使用 DIV 和外部/内部 CSS 的电子邮件模板。 我如何构建响应式电子邮件模板。

谢谢， 沙尼德

【参考方案1】：

你应该先学习@media 查询。信息多，这里就不写了。

【参考方案2】：

在 html 电子邮件中使用媒体查询并不是开发响应式 HTML 电子邮件的一个很好的解决方案，因为您的绝大多数受众不会以您想要的方式看到它。

Gmail 不会在 html 电子邮件的头部保留任何 CSS。这是媒体查询的所在，所以 .. 不起作用。

android 支持媒体查询，但充其量是有问题的。

开发伪响应 HTML 电子邮件的最佳方法是构建流畅布局的 HTML 电子邮件。使用（为简单起见）单列布局设计您的电子邮件。您可以使用多列布局开发流畅的布局，但它很快就会变得非常复杂。

像平常一样设计你的布局，内联你所有的样式，并使用折旧的 HTML 属性而不是 css 样式。不管它是否是内联的，CSS 在 HTML 电子邮件中仍然不能很好地发挥作用。谨慎使用，如果可以避免就不要使用。

不要为您的元素分配高度，而仅以百分比值分配宽度。因此，允许显示电子邮件的设备根据百分比值而不是特定的像素大小来确定要显示的最佳宽度。

<table  cellpadding="0" cellspacing="0" border="0">...</table> 

这是一个很好的流畅布局示例：http://woothemes.createsend1.com/t/ViewEmail/y/1D01C6AE9D028347

【参考方案3】：

您可以对常见的邮件客户端使用媒体查询。 Webclients 严重依赖内联 css。在您的表格上使用尽可能多的百分比 (100%) 和最大宽度的表格，这些表格的缩放比例可能不会超过一定数量的像素。

100% 包装表中的嵌套表总是堆栈继承。

【参考方案4】：

您需要了解，响应式电子邮件虽然可能，但不能在每个邮件客户端上运行。例如，Gmail 会从电子邮件中删除您所有的 head 标签，因此不允许媒体查询，因此没有响应性。根据我的测试，响应式电子邮件可以显示在 Outlook、Apple Mail 和其他一些标准媒体查询中。对于这些，您必须使用典型的断点并将它们应用于 trs 或 tds。现在，这可能很棘手。您必须确保它不会破坏您的表格布局，因此您确实需要提前计划布局中会发生哪些变化。

如果您希望它主要适用于所有内容，我建议您使用使用 % 宽度的流体布局。但如果你真的想要一些网络响应能力，它与任何响应式网站一样。请注意，它不会在任何地方都有效。像这样：

@media (max-width:680px) 
.hide  display:none; 
.main  width:440px 
.header  width:440px; 
.header-img  width:440px 
.footer  width:440px; 
.footer-size  width:440px; 


@media (max-width:440px) 
.hide  display:none; 
.main  width:100% 
.header  width:100%; 
.header-img  width:100%; height:auto; 
.logo-img  width:75px; height:30px; 
.icon-img  width:19px; height:18px; 
.icon-wrap  width:19px; 
.footer  display:none !important; 
.footer-size  width:100% 


@media (max-width:240px) 
.hide  display:none; 
.main  width:100% 
.header  width:100%; 
.header-img  width:100%; height:auto; 
.logo-img  width:75px; height:30px; 
.icon-img  width:19px; height:18px; 
.icon-wrap  width:19px; 
.button  width:100%; height:auto; 
.footer  display:none !important; 
.footer-size  width:100%  

（这只是我参与的电子邮件活动中的一些代码，顺便说一句）

【讨论】：

您好 R Lacorne，感谢您的回答。 zurb.com/playground/responsive-email-templates 在这里我可以看到很多响应式布局。但是当我在邮件中使用这些布局时没有得到响应式样式。

就像我说的，并不是每个邮件客户端都能显示响应式电子邮件。如果您在 gmail 中检查您的响应式模板，它不会触发断点。如果您想确保响应式断点正常工作，请确保检查 Outlook.com 或 Apple Mail 中的电子邮件。