无需media-query实现响应式邮件移动端元素堆叠方案咨询

适配解决方案 #

针对Gmail IMAP不支持media query的场景，使用*流体混合（Fluid Hybrid）*布局方案即可实现无media query的自适应效果：桌面端保持双列并排布局，移动端空间不足时列会自动堆叠，和你现有下方的堆叠元素样式完全统一。 #

实现核心逻辑 #

• 列容器设置width: 100%、max-width: 280px（可根据实际布局调整数值）、display: inline-block、vertical-align: top，桌面端受max-width限制固定宽度并排，移动端宽度不足时自动换行堆叠
• 对不支持inline-block的Outlook桌面端，用MSO条件注释加幽灵空列做宽度限制，不影响Gmail等其他客户端渲染

修改后的核心代码替换 #

你只需要把原代码里.hide-for-small对应的多列表格，替换为下面的实现即可：

<!-- 替换原有hide-for-small区域的多列表格 -->
<table cellpadding="0" cellspacing="0" width="100%" style="border-collapse: collapse; margin-top: 40px">
  <!-- 第一行双列内容 -->
  <tr>
    <td>
      <!--[if mso]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
      <td width="50%" valign="top">
      <![endif]-->
      <div style="width:100%; max-width: 280px; display: inline-block; vertical-align: top; margin-bottom: 30px;">
        <table cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td style="vertical-align: middle; width: 54px;">
              <img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
            </td>
            <td>
              <span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
                text
              </span>
              <span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;">
                text
              </span>
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]>
      </td><td width="50%" valign="top">
      <![endif]-->
      <div style="width:100%; max-width: 280px; display: inline-block; vertical-align: top; margin-bottom: 30px;">
        <table cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td style="vertical-align: middle; width: 54px;">
              <img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
            </td>
            <td>
              <span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
                text
              </span>
              <span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;">
                text
              </span>
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
  <!-- 第二行双列内容，和上面结构一致即可 -->
  <tr>
    <td>
      <!--[if mso]>
      <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="100%">
      <tr>
      <td width="50%" valign="top">
      <![endif]-->
      <div style="width:100%; max-width: 280px; display: inline-block; vertical-align: top; margin-bottom: 30px;">
        <table cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td style="vertical-align: middle; width: 54px;">
              <img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
            </td>
            <td>
              <span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
                text
              </span>
              <span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;">
                text
              </span>
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]>
      </td><td width="50%" valign="top">
      <![endif]-->
      <div style="width:100%; max-width: 280px; display: inline-block; vertical-align: top; margin-bottom: 30px;">
        <table cellpadding="0" cellspacing="0" width="100%">
          <tr>
            <td style="vertical-align: middle; width: 54px;">
              <img src="https://w7.pngwing.com/pngs/178/595/png-transparent-user-profile-computer-icons-login-user-avatars.png" width="25px" height="auto" style="width: 25px !important" />
            </td>
            <td>
              <span style="display: block; font-size: 11px; color: #AFC2CE; font-family: 'Open Sans', Arial, sans-serif; font-weight: 600; letter-spacing: 0.77px; text-transform: uppercase; margin-bottom: 7px;">
                text
              </span>
              <span style="display: block; font-size:14px; color: #003A60; font-family: 'Open Sans', Arial, sans-serif; word-break: break-all;">
                text
              </span>
            </td>
          </tr>
        </table>
      </div>
      <!--[if mso]>
      </td>
      </tr>
      </table>
      <![endif]-->
    </td>
  </tr>
</table>

额外注意点 #

• 你可以根据桌面端容器宽度调整max-width的数值，保证两列加起来不超过外层容器宽度即可
• 原有的.hide-for-small和.hide-for-large的显示隐藏逻辑可以直接去掉，不需要维护两套布局
• 所有样式全部内联，完全兼容Gmail IMAP的样式过滤规则

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