css - Gmail 应用程序 (Android) 上的响应式电子邮件 - rem 和 heights

标签 css email responsive-design gmail html-email

我正在构建一个响应式电子邮件模板,它应该适用于所有网络客户端和设备。我不得不使用 rem font-size 以便在手机中可读。我做了像素和 em 版本,但没有一个给我我需要的外观。但是,使用 rem 使我的行高无法按预期工作,或者更确切地说:它在除 gmail 应用程序之外的所有应用程序中都运行良好。

我把部分代码带到了这个链接: http://jsbin.com/kunowo/1/edit 这样你就可以看看我期望得到什么。

当我打开电子邮件时出现“错误”或挣扎,两行文本之间的高度更大。例如,线条之间不是 4 个像素,而是 12 个像素。

有没有人遇到过这种情况?我花时间寻找以前的帖子,但他们处理与 rems 或高度无关的其他问题。提前致谢。

最佳答案

响应式在 Gmail 中不起作用。这是 unsupported email clients 的列表.此外,行高在电子邮件客户端中呈现不一致,Gmail 是罪魁祸首。

您可以通过在 style 标签中放置一些 CSS 来抵消非 Gmail 客户端(因为 Gmail 看不到 style 标签)来解决这个问题,但这可能会导致其他一些也忽略 style 标签的客户端变得偏移他们自己。

很抱歉成为坏消息的传递者......

关于css - Gmail 应用程序 (Android) 上的响应式电子邮件 - rem 和 heights,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22411667/

相关文章:

javascript - highcharts minPointLength 不适用于非堆叠条形图

html - 在电子邮件中使用 CSS 圆圈

css - 使用图像而不是 Bootstrap 的字形图标

html - 自动调整 Angular 框的大小

css - 被覆盖的 css 属性是被取消还是被覆盖?

css - Bootstrap 图标字体未加载

Java Mail超时和连接超时处理

asp.net-mvc - 用于电子邮件创建和发送的 ASP.Net MVC 后台线程

ios - 适用于 iPad 和 iOS 的响应式设计

javascript - Html+css+javascript 响应式设计