3

正常 Web 开发中的最佳实践要求将样式放在样式标签之间或加载样式表；但是，我发现一些电子邮件客户端会忽略任何样式标签，只执行内联样式 (www.campaignmonitor.com)。我可以处理，但我不确定 CSS 是否支持内联媒体查询。我希望我的电子邮件在桌面上显示有所不同。是否支持与此类似的内容？：

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

3 回答 3

9

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

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

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

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

这是一个示例： 针对移动电子邮件进行优化

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

于 2012-12-20T15:11:32.940 回答
1

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

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

一般来说，保持简单并使用带有所有内联 CSS 的旧式基于表格的布局是可行的方法。Campaign Monitor 提供了对主要电子邮件客户端和设备中各种 CSS 属性的支持的出色图表。

于 2012-12-20T15:16:09.680 回答
0

解决电子邮件客户端中 HTML 无法正确呈现问题的常见解决方法是尽您所能，并在顶部有一个突出的链接，上面写着： “电子邮件显示不正确？在浏览器中查看。”

Ray Kurzweil 的每周时事通讯爆炸就是这样做的，而且它的格式很好，做得很好，我总是阅读它。（这是内容和演示的完美结合）。

在此处输入图像描述

于 2012-12-20T15:25:59.367 回答