Odoo V12批量邮件自定义代码段Media Query失效，如何实现响应式通讯稿？

核心问题分析 #

你的媒体查询未生效，主要是两个原因：

1. 邮件客户端普遍不支持外部CSS文件加载，你引用的custom.css无法被邮件解析
2. Flex布局在部分老旧邮件客户端（如Outlook）中兼容性极差，即使样式加载也可能无法正常渲染

解决方案 #

方案1：将样式内嵌到邮件模板（适配现代邮件客户端）

修改你的snippets_themes.xml，把CSS样式直接嵌入到代码段模板的<style>标签中，确保邮件能正确读取样式及媒体查询：

<?xml version="1.0"?>
<odoo>
    <data>
        <template id="s_mail_block_test" name="Test">
            <style>
                * {
                  box-sizing: border-box;
                }

                .flex-container {
                  display: flex;
                  flex-wrap: wrap;
                  font-size: 30px;
                  text-align: center;
                }

                .flex-item-left {
                  background-color: #f1f1f1;
                  padding: 10px;
                  flex: 50%;
                  width: 270px;
                  text-align: center;
                  vertical-align: middle;
                }

                .flex-item-right {
                  background-color: dodgerblue;
                  padding: 10px;
                  flex: 50%;
                }

                /* 响应式规则，添加!important确保优先级 */
                @media (max-width: 375px) {
                  .flex-item-right, .flex-item-left {
                    flex: 100% !important;
                    width: 100% !important;
                  }
                }
            </style>
            <div class="flex-container">
                <div class="flex-item-left">1</div>
                <div class="flex-item-right">2</div>
                <div class="flex-item-left">3</div>
            </div>
        </template>

        <template id="email_designer_snippets_test" inherit_id="mass_mailing.email_designer_snippets">
            <xpath expr="//div[@id='email_designer_default_body']/div[hasclass('o_panel_body')]" position="inside">
                <t t-snippet="mass_mailing_snippet_test.s_mail_block_test" t-thumbnail="/mass_mailing_snippet_test/static/src/img/blocks/block_text_image.png"/>
            </xpath>
        </template>
    </data>
</odoo>

方案2：使用表格布局（全邮件客户端兼容）

如果需要兼容Outlook等老旧客户端，建议放弃Flex，改用邮件领域通用的表格布局配合媒体查询：

<?xml version="1.0"?>
<odoo>
    <data>
        <template id="s_mail_block_test" name="Test">
            <style>
                .responsive-table {
                    width: 100%;
                    border-collapse: collapse;
                }
                .table-item {
                    width: 50%;
                    padding: 10px;
                    font-size: 30px;
                    text-align: center;
                }
                .left-item {
                    background-color: #f1f1f1;
                }
                .right-item {
                    background-color: dodgerblue;
                }

                /* 小屏幕下将表格单元格转为块级元素，实现单列布局 */
                @media (max-width: 375px) {
                    .table-item {
                        width: 100% !important;
                        display: block !important;
                    }
                }
            </style>
            <table class="responsive-table">
                <tr>
                    <td class="table-item left-item">1</td>
                    <td class="table-item right-item">2</td>
                </tr>
                <tr>
                    <td class="table-item left-item">3</td>
                    <td class="table-item right-item"></td>
                </tr>
            </table>
        </template>

        <template id="email_designer_snippets_test" inherit_id="mass_mailing.email_designer_snippets">
            <xpath expr="//div[@id='email_designer_default_body']/div[hasclass('o_panel_body')]" position="inside">
                <t t-snippet="mass_mailing_snippet_test.s_mail_block_test" t-thumbnail="/mass_mailing_snippet_test/static/src/img/blocks/block_text_image.png"/>
            </xpath>
        </template>
    </data>
</odoo>

验证步骤 #

1. 升级模块后，在邮件编辑器中插入自定义代码段
2. 发送测试邮件到自己的邮箱，查看邮件源码确认<style>标签及媒体查询是否存在
3. 在手机端或浏览器开发者工具的移动端模式下预览效果

内容的提问来源于stack exchange，提问作者vancouverde