响应式设计电子邮件模板的问题（css和内联样式冲突）

Question

我在电子邮件广告系列中遇到了一些css和内联样式的问题。

首先，我最后作弊，因为我隐藏了元素（display：none;），以便在使用@media css时以正确的顺序显示它们。这里的问题是当在桌面上显示isp（gmail）时它忽略了（display：none;）并最终在地方显示了双重内容。所以对于我使用的双重内容消失（显示：无！重要;）然后影响移动版本。

我在网上看到的一些移动模板似乎没有太多测试，因为它们不能在多个邮件客户端上工作。

如果有人有任何建议或帮助http://www.makeyourownmarket.com/test/test-doc.html

，代码就在这里

Answer 1

响应式电子邮件的一些提示：

• 将!important声明放在您的所有@media only screen and (max-width: 480px) CSS

上

• 考虑变通方法，如果display:none;无效，请在内联CSS上尝试width:0;height:0;，然后在移动设备样式中覆盖width:100px !important;height:100px !important;

• 您需要进行大量测试，拥有适用于所有重要电子邮件客户端的帐户/设备是最佳选择，但http://www.emailonacid.com适用于此。

Answer 2

我建议对HTML电子邮件及其限制进行更多研究。

这篇文章是一个很好的起点： http://kb.mailchimp.com/article/how-to-code-html-emails

一些提示：

• 不要将CSS放在STYLE标记中，因为这不适用于所有电子邮件客户端。
• 仅使用内联CSS
• 使用表格进行布局
• 如果媒体查询在电子邮件客户端中保持一致，我会感到非常惊讶。我会避免尝试使用这些，而是​​集中精力创建一个基本的，可靠的电子邮件模板，该模板在最受欢迎的电子邮件客户端中一致显示。

Answer 3

我不认为响应式设计是电子邮件的正确方式。由于许多邮件客户端，通常会在表内制作电子邮件。你可以在Nettuts

找到更多相关信息