Email Gmail收集部分媒体查询样式（Mailchimp）

我正在完成一个Mailchimp模板，Gmail现在是最让我头疼的

在我的头脑中，我有一些样式（css）和媒体查询。如果我把媒体查询放在底部，它会阻止大多数样式通过。如果我把媒体查询放在最上面——我所有的风格都很好，但是邮件看起来“坏了”（好像它应该在600px宽/手机下），就像媒体查询已经开始了一样

首先，我不认为Gmail应该阅读媒体查询中的任何内容；其次，为什么我的邮件显示为“响应”，而我有全浏览器宽度

---

----顺便说一句——我知道我可以浏览所有内容并添加内联样式，但是，我有三个模板，如果我能侥幸逃脱，我宁愿：）

我通过大量的谷歌搜索发现，我不是世界上唯一一个有这个（奇怪）问题的人。下面我引用卢卡斯·迈纳尔迪的话，他在Outlook.com上发布了一个类似问题的答案

基本上，在结束正文标记之前在媒体查询中添加一个额外的样式标记可以解决问题。

我已经在我的设备（gmail、iphone、thunderbird）上进行了测试，它似乎不会对以前没有问题的客户造成任何损害。我还在等待Mailchimp收件箱检查的完成（在那里我测试了更多的客户端，如Outlook、Android等）。我会编辑我的答案，如果它似乎有任何伤害，否则认为这是一个解决方案。 你好，詹姆斯

在下面的评论中，我在Outlook.com上发布了这个问题的可能解决方案

问题似乎在于电子邮件的加载区域。显然，该区域开始时很小，几秒钟后就调整了大小，但在这段时间内，媒体查询启动并显示移动版本。这是因为在代码的层次结构中首先读取媒体查询（它们位于标题部分），然后读取HTML电子邮件

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

我在Litmus中尝试了这一点，所有这些似乎都很好地发挥了作用（没有其他浏览器/移动设备/电子邮件服务器受到负面影响，显示的电子邮件版本与标题部分的样式完全相同）

---

摘自

请参见Gmail，它会将body标签之外的所有内容剥离，包括样式标签。也许这种不寻常的行为是因为你身体的某个地方有媒体查询？你所描述的听起来很奇怪——如果你想让任何人帮助解决这个问题，你需要发布代码和屏幕截图。在旁注中，您可以使用样式标记，只需在发送之前运行其中一个即可。是的。这很奇怪。但是，当您发送活动时，您在mailchimp中编写的CSS呈现为内联。所以我想问题就在那里？有人熟悉Mailchimp处理头部css样式的方式吗？