如何在MJML编写的HTML邮件中隐藏移动端的mj-column？

是可以实现的，但需要调整CSS样式以适配邮件客户端的兼容性限制。你当前的写法仅使用display: none，这在部分邮件客户端中可能无法生效——MJML生成的邮件HTML会将<mj-column>转换为表格元素，需要更针对性的隐藏规则。

修改后的代码 #

<mjml>
  <mj-head>
    <mj-style>
      @media (max-width:480px) {
        .hidden {
          display: none !important;
          max-height: 0px !important;
          overflow: hidden !important;
          width: 0px !important;
          height: 0px !important;
          line-height: 0px !important;
          mso-hide: all;
        }
      }
      @media (max-width:480px) {
        .mobile {
          text-align: right !important;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>
    <mj-container>
      <mj-section background-color="#eee">
        <mj-column>
          <mj-text>
            <p class="mobile">Title align right on mobile</p>
          </mj-text>
        </mj-column>
        <mj-column css-class="hidden">
            <mj-social font-size="15px" icon-size="30px" mode="horizontal">
              <mj-social-element name="facebook" href="https://mjml.io/">
                Facebook
              </mj-social-element>
              <mj-social-element name="google" href="https://mjml.io/">
                Google
              </mj-social-element>
              <mj-social-element  name="twitter" href="https://mjml.io/">
                Twitter
              </mj-social-element>
            </mj-social>
        </mj-column>
      </mj-section>
    </mj-container>
  </mj-body>
</mjml>

关键调整说明 #

• 追加!important强制覆盖MJML默认的内联样式，因为邮件客户端优先解析内联CSS规则。
• 叠加max-height:0、overflow:hidden、width:0、height:0、line-height:0等属性，确保在不支持display:none的客户端中也能彻底隐藏元素。
• 加入mso-hide: all专门适配Outlook客户端，避免元素在Outlook系列产品中仍显示。

额外注意事项 #

邮件HTML的渲染逻辑和浏览器差异极大，很多在在线编辑器中生效的规则，在实际邮件客户端（尤其是Outlook、Gmail等）中可能失效。建议修改后发送测试邮件到主流客户端进行验证，确保效果符合预期。

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