HTML邮件开发：移动端与桌面端字体大小适配及MSO兼容问题

MSO（Outlook桌面端的渲染引擎）本身不支持CSS媒体查询，这就是你在Litmus中看到设置不生效的核心原因。以下是两种经过验证的适配方案：

方案1：条件注释+内联样式+媒体查询 #

利用Outlook仅识别条件注释的特性，单独为桌面端指定字体大小，移动端通过媒体查询覆盖：

<!--[if mso]>
<style>
  .email-content {
    font-size: 16px !important;
  }
</style>
<![endif]-->

<style>
  /* 移动端适配规则 */
  @media only screen and (max-width: 600px) {
    .email-content {
      font-size: 14px !important;
    }
  }
</style>

<p class="email-content" style="font-size: 16px;">需要适配的邮件文本内容</p>

• 条件注释内的样式仅被MSO识别，用于设置桌面端字体大小
• 内联样式作为全局 fallback，确保非MSO客户端默认显示桌面端尺寸
• 媒体查询针对移动端覆盖样式，除MSO外的所有客户端（包括移动端Outlook）均会生效

方案2：MSO专属CSS hack+媒体查询 #

若不想使用条件注释，可直接用MSO专属属性指定桌面端大小：

<style>
  .email-content {
    /* MSO专属属性，仅Outlook桌面版识别，需用pt单位 */
    mso-font-size: 16pt;
    /* 其他客户端默认字体大小 */
    font-size: 16px;
  }

  @media only screen and (max-width: 600px) {
    .email-content {
      font-size: 14px !important;
    }
  }
</style>

<p class="email-content">需要适配的邮件文本内容</p>

• mso-font-size是MSO私有属性，仅对Outlook桌面版生效，注意必须使用pt作为单位（MSO对px支持不佳）
• 媒体查询规则会在移动端覆盖默认值，MSO因不支持媒体查询，将保留mso-font-size的设置

关键注意事项 #

• 绝对不要依赖媒体查询为MSO设置样式，它完全不支持这类规则
• 针对MSO的样式要么用条件注释隔离，要么使用专属hack属性
• 在Litmus测试时，重点验证Outlook 2016/2019/365等桌面版本的渲染效果

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