0

我正在使用 MailChimp 制作自定义模板。我尚未在多个电子邮件客户端上对其进行测试，但到目前为止，我对 gmail 的测试表明，当我添加此媒体查询时，它不仅不起作用，而且会导致整个 html 电子邮件在没有 css 的情况下呈现。没有查询的其他 CSS 适用于 gmail。在其他客户端上，媒体查询可以工作，并且不会阻止其他 CSS 工作。

这是 gmail（和其他）的已知问题，还是有办法做到这一点？

    @media only screen 
    and (max-device-width : 480px) {
       .bodyContent div{
            font-size:24px;
        }
        h1, .h1{
            font-size:36px;
        } 
        h2, .h2{
            font-size:28px;
        }
        h4, .h4{
            font-size:28px;
        }
        .preheaderContent div{
            font-size:24px;
        } 
    }
4

2 回答 2

4

Gmail不支持<style>或。由于媒体查询是嵌入的而不是内联的，因此无法在 Gmail 中使用。查看Campaign Monitor 中的这张方便图表，其中详细说明了各种客户端和应用程序支持哪些样式和选择器。<head><body>

于 2012-07-28T00:55:38.333 回答
0

我在使用 Gmail 时遇到了完全相同的问题。就我而言，我为电子邮件通讯编写了一个 HTML。问题是我正在缩小整个 HTML（包括媒体查询所在的 HEAD 部分），这显然以某种方式分解了 CSS 语法，使 Gmail 部分解释了 @media 查询中包含的 css 类。如果这是你的情况，你可以做两件事：

  1. 不要缩小 HEAD 部分（我所做的）。保持不变并将您的媒体查询放在那里。

  2. 尝试不同的缩小器并检查缩小的媒体查询以确保没有损坏。

在任何情况下，如果您正在创建电子邮件通讯，请确保尽可能多地内联 CSS 样式，即：使用“style”属性直接将样式添加到标签中，而不是使用 CSS 类。

于 2013-10-11T12:06:18.910 回答