html - 响应电子邮件图像

Question

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

<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