Gmail 响应式电子邮件 - 媒体查询 - 样式标签答案

【问题标题】：Gmail Responsive Email - Media Queries - Style TagGmail 响应式电子邮件 - 媒体查询 - 样式标签
【发布时间】：2014-03-31 03:38:51
【问题描述】：

请看这里： Responsive emails on Gmail app (Android)

我正在尝试构建用于所有电子邮件客户端的响应式电子邮件。 Gmail 正在从头部/正文中剥离我的样式标签，因此查询也被剥离了。

我已经在 Acid 上使用电子邮件进行了测试，而 Gmail 只显示两个版本！

这里有什么解决办法：

1) 使用框架？ - 甚至这些都使用样式/媒体查询

2) 外部样式表 - 有什么办法可以使这个工作？

有没有人找到这个问题的永久解决方案。任何建议我都会非常感激！ :)

【问题讨论】：

HTML 电子邮件在各种客户端中显示本身就是一场噩梦。让它响应是第二个噩梦。除非您有一个客户支付研究和测试之夜的费用，否则您最终必须完成这项工作（没有保证），我建议您放手……但我知道这不是任何人都希望得到的答案
可能重复：stackoverflow.com/questions/13604300/…
如果您正在寻找框架，请查看 Zurb 的 Ink responsive email framework。它非常可靠，我目前正在将它用于 GitHub HTML 电子邮件。

【解决方案1】：

Gmail 要求所有样式都是内联的，它会删除所有媒体查询以及您脑海中的所有内容...如果您没有以这种方式编码，我建议您通过 http://beaker.mailchimp.com/inline-css 可能会运行您的整个电子邮件直接解决问题。

另外值得一提的是，如果您没有在媒体查询中使用属性选择器，那么在雅虎中看起来会很有趣，我通常从这里开始响应式电子邮件

【讨论】：

内联工具不适用于媒体查询，因为无法内联声明媒体查询。
正确，但您不应该有用于在 GMail 中显示的媒体查询...自从我上次说以来，他对帖子进行了编辑，我认为这是来自浏览器的 gmail 而不是来自 android 的 gmail这里完全不同，android 与响应式电子邮件的兼容性非常差，我认为 Galaxy S4 甚至无法正确显示媒体查询。
感谢您的回复，但人们使用什么来构建响应式电子邮件。因为我只能找到诸如 Ink 之类的框架，但即使这些框架也具有将被 Gmail 剥离的媒体查询和样式。我在 Outlook 2003 中也遇到了问题，因为 mso 隐藏评论根本不起作用。有其他人找到解决此问题的方法吗？
如果您有响应式电子邮件，则不需要响应 gmail（桌面）版本。如果你喜欢我并通过 iPhone/iPad 上的 Mac Mail 检查你的 gmail，你的媒体查询会被 Mac Mail 而不是 gmail 接收（你不在 gmail 甚至认为它会转到 gmail）
仅供参考，截至 2015 年 6 月，链接的教程已被同一作者取代：webdesign.tutsplus.com/tutorials/…