如何使具有自适应设计的嵌套表与Gmail兼容

Question

我目前正在处理一个电子邮件广告系列，该广告系列在迄今为止针对Gmail进行测试的所有设备上均能正常显示和运行。我希望一旦屏幕尺寸减小，表格单元格就会折叠成块，但是，尽管Gmail可以在媒体查询之前识别所有CSS声明，但它不能在媒体查询中识别任何声明，并允许电子邮件不进行响应式设计。这是我要努力工作的最重要的声明。

@media screen and (max-width: 480px){table, thead, tbody, th, td { 
    width: 100% !important;
    display:block !important;
}

这是该电子邮件的链接，该电子邮件的显示和功能完全符合我的期望：https://www.spectrumemp.com/archives/email/d3ded4a4-3095-11e9-820b-22000ab3b6d0。关于可能存在的问题或解决方案的任何建议将不胜感激。

Answer 1

Gmail和其他几个电子邮件客户端将标记从html中剥离。这就是为什么最好内联尽可能多的CSS。当涉及行和列时，尤其如此。

确保跨客户端兼容性的最佳方法是使用Zurb之类的内联工具。这样做的好处是它将为您提供100％响应的电子邮件模板，并且可以跨客户端兼容。它还将允许您在SASS中进行大多数实际编码，这将加快生产速度。