具有内部CSS的响应电子邮件

我目前发送了多个桌面版本的时事通讯，其中有一个与托管移动版本的“查看为移动”链接，但我试图探索在用户打开电子邮件时显示移动版本的选项

我读过关于使用内部样式表的以下代码变体的响应性设计

    @media screen and (max-width : 320px), screen and (max-device-width: 320px)

---

但据了解，并非所有ESP都允许或阅读内部样式表。简而言之，是否有一种使用上述代码的响应电子邮件的好方法，或者由于缺乏支持而不可行？

一般来说，电子邮件客户端不支持css（出于几个原因），因此您可能希望避免过多使用css。也就是说，你可以在这里找到支持表，只要确保你使用CSS来逐步增强支持客户的能力，而不是惩罚那些不支持CSS的人。

我同意Andy在“电子邮件客户不擅长支持CSS”一文中的观点。这是一条普遍的规则，而且已经存在了很长时间

也就是说，当我们谈论移动电子邮件客户端时，如果你知道我的意思的话，没有任何手机运行MS Outlook'95

看看那些支持电子邮件的智能手机设备的市场细分，你会发现支持的比例高于桌面世界

在我们公司，超过50%的每周电子邮件读者仅在iPhone上阅读。这包括桌面Gmail、Hotmail、Outlook等。我们看到，移动应用是我们关注的焦点，而桌面则是第二位

我们并没有耗尽和建设移动网站，但我们正在调整我们的电子邮件，以便于移动。例如：

因此，关于您的CSS——事实上，目前很难确保正确读取和解释媒体查询

我们发现安卓不像iOS那样喜欢玩球，但通过一些好的调整和代码破解，我们终于做到了

下面是我们的一个事务性电子邮件模板的示例，它的宽度上限为520像素，但在不同的设备上可扩展到设备宽度等

要做到这一点需要考验和耐心。对于我们的下一个项目，我将使用Campaign Monitor的新指南从头开始：

我将一点一点地构建它，使用AdobeShadow（我想最近已经改名为AdobeShadow）和各种屏幕模拟器来确保代码在每一步都能真正响应

如果我是你，我会先敲定你自己的“样板”，保存下来，然后用这个模板做所有未来的电子邮件设计

我专门研究这方面，目前还没有一种行之有效的方法

---

祝你好运

创建响应式电子邮件的问题在于，许多客户端只是忽略了样式标记，因此无法创建真正的响应式电子邮件

但是有一个窍门……；）

您可以使用移动第一种方式构建电子邮件，因此基本的html是移动版本。 如果您以某种方式创建媒体查询，即它们“重新创建”原始桌面版本，那么您就有了一个不错的解决方案。。。 因此，如果客户端忽略媒体查询，那么它将显示移动版本

我发现了一个很好的模板，它以我提到的方式工作，你可以在这里找到它：