响应式电子邮件图片

Question

我想在电子邮件通讯中实现响应式图像，例如手机。为此，我使用了来自 templates.mailchimp.com 的代码 sn-p 并将其插入到我要更改的图像上方的正文中：

<style type="text/css">
@media only screen and (max-width: 480px){
    .emailImage {
        height:auto !important;
        max-width:600px !important;
        width: 100% !important;
    }
}
</style>

对于我想要响应的图片，我添加了 class=”emailImage”。 可悲的是，现在这行不通。任何人都可以解释为什么或为我的问题提供更好的解决方案？ 如有必要，这里是我的时事通讯中的完整代码：http://pastebin.de/39651?

谢谢

Answer 1

试试这个：

<style type="text/css">
@media screen and (max-width: 480px){
    img[class="emailImage"] {
        width: 100% !important;
    }
}
</style>

<img class="emailImage" src="path/to/img" style="width: 600px; height:auto;" width="600">

这是我用于时事通讯的相同代码，它工作正常。 稍后我会更新我的答案，当我找到关于为什么这种特殊的样式方式是必要的以及对于什么邮件客户端的参考时，我已经有一段时间没有编写那个代码了。

更新：在媒体查询中使用属性选择器是Yahoo mail bug 的解决方法，它使媒体查询中的样式优先于内联样式。

邮件客户端的最大宽度支持是pretty limited，因此更安全的方法是将图像宽度指定为内联样式（在 MQ 中使用!important 胜过此操作）。由于高度始终是自动的，因此可以内联定义。全局属性用作最终后备，以防某些邮件客户端决定忽略或去除内联样式。

此外，在（有点）复杂的邮件布局中，图像元素可能会位于某个表格内，在这种情况下，表格元素还必须具有相同的内联属性集和媒体查询内部属性才能响应。

有用的链接：CSS support across mail clients

Answer 2

HTML 格式的电子邮件不支持 CSS（至少并非所有电子邮件客户端都支持此功能）。您必须使用老式的 HTML 内容，例如 <img src="some-URL.png" width="100" height="200">

顺便说一句，您也可以尝试在 HTML 标记本身上使用内联 style 属性。它可能适用于某些电子邮件客户端。

Check out this post for "best-practices" with emails and HTMLs

Answer 3

大多数电子邮件客户端对 CSS 的支持都很糟糕。大多数客户会删除您的电子邮件模板，因此您不应在其中包含重要的 CSS。也可能是某些客户端从电子邮件中删除类名称，或重新格式化它们，或拒绝理解媒体查询或无数其他可能的问题。

解决方案是简单地将所有 CSS 内联写入每个元素。常规的 max-width: 100% 和 height: auto 应该足够了。

有一些工具可以将一组外部样式和类名转换为内联样式。这确实会阻止您使用媒体查询，因此请确保您不依赖它们来呈现您的电子邮件。

编辑：由于您似乎在使用 Mailchimp，请查看 their article on CSS in HTML emails。