如何使具有响应式设计的嵌套表与 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 中进行大部分实际编码，从而加快生产速度。