当前位置: 首页 > 知识库问答 >
问题:

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

乔宏峻
2023-03-14

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

因此,我尝试不使用媒体查询,并使用display:inline-block堆叠列;最大宽度:290px;

>

  • 但是如果我想更改移动版本的字体大小怎么办?另外,我有一个案例,客户端希望很少的块是可见的,在移动,但不是在桌面。没有媒体查询,我如何实现这些?

    另外,在我添加样式规则和媒体查询的情况下,我猜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>
    

    上面的模板将普通规则添加到内联元素中,但在我的例子中删除了媒体查询。我读过一篇文章,说邮件客户机删除样式标记并将其添加到内联元素中。我想,由于媒体查询不能内联定义,所以它们被忽略了。

    因此,我的问题是:

    >

  • 如何在不使用媒体查询的情况下更改响应式电子邮件模板中的字体大小颜色等?

    如何以正确的方式添加媒体查询?(对我来说,在样式标记中添加它们不起作用)

  • 共有1个答案

    西门嘉澍
    2023-03-14

    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">
    

    如果您寻找多列响应电子邮件示例,请看看石蕊或其他免费模板(这一个看起来真的很好作为示例)

     类似资料:
    • 我创建了带有媒体查询的响应式HTML电子邮件,但在Gmail/Outlook/Inbox中,媒体查询中的max-width指的是浏览器视口,而不是HTML电子邮件。 所以,在本地主机上,我的邮件切换到700px以下的移动显示,在Gmail/Outlook/Inbox中,这种行为被打破了。 您是否有一个解决方案,使媒体查询视口作为邮件视口,而不是浏览器视口?

    • 我们有一份时事通讯,它使用媒体查询,以一种响应式的格式显示出来,适用于较小的屏幕。它在Outlook中按应显示的方式显示,但在转发电子邮件时,Outlook似乎正在删除媒体查询代码。我们正在使用Outlook发送电子邮件,因为我们需要包含exchange列表。有没有人知道Outlook在转发时删除媒体查询代码的方法,或者通过Outlook发送带有媒体查询的电子邮件的另一种方法?

    • 我正在开发一个应用程序,它在iframe中使用DocuSign签名,该应用程序位于一个专有的web应用程序中。签名者可以在同一个web应用程序中访问嵌入的iframe签名视图。 编辑:已解决 正如在答案的注释中提到的,通过根据收件人的值正确设置每个模板角色的ClientUserId,这个问题得到了解决。这允许使用模板角色签名者进行嵌入签名。

    • 媒体(media)查询在 CSS3 上有介绍: 添加断点 在先前的教程中我们使用行和列来制作网页,它是响应式的,但在小屏幕上并不能友好的展示。 媒体查询可以帮我们解决这个问题。我们可以在设计稿的中间添加断点,不同的断点有不同的效果。 桌面设备 手机设备 使用媒体查询在 768px 添加断点: 实例 当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:/* For desktop:

    • 我有一个spring mvc应用程序,我试图将日期LocalDate呈现为字符串,对于普通视图,它可以工作,但对于电子邮件,它不工作,并抛出以下错误: 原因:org.springframework.core.convert.converterNotFoundException:找不到能够从[java.time.localdate]类型转换为[java.lang.string]类型的转换器 代码:

    • 发送电子邮件时,页脚中有下面的标准消息。 此电子邮件是使用CakePHP框架发送的,http://cakephp.org. 它似乎使用了这个: 我的控制器里有这个。 创建了以下视图: /应用程序/查看/电子邮件/文本/梦想。ctp /应用程序/视图/布局/电子邮件/文本/梦想。ctp 是否有任何其他设置我错过了cakephp使用我的布局? *注:如果我重新命名我的梦想。ctp默认。ctp它使用那个