Question

我发送的电子邮件中有一个聪明的视觉元素，依赖于能够突出显示文本。因为这在移动设备上实际上是不可能的，并且在没有视觉效果的情况下看起来很尴尬，我想要尝试不在移动设备上显示这个元素。

据我所知，唯一的方法是使用@media标记，据我所知，这不能用内联电子邮件友好的CSS方式完成。这有可能以其他方式吗？

我正在使用MailChimp，如果这是相关的，但我不确定它会是什么。

Answer 1

媒体查询肯定会通过MailChimp内联工作。基本上，您只需为要隐藏的元素分配一个类，例如“仅限桌面”，然后在浏览器宽度低于某个像素宽度时将CSS规则应用于该选择器display:none。

@media only screen and (max-device-width: 480px) {
  .desktop-only {
     display:none;
  }
}

Answer 2

媒体查询在主要电子邮件客户端中有partial support。没有100％的技术可以针对所有客户端的所有移动设备。

如果您愿意，可以使用max-width媒体查询在非移动平台上展示，而不是使用min-width媒体查询将其隐藏在移动设备上。这样，它将默认隐藏在不支持媒体查询的客户端中。

此外，调用它们时min-width和min-device-width之间存在差异。大多数自适应电子邮件模板都使用max-width。