Question

我正在使用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;
        } 
    }

Answer 1

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

Answer 2

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

不要缩小HEAD部分（我做了什么）。保持不变，并将媒体查询放在那里。
尝试使用不同的缩放器并完成缩小的媒体查询以确保没有任何内容被破坏。

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

@media打破Gmail CSS

2 个答案: