@media 破坏 Gmail CSS答案

【问题标题】：@media Breaks Gmail CSS@media 破坏 Gmail CSS
【发布时间】：2012-07-26 14:34:23
【问题描述】：

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

【问题讨论】：

标签： html email gmail mailchimp

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

不要缩小 HEAD 部分（我所做的）。保持不变，将您的媒体查询放在那里。
尝试不同的缩小器并检查缩小后的媒体查询以确保没有损坏。

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

【讨论】：