【问题标题】:Media Queries in Email [Gmail]?电子邮件 [Gmail] 中的媒体查询?
【发布时间】:2014-01-08 18:42:52
【问题描述】:

我只是想在我的朋友/家人周围发送一点圣诞电子信息,我已经将它构建为完全响应等,就像我一直做的那样。但是因为它只是给朋友的,所以我不会通过 MailChimp 发送它,它通常会为我发送所有内容。

我尝试发送它的方式是打开 index.html 文件,全选,复制,然后粘贴到 Gmail。这在过去对我来说一直很好用,并且确实工作。但是,这是我尝试以这种方式发送的第一封响应式电子邮件,似乎媒体查询并没有以这种方式出现,至少在我刚刚做的 gmail -> hotmail 测试中没有(调整窗口大小等)什么都不做,只显示桌面版本)。

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

【问题讨论】:

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


    【解决方案1】:

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

    这里是support chart

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

    【讨论】:

    • 这个答案在编写时可能正确,也可能不正确,但今天它不正确。但是,对于移动设备上的 Gmail 应用程序来说仍然如此。
    【解决方案2】:

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

    您可以使用以下内容:

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

    “摘要”是 Gmail 去除的属性之一。在我想到 Gmail 对电子邮件实际上做了什么之后,我发现这篇文章对其进行了详细分析:

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

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

    注意:Gmail 应用程序 确实去除了样式标签,并且随着市场份额的上升(Android 不再有原生应用程序并推动人们使用 Gmail 应用程序)应该被视为一个起点用于移动优先的电子邮件开发。

    【讨论】:

      猜你喜欢
      • 2014-03-31
      • 1970-01-01
      • 2015-03-19
      • 1970-01-01
      • 2018-09-12
      • 2014-06-30
      • 1970-01-01
      • 2022-11-16
      • 2018-02-12
      相关资源
      最近更新 更多