Question

我的电子邮件模板有两个媒体查询。我有一个号召性用语按钮作为图片。在Outlook中呈现代码时，较大的媒体查询中的图像按钮看起来不错，但是在Outlook中查看呈现的电子邮件时，较小的媒体查询中的图像宽度xheight不会改变。对于其他邮件客户端，OS确实可以正常显示。图片的原始大小是CSS声明的2倍。

我已经尝试过-

CSS中的

max-width。 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>

Answer 1

Outlook不支持max-width元素。

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

Answer 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在哪个电子邮件客户端上运行。

响应式HTML电子邮件中的图像

2 个答案: