响应式电子邮件模板中的媒体查询 [英] Media query in responsive email template
问题描述
我需要构建一个响应式电子邮件模板.我进行了研究，了解到电子邮件客户端并未广泛支持媒体查询.
I need to build a responsive email template. I did my research and learnt that media queries are not widely supported by the email clients.
因此，我尝试不使用媒体查询，而是使用display: inline-block; max-width:290px;堆叠列.
So, I tried not to use media query and stacked the columns using display: inline-block; max-width:290px;.
-
但是，如果我想更改移动版本的字体大小该怎么办?另外，我有一种情况，客户希望在移动设备上看到很少的块，而在桌面上看不到.没有媒体查询如何实现这些目标?
But what if I want to change the font size for mobile version? Also I have a case where client wants few blocks to be visible in mobile but not on desktop. How can I achieve these without media query?
另外，就我而言，当我添加样式规则和媒体查询时，我猜想iOS支持媒体查询.但是没有出现媒体查询下的规则，但是<style></style>中定义的其他规则很好用.
Also, in my case when I add style rules and media queries, I guess iOS supports media queries. But rues under media queries are not appearing but the other rules defines in <style></style> works just fine.
模板看起来像这样:
<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>
上面的模板向内联元素添加了常规规则，但就我而言，删除了媒体查询.我读了一篇文章，说邮件客户端删除了样式标签并将其添加到内联元素中.而且我猜想，由于无法内联定义媒体查询，因此它们会被忽略.
The above template adds the normal rules to inline elements but removes the media queries in my case. I read an article that says that mail clients remove style tags and add it to inline elements. And I guess since media queries can't be defined inline they are being ignored.
所以，我的问题再次是:
So, again my questions are:
-
如何在不使用媒体查询的情况下更改响应电子邮件模板中的
font-size或color等?
如何以正确的方式添加媒体查询?(对我来说，在style标签中添加媒体查询不起作用)
how to add media queries the right way?(For me adding them in style tag is not working)
推荐答案
1认为只能使用媒体查询来完成.
一些流行的移动邮件客户端支持媒体查询，因此我认为这是值得的.
1 Think it can be done only using media query.
Some popular mobile mail clients support media query, so in my opinion it's worth.
2希望这段代码可以为您提供帮助
2 Hope this code can help you
@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 或其他免费模板( 这个看起来真的很好看)
If you lookin for responsive email example with multiple columns please take a look at litmus or other free templates ( this one looks really good as example )
这篇关于响应式电子邮件模板中的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
