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">

这与我用于时事通讯的代码相同，而且效果很好。稍后当我找到关于为什么这种特殊的样式方式是必要的引用以及为什么邮件客户端时，我会更新我的答案，自从我做了那段代码以来已经有一段时间了。

使用媒体查询中的属性选择器的

UPDATE：是Yahoo mail bug的变通方法，它优先考虑内联媒体查询中的样式。

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

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

有用的链接：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。

响应式电子邮件图像

3 个答案: