求助：MJML双栏布局在移动端无法堆叠的问题

使用mjml.io在线编辑器制作的基础双栏邮件布局无法实现移动端堆叠效果，在桌面端（PC版Outlook 365）和移动端（iPhone 13的iOS版Outlook）显示完全一致，两栏始终并排，仅整体缩放缩小。

原MJML代码 #

<mjml>
    <mj-head>
        <mj-attributes>
            <mj-all font-family="Calibri, Helvetica, Arial, sans-serif" />
            <mj-all font-size="16px" />
        </mj-attributes>
    </mj-head>
    <mj-body>
        <mj-section padding="0" background-color="#eeeeee">      
            <mj-column width="30%" padding="0" background-color="#ccffcc"><mj-text padding="10px">green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block</mj-text>
            </mj-column>
            <mj-column width="70%" padding="0" background-color="#ffcccc"><mj-text padding="10px">pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block </mj-text>
            </mj-column>
        </mj-section>       
    </mj-body>
</mjml>

问题根源 #

当前代码未明确为<mj-section>指定移动端堆叠规则，同时生成的CSS仅定义了桌面端（min-width:480px）的列宽度比例，缺少移动端下让列宽度变为100%的媒体查询逻辑，导致小屏幕设备上两栏仍维持并排比例。

修复方案 #

1. 为<mj-section>添加堆叠属性 #

在<mj-section>标签中加入stack="mobile"属性，强制触发移动端堆叠效果：

<mjml>
    <mj-head>
        <mj-attributes>
            <mj-all font-family="Calibri, Helvetica, Arial, sans-serif" />
            <mj-all font-size="16px" />
        </mj-attributes>
    </mj-head>
    <mj-body>
        <!-- 明确指定移动端堆叠 -->
        <mj-section padding="0" background-color="#eeeeee" stack="mobile">      
            <mj-column width="30%" padding="0" background-color="#ccffcc">
                <mj-text padding="10px">green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block green block</mj-text>
            </mj-column>
            <mj-column width="70%" padding="0" background-color="#ffcccc">
                <mj-text padding="10px">pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block pink block </mj-text>
            </mj-column>
        </mj-section>       
    </mj-body>
</mjml>

2. 手动补充移动端CSS规则（可选） #

若生成的HTML仍存在问题，可在<style>中添加以下媒体查询，确保屏幕宽度小于480px时列占满宽度：

@media only screen and (max-width:479px) {
  .mj-column-per-30,
  .mj-column-per-70 {
    width: 100% !important;
    max-width: 100%;
    display: block !important;
  }
}

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