电子邮件客户端忽略内部样式表

Question

正常Web开发中的最佳实践要求在样式标记之间放置样式或加载样式表;但是，我发现有几个电子邮件客户端会忽略任何样式标记，只执行内联样式（www.campaignmonitor.com）。我可以解决这个问题，但我不确定CSS是否支持内联媒体查询。我希望我的电子邮件在桌面上显示一些不同。是否支持类似的东西？：

<div id="myDiv" style="@media screen and (max-width:480px;){ color:black; }"></div>

Answer 1

HTML电子邮件是完全不同的野兽。你需要像1999年一样对它们进行编码。使用一组非常有限的标签并确保所有或你的样式都是内联的。使用表格进行布局。

要使用媒体查询，您需要同时执行这两项操作。

我建议您首先使用所有内联样式创建电子邮件。然后，当您对它感到满意时，您可以添加对移动设备的支持。

要添加对移动设备的支持，请将媒体查询添加到head标记，并使用!important覆盖任何内嵌样式。

这是一个例子： Optimizing for mobile email

这是一个有用的图表，详细说明了哪些css支持电子邮件客户端。 http://www.campaignmonitor.com/css/

Answer 2

我认为它们不像那样内联工作，您可能必须将样式表嵌入HTML电子邮件模板本身（例如<style>@media {...}</style>）。

即使这看起来像是一件非常狡猾的事情。 HTML电子邮件是一个巨大的痛苦，因为标准和CSS支持大约落后十年，流行的电子邮件客户端在支持哪些属性和样式类型方面存在巨大差异。

一般来说，保持简单，并使用基于旧学校表的布局与所有内联CSS是可行的方法。 Campaign Monitor有一个great chart of support for various CSS properties in major email clients and devices。

Answer 3

HTML无法在电子邮件客户端中正确呈现问题的常见解决方法是尽可能做到最好，并在顶部显示一个突出的链接：“电子邮件无法正确显示？在浏览器中查看它。 “

Ray Kurzweil的每周时事通讯都是这样做的，而且形成得很好，做得很好，而且我总是读它。 （这是内容和演示的完美结合）。