css - 移动设备和桌面设备的电子邮件布局不同

Question

我在创建 html 电子邮件时遇到了一些问题。 我有两种布局:一种用于桌面(和平板电脑)，一种用于移动设备。 问题是这些布局在很多方面都不同，从图像到文本。 我必须创建两个表才能做到这一点，并且在每个应该在桌面上可见的表中，我放置了一个“桌面”类，并且为移动设备添加了相同的类(移动类并为移动设备添加了“display:none;”)。 然后我添加了这个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 应用程序(安卓) Gmail 应用程序(iPhone) 电子邮件默认应用程序(Android)

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

Answer 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 都有很好的博客，并且这里的相关问题的答案中有很好的信息。