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

时间:2016-10-31 10:44:15

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

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

因此,我尝试不使用媒体查询并使用<style></style>堆叠列。

  1. 但如果我想更改移动版的字体大小怎么办?此外,我还有一个案例,客户希望在移动设备上看到几个块,而不是在桌面上。如何在没有媒体查询的情况下实现这些目标?

  2. 另外,在我添加样式规则和媒体查询的情况下,我猜iOS支持媒体查询。但是媒体查询下的网络没有出现,但<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> 中定义的其他规则工作正常。

  3. 模板看起来有点像这样:

    font-size

    上面的模板将常规规则添加到内联元素,但在我的情况下删除了媒体查询。我读了一篇文章,说邮件客户端删除样式标记并将其添加到内联元素。我想因为媒体查询不能被内联定义,所以它们被忽略了。

    所以,我的问题再次出现:

    1. 如何在不使用媒体查询的情况下更改自适应电子邮件模板中的colorstyle等?

    2. 如何以正确的方式添加媒体查询?(对于我在String SVOICE_PACKAGE_NAME = "com.vlingo.midas"; String SVOICE_LISTEN_ACTION = "com.sec.action.SVOICE"; Intent intent = new Intent(); intent.setPackage(SVOICE_PACKAGE_NAME); intent.setAction(SVOICE_LISTEN_ACTION); intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK | Intent.FLAG_ACTIVITY_CLEAR_TOP); try { getApplication().startActivity(intent); } catch (final ActivityNotFoundException e) { e.printStackTrace(); } catch (final Exception e) { e.printStackTrace(); } 标记中添加它们不起作用)

1 个答案:

答案 0 :(得分:2)

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一个看起来非常好的例子)