Windows 中 Outlook 电子邮件中的响应式填充

Question

我有一个 html 电子邮件设计，它具有响应式 (left/right) 填充，在 475 像素宽度处变宽或变窄。我已经为较窄的宽度设置了内联属性，并为响应添加了媒体标签：

@media only screen and (min-width: 476px)
{
  *[class~="iphone_pad"] {padding:0 40px;}
}
@media only screen and (max-width: 475px)
{   
  *[class~="iphone_pad"] {padding:0 25px;}
}

这适用于 OSX 上的 Apple Mail 和 Outlook，并且由于在大多数主要窄屏上默认为窄边距。但是 Windows 上的 Outlook 不响应更宽的填充。可能是 Outlook/Windows doesn't support the media tag?

有谁知道有什么方法可以让它工作吗？

Answer 1

如果邮件正文中有内联 CSS，您应该在 <style> 标签中每个 CSS 规则的末尾添加一个 !important，以便它可以覆盖内联 CSS.

但是...

Windows Outlook 支持 <style> 标签，但 不支持 @media 标签。我通常首先构建可在 Outlook 中使用的电子邮件，然后 hack/progressively 使用 Windows Outlook 无法识别的标签（如 @media）为其他客户端增强布局。

Windows 中 Outlook 电子邮件中的响应式填充

Responsive padding in email for Outlook in Windows

css

email

outlook

html-email