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

Question

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

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

谢谢， Shanid

- shanidkv

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

- davidcondrey

Answer 2

需要理解的是，响应式邮件虽然有可能实现，但并不能在所有邮件客户端上都正常工作。例如，Gmail会从邮件中删除所有头部标签，因此不支持媒体查询，也就无法实现响应式布局。根据我的测试结果，在Outlook、苹果Mail和其他一些标准媒体查询支持的邮件客户端上可以显示响应式邮件。对于这些客户端，您需要使用典型的断点，并将其应用于或。但这可能有些棘手，您必须确保它不会破坏表格布局，所以您真的需要事先规划好布局中会发生哪些变化。

如果您希望电子邮件在大多数邮件客户端上都能正常工作，建议使用百分比宽度的流动布局。但如果您确实需要实现一些网络响应性，那么与任何响应式网站一样，请注意它不会在所有邮件客户端上都起作用。就像这样:

@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

---

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

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

Answer 3

您可以使用媒体查询来适配常见的邮件客户端。网络客户端主要依赖于内联 CSS。在表格中尽可能使用百分比（100%），对于可能不会扩展到一定像素量以上的表格，使用最大宽度。

在 100% 包裹表格中嵌套的表格总是继承堆叠。

- Jazper Adèr

Answer 4

你应该先学习@media查询。这是一个需要写很多信息的内容。

- Виктор Новиков