我需要构建一个响应式电子邮件模板。我做了我的研究,并了解到电子邮件客户端并未广泛支持媒体查询。
因此,我尝试不使用媒体查询并使用<style></style>
堆叠列。
但如果我想更改移动版的字体大小怎么办?此外,我还有一个案例,客户希望在移动设备上看到几个块,而不是在桌面上。如何在没有媒体查询的情况下实现这些目标?
另外,在我添加样式规则和媒体查询的情况下,我猜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>
中定义的其他规则工作正常。
模板看起来有点像这样:
font-size
上面的模板将常规规则添加到内联元素,但在我的情况下删除了媒体查询。我读了一篇文章,说邮件客户端删除样式标记并将其添加到内联元素。我想因为媒体查询不能被内联定义,所以它们被忽略了。
所以,我的问题再次出现:
如何在不使用媒体查询的情况下更改自适应电子邮件模板中的color
或style
等?
如何以正确的方式添加媒体查询?(对于我在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();
}
标记中添加它们不起作用)
答案 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">