移动和桌面之间的电子邮件布局不同
移动和桌面之间的电子邮件布局不同
提问于 2014-07-22 10:18:33
我在创建html电子邮件时遇到了一个小问题。我有两个布局:一个用于桌面(和平板电脑)，另一个用于移动。问题是，从图像到文本，这些布局在很多方面都是不同的。为了做到这一点，我必须创建两个表，并且在每个桌面上应该可见的表中，我为Mobile添加了一个类" Desktop“和相同的类(为Mobile添加了"display: none;”用于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 : Gmail (Android) Gmail应用程序(iPhone)电子邮件默认应用程序(Android)
有人能帮助我只在桌面上显示桌面表，而移动表只显示在Mobile上吗？
回答 1
Stack Overflow用户
发布于 2014-11-18 21:42:04
这已经被问了几次--例如，Gmail Responsive Email - Media Queries - Style Tag
简短的回答是: Gmail不支持@media查询-它剥离了所有嵌入式样式(<style>…</style>)，只留下内联样式(例如<div style="…">)，并且不能在内联样式中使用媒体查询。Outlook的不同版本是一个完全不同的问题。查看www.litmus.com和/或www.emailonacid.com的免费试用。关于如何处理移动HTML电子邮件，有很多很好的资源--灵丹妙药和Acid上的电子邮件都有很好的博客，在相关问题的答案中也有很好的信息。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/24884684
复制相关文章
相似问题
腾讯云开发者
