2

我正在为可以在 Outlook 和移动设备中查看的电子邮件编写 HTML。我想为 Outlook 使用表格（我需要设置多列），为移动设备使用单列 div（或任何 < 400 像素）。

我正在尝试使用@media 查询来做到这一点，并且我知道 Outlook 的 CSS 支持非常粗制滥造，但我想知道是否有人知道可以使 Outlook“忽略”< 400px 的 @media 查询并应用样式的 hack对于 >400px 部分。我试过这个：

@media (max-width: 480px)
{
    .mobile-email { background-color:green; }
} 

@media (min-width:500px) 
{
    .mobile-email {  background-color:red;}
}

问题似乎是 Outlook 忽略了两者。有什么办法可以让这种事情在 Outlook 中工作吗？

提前致谢！

4

2 回答 2

3

老实说，我会很清楚。HTML 电子邮件是一项非常可怕的业务。将媒体查询添加到混合中是自找麻烦。

黑莓一开始就不支持媒体查询...

http://www.emailonacid.com/blog/details/C13/media_queries_in_html_emails

Outlook 甚至几乎不使用标准 CSS，因为它将渲染引擎切换到 MS Word 的.

查看此站点以了解有关电子邮件标准支持的更多信息。我仍然在 HTML 电子邮件中使用内联样式和表格，因为它仍然是获得结果的最一致的方式（这在 2013 年非常糟糕）

于 2013-04-09T08:48:46.530 回答
0

最佳实践是为背景颜色做内联 css。您编写的课程无法跨越国界。有些设备喜欢这样编写脚本，有些设备喜欢这样编写脚本。例如，当您收到一封要求隐藏：边框的响应式电子邮件时；大多数设备和浏览器都会按照媒体查询的要求进行操作。然而，Android 姜饼并没有做隐藏边框。iphone会隐藏边框。Outlook 2013 会隐藏边框，但雅虎不会这样做。对于您为 Outlook 2007 和 2010 做的背景颜色需要内联您希望它在此处阅读文本

我希望这会帮助你。

于 2013-06-16T01:55:00.130 回答