我目前发送多个桌面版时事通讯，其中包含与托管移动版的“查看为移动版”链接，但我正在尝试探索在用户打开电子邮件时立即显示移动版的选项。
我已经阅读了使用内部样式表对以下代码进行变体的响应式设计
@media screen and (max-width : 320px), screen and (max-device-width: 320px)
但根据http://www.campaignmonitor.com/css/，并非所有 ESP 都允许或读取内部样式表。简而言之，是否有使用上述代码生成响应式电子邮件的好方法，还是由于缺乏支持而不可行？
【问题讨论】：
标签： css email responsive-design
一般来说，电子邮件客户端在支持 CSS 方面表现不佳（有几个原因），因此您可能希望避免过多地使用 CSS。话虽如此，您可以在http://www.emailonacid.com/blog/details/C6/media_queries_in_html_emails 找到支持表，并确保您使用 CSS 逐步增强支持客户，而不是惩罚那些不支持的客户。
【讨论】：
我同意 Andy 在“电子邮件客户端不擅长支持 CSS”中的观点。这是一个普遍的规则，并且已经存在了很长时间。
也就是说 - 当我们谈论移动电子邮件客户端时，没有任何手机运行 MS Outlook '95，如果你明白我的意思！
查看支持电子邮件的智能手机设备的市场细分，您会发现支持的百分比高于桌面设备。
在我们公司，超过 50% 的每周电子邮件读者都使用iPhone。其中包括桌面版 Gmail、Hotmail、Outlook 等。我们看到移动使用成为我们关注焦点的持续趋势，而桌面版则处于次要地位。
我们没有用完并建立移动网站，但我们正在定制我们的电子邮件以适应移动设备。例如：Everguide Weekly Guide Email
所以关于您的 CSS - 事实上，此时要确保媒体查询被正确读取和解释是非常困难的。
我们发现 Android 不像 iOS 那样喜欢打球，但通过一些很好的调整和代码破解，我们已经做到了。
这是我们的交易电子邮件模板之一的示例 - 宽度上限为 520 像素，但在不同设备上可缩放至设备宽度等。
需要测试和耐心才能做到这一点。对于我们的下一个项目，我将使用来自 Campaign Monitor 的新指南从头开始：Campaign Monitor's guide to Responsive Email Design
我将一点一点地构建它，使用 adobe shadow（我认为它最近已重命名）和各种屏幕模拟器来确保代码在每一步都真正响应。
如果我是你，请先确定你自己的“样板”，将其保存下来，然后在此模板上制作所有未来的电子邮件设计。
我专门研究这个 - 目前还没有经过验证的真正方法。
祝你好运！
【讨论】：
创建响应式电子邮件的问题在于，很多客户只是忽略了样式标签，因此无法构建真正的响应式电子邮件...
但是有一个技巧... ;)
您可以以移动优先的方式构建电子邮件，因此基本的 html 是移动版本。 如果您以某种方式创建媒体查询，他们“重新创建”原始桌面版本，那么您有一个很好的解决方案...... 因此，如果客户端忽略媒体查询，那么它将显示移动版本。
我找到了一个很棒的模板，它以我提到的方式工作，你可以在这里找到它： http://internations.github.io/antwort/
【讨论】：