Question

创建HTML电子邮件时遇到了一些问题。我有两种布局：一种用于桌面（和平板电脑），另一种用于移动。问题是那些布局在很多方面都有所不同，从图像到文本。为了做到这一点，我必须创建两个表，并且在桌面上应该可以看到的每个表中我都放了一个类＆＃34;桌面＆＃34;同样适用于手机（类Mobile和添加＆＃34; display：none;＆＃34;也适用于Mobile）。然后我添加了这个CSS：

<style>
@media all and (max-width: 767px){
    table.Desktop{ display: none;vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;max-height:0px; }
    table.Mobile{ display: block !important;opacity: 1 !important;vertical-align:inherit;line-height:inherit;font-size:inherit;height:auto;margin:0;padding:0;mso-hide:inherit; }
    table[class="Desktop"]{ display: none;vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;max-height:0px; }
    table[class="Mobile"]{ display: block !important; opacity: 1 !important; }
    *[class="Desktop"]{ display: none;vertical-align:top;line-height:0px;font-size:0px;height:0px;margin:0;padding:0;mso-hide:all;max-height:0px; }
    *[class="Mobile"]{ display: block !important; opacity: 1 !important; }
}
</style>

网上很多人都说媒体查询可以在Gmail中使用，但是通过这段代码，我可以看到桌面和移动设备：桌面： Gmail的 Outlook 2010 Outlook Web App 移动： Gmail应用（Android） Gmail应用程序（iPhone）电子邮件默认应用（Android）

有人可以帮助我仅在桌面和移动桌面上显示桌面桌面吗？

Answer 1

这已被问过几次 - 例如，Gmail Responsive Email - Media Queries - Style Tag

答案简短： Gmail 不支持@media查询 - 它会删除所有嵌入式样式（<style>…</style>），只保留内联样式（例如<div style="…">），您可以＆＃39;在内联样式中使用媒体查询。各种版本的Outlook是一个完全不同的问题。查看www.litmus.com和/或www.emailonacid.com的免费试用版。关于如何处理移动HTML电子邮件有很多很好的资源--Litmus和Email On Acid都有很好的博客，这里有相关问题答案的好信息。

移动和桌面之间的电子邮件布局不同

1 个答案: