如何创建响应式电子邮件模板？
我可以使用媒体查询构建响应式布局，但这些样式我们只能在外部/内部 CSS 中编写。我们不能使用 DIV 和外部/内部 CSS 的电子邮件模板。我如何构建响应式电子邮件模板。
谢谢， 沙尼德
问问题
4170 次
4 回答
6
在 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
于 2013-12-09T01:37:06.657 回答
3
您需要了解响应式电子邮件虽然可能，但不能在每个邮件客户端上运行。例如，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% }
}
（这只是我参与的电子邮件活动中的一些代码，顺便说一句）
于 2013-08-29T14:52:17.740 回答
0
您可以对常见的邮件客户端使用媒体查询。Webclients 严重依赖内联 css。在表格上使用尽可能多的百分比 (100%) 和最大宽度的表格，这些表格的缩放比例可能不会超过一定数量的像素。
100% 包装表中的嵌套表总是堆栈继承。
于 2013-09-02T14:32:52.510 回答
-3
你应该先学习@media 查询。因为有很多信息，这里不适合写。
于 2013-12-09T01:47:01.183 回答