html - 如何使具有响应式设计的嵌套表与 Gmail 兼容
问题描述
我目前正在开发一个电子邮件活动,该活动可以在我迄今为止测试过的所有设备上显示和运行,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 。任何有关问题或解决方案的建议将不胜感激。
解决方案
Gmail 和其他几个电子邮件客户端从 html 中去除标签。这就是为什么最好内联尽可能多的 CSS。当涉及到行和列时尤其如此。
确保跨客户端兼容性的最佳方法是使用像Zurb这样的内联工具。这样做的美妙之处在于,它将为您提供 100% 响应式电子邮件模板并与跨客户端兼容。它还将允许您在 SASS 中进行大部分实际编码,从而加快生产速度。
推荐阅读
- java - 将自定义服务注入 Spring Boot 测试
- python - 我们如何从链表中的第 n 个元素遍历到最后一个元素?
- kubernetes - 使用 prometheus pod 监控 golang webapp pod
- c++ - C++ openssl:编辑密码套件
- java - Android YoutubePlayerView 视频不可见
- python - 如何匹配具有不同时间分辨率的熊猫数据帧
- winapi - 使用 Windows CryptoUnprotectData 生锈 FFI
- c# - 如何测试一个非常简单的 AWS Lambda
- .htaccess - .htaccess 文件在嵌套目录中不起作用,但在父目录中起作用?
- android - 如何在 Android Studio 中使用 AsyncTask 从可绘制对象中设置图像