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

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。现在，这可能很棘手。您必须确保它不会破坏您的表格布局，因此您确实需要提前计划布局中将发生哪些变化。

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

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

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