HTML电子邮件：适用于移动设备和Outlook的@media查询

Question

我正在编写HTML以查找可在Outlook和移动设备中查看的电子邮件。我想使用Outlook表（我需要一个多列设置）和移动设备的单列div（或任何＆lt; 400px）。

我正在尝试使用@media查询，我知道Outlook的CSS支持非常粗暴，但我想知道是否有人知道可以使Outlook“忽略”@media查询的＆＃ 400px，并为＆gt; 400px部分应用样式。我试过这个：

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

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

麻烦似乎是Outlook忽略了两者。有什么方法可以让这种东西在Outlook中运行吗？

提前致谢！

Answer 1

说实话，我很清楚。 HTML电子邮件是一个非常可怕的业务。将媒体查询添加到组合中是一件麻烦事。

Blackberrys不支持媒体查询......

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

Outlook甚至几乎没有标准CSS，因为switched it's rendering engine to MS Word's。

Check out this site about email standards支持更多信息。我仍然在HTML电子邮件中使用内联样式和表格，因为它仍然是获得结果的最一致方式（2013年非常糟糕）

Answer 2

最佳做法是针对背景颜色进行内联css。你写的是一个不能越过边界的班级。像脚本这样的一些设备有点像这样的脚本。例如，当您收到要求隐藏的响应式电子邮件时：边框;大多数设备和浏览器将作为媒体查询调用。然而，Android姜饼不会做隐藏的边框。 iPhone会隐藏边框。 Outlook 2013将隐藏边界，但雅虎不会这样做。对于您为Outlook 2007和2010做背景颜色需要具有内联的内容您希望它在此处阅读文本

希望这会对你有所帮助。