Gmail采用部分媒体查询样式(Mailchimp)

时间:2014-03-06 18:08:38

标签: email templates gmail media-queries mailchimp

我正在完成一个Mailchimp模板,Gmail是目前最头痛的问题。

在我的脑海中,我有一些样式(css)和媒体查询。如果我把媒体查询放在底部 - 它会阻止大多数样式通过。如果我把媒体查询放在最顶层 - 我的所有样式都运行得很完美,但邮件看起来像“分解”(就像它应该在600px宽度/移动范围内),就像媒体查询已经开始一样。

首先,我认为Gmail不应该在媒体查询中读取任何内容,其次,当我拥有完整的浏览器宽度时,为什么我的邮件显示为“响应”?

----旁边的注意事项----我知道我可以浏览所有内容并添加内联样式但是,我有三个模板,如果我能逃脱它,我宁愿不这样做:)

1 个答案:

答案 0 :(得分:1)

我通过广泛的谷歌发现,我不是世界上唯一一个有这个(奇怪)问题的人。我引用下面的Lucas Mainardi,为Outlook.com发布了类似问题的答案。

基本上,在关闭正文标记之前为您的媒体查询添加额外的样式标记会解决问题。

我已经在我的设备(gmail,iphone,thunderbird)上进行了测试,对于之前没有问题的客户来说似乎没有任何损害。我也在等待我的Mailchimp收件箱检查完成(我测试更多客户端,如Outlook,Android等)。如果它似乎有任何伤害我会编辑我的答案,否则认为这是一个解决方案。

  

你好詹姆斯,

     

在下面的评论中,我在Outlook.com中发布了此问题的可能解决方案。

     

问题似乎是加载电子邮件的区域。显然,该区域的尺寸较小,并在几秒钟后调整大小,但在此期间媒体查询启动并显示移动版本。这是因为媒体查询首先在代码层次结构中读取(它们位于头部),然后读取HTML电子邮件。

     

我找到的解决方案是在HTML电子邮件之后放置包含媒体查询的样式部分,特别是在结束正文标记的正上方。

     

我在Litmus尝试了这一切,并且似乎全部工作得很好(没有其他浏览器/移动设备/电子邮件服务器似乎受到负面影响,显示完全相同的电子邮件版本与头部)。

取自http://emailwizardry.nightjar.com.au/2013/08/28/media-queries-in-html-email-cover-all-your-bases/