Question

如何制作响应式电子邮件模板？

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

谢谢， Shanid

Answer 1

在HTML电子邮件中使用媒体查询对于开发响应式HTML电子邮件来说不是一个很好的解决方案，因为绝大多数受众都不会按照您的意图看待它。

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

Android支持媒体查询，但它充其量只是错误。

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

正常设计您的布局，内联所有样式并使用折旧的HTML属性而不是css样式..如果它是内联的，无关紧要，CSS仍然无法在HTML电子邮件中播放。请谨慎使用，如果可以避免，请不要使用它。

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

<table width="90%" cellpadding="0" cellspacing="0" border="0">...</table>

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

Answer 2

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

如果您希望它主要用于所有内容，我建议您使用％widths来使用流畅的布局。但如果你真的想要一些网络响应，它就像任何响应式网站一样。请注意，它无处不在。像这样：

@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% } 
}

（这只是我工作的电子邮件广告系列中的一些代码，顺便说一句）

Answer 3

您可以对常见邮件客户端使用媒体查询。 Web客户严重依赖内联css。在表格上使用尽可能多的百分比（100％）和可能无法扩展到大于特定像素数量的表格的最大宽度。

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

Answer 4

你应该首先学习@media查询。因为有很多信息，所以不能写在这里。

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

4 个答案: