Mar*_*son 5 css email html-email email-templates media-queries
我需要构建一个响应式电子邮件模板。我进行了研究，得知电子邮件客户端并未广泛支持媒体查询。
因此，我尝试不使用媒体查询，而是使用来堆积列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标签中添加媒体查询不起作用）
小智 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">
如果您正在寻找具有多列的响应式电子邮件示例，请查看石蕊或其他免费模板（这个看起来非常好的示例）