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

本文介绍了响应式电子邮件模板中的媒体查询的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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 )

这篇关于响应式电子邮件模板中的媒体查询的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！