HTML/CSS邮件模板在Polymail与Thunderbird中不响应的修复咨询

问题背景 #

开发的HTML/CSS邮件模板在浏览器及多数桌面、移动邮件客户端中可正常响应，但Polymail和Thunderbird客户端无法实现响应式效果，已排除图片尺寸问题。

针对性解决建议 #

1. 修复Thunderbird的媒体查询兼容性 #

Thunderbird对媒体查询的支持存在局限性，需调整查询规则并避免不兼容单位：

• 扩展媒体查询条件，同时包含max-device-width和max-width，确保适配不同设备检测逻辑：

  @media only screen and (max-device-width: 667px), only screen and (max-width: 667px) {
      /* 原有响应式规则 */
  }
  

• 移除vw单位，改用百分比替代。将媒体查询中width: 100vw !important改为width: 100% !important，Thunderbird对视窗单位支持不佳。

2. 增强Polymail的样式优先级 #

Polymail会忽略部分外部样式中的媒体查询规则，需补充内联样式作为回退：

• 给核心容器（如主表格）添加内联基础宽度样式，例如：

  <table class="em_main_table" width="600" cellpadding="0" cellspacing="0" border="0">
      <!-- 内容 -->
  </table>
  

• 媒体查询中保留width: 100% !important规则，确保小屏设备下覆盖内联样式。

3. 替换非邮件兼容的CSS布局 #

模板中使用的display: flex在Thunderbird等客户端支持度极低，改用表格布局替代：

• 将原Flex容器：

  <div class="source_message_text_wrapper">
      <div class="source_message_text">来源信息</div>
  </div>
  

  替换为表格布局：

  <table class="source_message_text_wrapper" cellpadding="0" cellspacing="0" border="0" width="100%">
      <tr>
          <td align="left">
              <div class="source_message_text">来源信息</div>
          </td>
      </tr>
  </table>
  

• 同步调整对应CSS，移除Flex相关属性：

  .source_message_text_wrapper {
      width: 100%;
  }
  

4. 优化CSS特性兼容性 #

• 移除:root选择器中的颜色方案声明，Thunderbird对该选择器支持有限，将颜色规则移至body或直接在暗色模式媒体查询中重复定义。
• 确保所有响应式规则都添加!important，避免被客户端默认样式覆盖。

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