响应式 html 电子邮件中的图像答案

【问题标题】：Images in responsive html email响应式 html 电子邮件中的图像
【发布时间】：2019-08-02 02:50:55
【问题描述】：

我的电子邮件模板有两个媒体查询。我有一个号召性用语按钮作为图像。当代码在 Outlook 中呈现时，较大媒体查询中的图像按钮看起来不错，但在较小媒体查询中的图像宽度x高度在 Outlook 中查看呈现的电子邮件时不会改变它确实为其他邮件客户端、操作系统呈现良好）。图片的原生大小是 CSS 中声明的 2 倍。

我试过了——

CSS 中的最大宽度。 HTML 中的 width 属性（但这适用于所有媒体查询）。

CSS -

@media screen {
 .image-responsive {
   width: 320px;
   height: 68px;
   }


@media (max-width: 520px) {
 .image-responsive {
   width: 260px;
   height: 56px;
   max-width: 260px;
   }

HTML -

<p style="text-align: right;margin: 0;padding-top: 20px;">
<a href="#" style="color:#fff; text-decoration: none;">
<img src="URL/images/btn-securepayment-2x.png" alt="Secure Payment" class="image-responsive">
</a>
</p>

【问题讨论】：

标签： outlook html-email

【解决方案1】：

max-width 元素在 Outlook 中不受支持。

Outlook 使用 Word 呈现邮件正文，因此如果您希望正确呈现标记，则需要遵循严格的规则。您可以在以下文章中找到支持和不支持的 HTML 元素、属性和级联样式表属性的列表：

【讨论】：

抱歉，由于媒体查询在 Outlook 中不起作用，而不是这两篇极长的文章，因此无法回答？

【解决方案2】：

遗憾的是，Outlook 2007+ 不支持媒体查询（尽管较旧的支持）。正如 Eugene 所提到的，Outlook 2007 将其渲染引擎从 IE 更改为 MS Word，这也会导致非常常用的 CSS 出现渲染问题。

下面是一个示例，说明如何使用媒体查询来更改在不同屏幕尺寸上查看的电子邮件中的元素。

@media screen and (max-width: 520px) {
  p {
     text-align: left !important;
     margin: 10px !important;
     padding: 0px !important;
     background-color: #000000 !important;
  }
}

<p style="text-align: right;margin: 0;padding-top: 20px;color:#ffffff; background-color:#ff0000;">
wow this is fun
</p>

最后，这里有一个资源from Campaign Monitor，它详细说明了哪个 CSS 可以在哪个电子邮件客户端上运行。

【讨论】：