android - HTML 电子邮件中的 css 类和 @media 规则

Question

我有一个内容表(我的用户的分数表)，它会在每个预定的时间段内通过电子邮件自动发送出去。

html 过去常常以像素而不是百分比的形式包含静态表格大小和其他度量定义。

在我的 iPhone 和 chrome 网络浏览器上一切似乎都很好，但在 Android 设备上就完全不成比例了。

我决定将其转换为响应式布局，将其替换为百分比。这似乎已经解决了我的问题，但是现在，由于PC和移动设备的宽度\高度比之间的宽度差异，我需要为PC屏幕和移动\平板屏幕的分数表确定不同的宽度。

我知道这可以通过使用@media 规则来完成，但问题是 CSS 的这个特性只能在样式表中使用，而不能用于内联格式的 CSS(在 HTML 中)。您可能知道，大多数电子邮件客户端不允许在 HTML 电子邮件中使用 CSS 样式表(类、CSS 选择器)。

在这种情况下你会建议做什么？

非常感谢任何帮助。

Answer 1

most email clients don't allow CSS style sheets(classes, CSS selectors) within HTML emails

不是链接样式表，但它们允许您将样式放置在 head 中的 style 标记中。是的，一些电子邮件客户端去掉了这些样式，但这不是不使用它们的理由。如今，许多电子邮件客户端也支持 @media 规则。关于各种电子邮件客户端支持和不支持的内容，有很多很好的建议 here . (该站点还有大量经过良好测试且外观漂亮的电子邮件模板。)

因为一些电子邮件客户端不支持文档头部的样式，最安全的方法是添加内联样式。但是，这不应该阻止您将样式放置在头部部分——例如 @media 规则——供那些可以处理它们的客户端使用。