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

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

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

谢谢，

---

Shanid

您需要了解，响应式电子邮件虽然可能，但不能在每个邮件客户端上工作。举个例子，Gmail会从邮件中去掉你所有的头标签，因此不允许媒体查询，因此没有响应能力。根据我的测试，响应电子邮件可以在Outlook、Apple Mail和其他一些标准媒体查询中显示。对于这些，您必须使用典型的断点并将其应用于tr或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% } 
}

---

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

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

---

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

在HTML电子邮件中使用媒体查询并不是开发响应性HTML电子邮件的一个很好的解决方案，因为绝大多数读者不会以您希望的方式看到它

Gmail不会在html电子邮件的头部保留任何CSS。这就是媒体查询的地方，所以。。不行

安卓系统支持媒体查询，但充其量也有缺陷

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

按常规设计布局，内联所有样式，并使用降级的HTML属性而不是css样式。。不管它是内联的，CSS在HTML电子邮件中仍然不能很好地发挥作用。尽量少用，如果你能避免的话就不要用

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

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

。。。

---

这里有一个流体布局的好例子：

你应该先学习@media querys。因为有很多信息，这里不适合写。

你好，拉科恩，谢谢你的回答。在这里我可以看到很多响应性的布局。但是当我在邮件中使用这些布局时，并没有得到响应的风格。正如我所说，并不是每个邮件客户端都能显示响应的电子邮件。如果你在gmail中检查你的响应模板，它不会触发断点。如果要确保响应断点正常工作，请确保查看Outlook.com或Apple Mail中的电子邮件。