移动设备和台式机之间的电子邮件布局不同答案

【问题标题】：Email layout different between mobile and desktop移动设备和台式机之间的电子邮件布局不同
【发布时间】：2014-09-13 02:44:56
【问题描述】：

我在创建 html 电子邮件时遇到了一点问题。我有两种布局：一种用于台式机（和平板电脑），另一种用于移动设备。问题是这些布局在很多方面都不同，从图像到文本。为了做到这一点，我必须创建两个表，并且在每个应该在桌面上可见的表中，我放置了一个“桌面”类，并且对于移动设备（移动类并添加了“显示：无；”也适用于移动设备）。然后我添加了这个 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 中使用，但是，使用这段代码，我在以下位置看到了桌面和移动：桌面：邮箱展望 2010 Outlook 网络应用程序移动的： Gmail 应用程序 (Android) Gmail 应用程序 (iPhone) 电子邮件默认应用(Android)

有人可以帮我只在桌面上显示桌面表格，在移动设备上显示移动表格吗？

【问题讨论】：

标签： css email mobile gmail html-email

【解决方案1】：

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

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

【讨论】：