响应式电子邮件模板中的媒体查询答案

【问题标题】：Media query in responsive email template响应式电子邮件模板中的媒体查询
【发布时间】：2017-03-13 10:36:57
【问题描述】：

我需要构建一个响应式电子邮件模板。我进行了研究并了解到电子邮件客户端并未广泛支持媒体查询。

所以，我尝试不使用媒体查询并使用display: inline-block; max-width:290px; 堆叠列。

但是如果我想更改移动版的字体大小怎么办？此外，我还有一个案例，客户希望在移动设备上看到几个块，但在桌面上看不到。在没有媒体查询的情况下如何实现这些？
另外，在我添加样式规则和媒体查询的情况下，我猜 iOS 支持媒体查询。但是媒体查询下的规则没有出现，但<style></style> 中定义的其他规则工作正常。

模板看起来有点像这样：

<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style type="text/css">
   table {
       font-size: 24px;
   }
   #tdtoshowinmobile {
       display: none;
   }
   @media only screen and max-device-width(767px){
       table {
           font-size: 32px !important;
       }
       #tdtoshowinmobile {
           display: block !important;
       }
   }
</style>
</head>

<body>


    <table>
        ...tr...td....
    </table>
</body>

上面的模板将正常规则添加到内联元素，但在我的例子中删除了媒体查询。我读过一篇文章说邮件客户端删除样式标签并将其添加到内联元素中。而且我猜由于媒体查询无法内联定义，因此它们将被忽略。

所以，我的问题再次是：

如何在不使用媒体查询的情况下更改响应式电子邮件模板中的font-size 或color 等？
如何以正确的方式添加媒体查询？（对我来说，在style 标签中添加它们不起作用）

【问题讨论】：

电子邮件的 CSS 都应该是内联的 <table style="font-size: 12px"> 只有你的媒体查询应该保留在你的 <style> 标签中，每个样式后面都有 !important。您需要强制电子邮件客户端尊重媒体查询。
我对媒体查询的所有规则都很重要。正如你所说，我现在将所有规则移至内联，同时仅将媒体查询保留在 style 标记内。但未应用媒体查询。
在 2016 年，电子邮件布局仍然令人头疼。天哪，这似乎不再改变了！
您是否已将视口元数据包含到您的<head> 中？ <meta name="viewport" content="width=device-width, initial-scale=1">
是的，你可以看到我的问题。我在几分钟前更新了它以显示我是如何包含它的

标签： css email media-queries html-email email-templates

【解决方案1】：

1 认为只能使用媒体查询来完成。
一些流行的移动邮件客户端支持媒体查询，所以在我看来是值得的。

2 希望这段代码可以帮助到你

@media screen and (max-device-width: 767px),
screen and (max-width: 767px)     {

}

另外，也许使用一些doctype

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

如果您正在寻找具有多列的响应式电子邮件示例，请查看litmus 或其他免费模板（this 一个看起来非常好的示例）

【讨论】：