logo标签列表

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

cssemailmedia-querieshtml-emailemail-templates
7
我需要制作一个响应式的电子邮件模板。我进行了调查并了解到，媒体查询并不被广泛支持电子邮件客户端。
所以，我试着不使用媒体查询，在HTML标签中利用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>

上述模板将普通规则添加到行内元素，但在我的情况下删除了媒体查询。我读过一篇文章，说电子邮件客户端会删除样式标签，并将其添加到行内元素中。我猜想由于无法在行内定义媒体查询，所以它们被忽略了。

因此，我的问题是：

  1. 如何在响应式电子邮件模板中更改font-size或color等内容，而不使用媒体查询？

  2. 如何正确添加媒体查询？（对我来说，在style标签中添加它们不起作用）

6
电子邮件的CSS应该全部是内联的<table style="font-size: 12px">，只有您的媒体查询应该保留在<style>标签中，并在每个样式后面加上!important。您需要强制电子邮件客户端尊重媒体查询。 - Aaron
我在媒体查询中遵循了所有规则，将所有规则移动到内联中，并仅在style标签中保留媒体查询。但是媒体查询没有被应用。 - Mark Wilson
1
在2016年，电子邮件的布局仍然是一个让人头疼的问题。天哪，这似乎永远不会改变！ - Marcos Pérez Gude
你是否在<head>中包含了视口元标记？ <meta name="viewport" content="width=device-width, initial-scale=1"> - Aaron
是的，您可以看到我的问题。我几分钟前更新了它，以展示我如何包含它。 - Mark Wilson
媒体查询中的 !important 在这里非常重要。谢谢。 - 0xh8h
1个回答
4

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

2 希望这段代码能对你有所帮助。

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

}

此外，也许可以使用一些文档类型。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果您正在寻找具有多列的响应式电子邮件示例，请查看Litmus或其他免费模板（这个看起来非常不错）。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接