媒体查询在电子邮件中不起作用 - 即使在 header

Question

我看到很多帖子都在谈论同样的事情，说是因为空格、格式错误……等等。我都试过了，没办法有手机版和桌面版。

我这样做的方法是将 html 与检查员一起粘贴到电子邮件 body 中，但发送的唯一版本是桌面版、gmail 和所有其他版本电子邮件交换忽略样式和@media...

即使像这样简单的东西（body 的其余部分有内联样式，其中 none 标记为 !important，仅在 @media 内），它仍然没有使用移动版：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>
<style>
@media only screen and (max-width:770px){
  h1{font-size: 122px !important;text-align: center !important;}
}
</style>
</head>

<body style="width: 100%;....</body>

有什么想法吗？

谢谢。

Answer 1

虽然 Gmail 支持@media 查询，但也有一些限制：https://www.caniemail.com/features/css-at-media/

但是，您在评论中声明您是从 Gmail 本身发送的。这将有与 caniemail 不同的限制。

如果您必须这样做（通常您会使用 MailChimp 或 SendGrid 或其他 ESP），我相信您可以将代码复制到 Gmail 中，然后使用 Developer 工具添加代码把那个删了回来，然后发过去。你可以试试。

出于测试目的，您可能喜欢使用 Putsmail。这将使您能够模仿适当的 ESP 将执行的操作。

媒体查询在电子邮件中不起作用 - 即使在 header

Media queries don't work in email - even in header

html

css

gmail

media-queries

html-email