电子邮件中的媒体查询[Gmail]?

时间:2013-12-20 00:54:37

标签: html email responsive-design gmail media-queries

我只是想在我的朋友/家人周围发送一些圣诞节电子邮件,我已经将其构建为完全响应,就像我一直这样做。然而,因为它只是为了朋友,我不会通过MailChimp发送它通常发送给我的一切没有问题。

我尝试发送它的方法是打开index.html文件,选择全部,复制,然后粘贴到Gmail。这对我来说一直很好,并且工作。然而,这是我的第一个响应式电子邮件,我试图以这种方式发送,似乎媒体查询不会被带到这种方式,至少不是在gmail - >我刚刚做过的hotmail测试(Resizing window等什么也没做,只显示桌面版)。

是否有更好的方法来发送已构建的HTML电子邮件,而不仅仅是在Gmail中复制/粘贴?

2 个答案:

答案 0 :(得分:5)

很遗憾,Gmail不支持<style>标记。媒体查询只能在<style>代码中调用,而不能内联,因此Gmail不支持它们。

这是support chart

我建议你坚持使用像Mailchimp这样的ESP来发送HTML电子邮件。但是,当您在Gmail中使用here is a tool时,可以帮助您调试电子邮件代码的问题。

答案 1 :(得分:5)

所选答案实际上并不正确! Gmail会从电子邮件正文中删除ID和类,但会保留样式标记。

您可以使用以下内容:

*[summary~='fakeclassname'] {
    styles: here;
}

&#34;总结&#34;是Gmail执行删除的属性之一。在我发现Gmail实际上对电子邮件做了什​​么之后我发现这篇文章详细分解了它:

http://freshinbox.com/blog/interactive-emails-in-gmail-using-css-attribute-selectors/

该页面上有一些有用的链接可以深入了解特定于Gmail的定位。

注意:Gmail 应用会删除样式标记,并且市场份额不断上升(Android不再拥有原生应用并推动人们使用Gmail应用)应该被视为起点用于移动优先电子邮件开发。