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

2024年1月11日 265次阅读

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

所以,我尝试不使用媒体查询并使用display：inline-block堆叠列;最大宽度：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>

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

所以,我的问题再次是：

>如何在不使用媒体查询的情况下更改响应式电子邮件模板中的字体大小或颜色等？
>如何以正确的方式添加媒体查询？(对我来说,在样式标签中添加它们不起作用)

最佳答案 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一个看起来非常好作为示例)

点赞