如何让@media在HTML邮件的内联CSS中生效？

我需要制作可在HTML邮件中运行的HTML文件，因此使用了内联CSS，但仍需实现根据设备（移动端/桌面端）动态调整样式。

尝试的代码如下：

<html lang="en">
<style>
  @media (min-width: 1024px) {
    .separate {
      width: 50%;
    }
  }
</style>
  <body>
    <div 
      class="separate-container" 
      style="display: flex; justify-content: center; align-items: center;"
    >
      <div 
        class="separate" 
        style="width: 96%; height: 1px; background-color: #757575; opacity: 20%;}"
      >
      </div>
    </div>
  </body>
</html>

我希望<div class="separate" />在移动端宽度为96%，桌面端为50%，但实际效果中该元素宽度始终为96%。请问使用内联CSS时能否实现这种动态样式变化？

问题原因 #

内联CSS的优先级高于媒体查询中的类选择器，所以媒体查询里设置的width:50%会被内联的width:96%覆盖，导致桌面端样式不生效。另外你代码里内联样式末尾多了个多余的}，需要先删掉这个语法错误。

解决方案 #

方案1：将基础样式移到类选择器中（推荐）

把移动端的默认样式放到类选择器里，媒体查询的样式就能正常覆盖它，同时避免内联样式的优先级冲突：

<html lang="en">
<style>
  .separate {
    width: 96%; /* 移动端默认宽度 */
    height: 1px;
    background-color: #757575;
    opacity: 20%;
  }
  @media (min-width: 1024px) {
    .separate {
      width: 50%; /* 桌面端覆盖宽度 */
    }
  }
</style>
  <body>
    <div 
      class="separate-container" 
      style="display: flex; justify-content: center; align-items: center;"
    >
      <div class="separate"></div>
    </div>
  </body>
</html>

方案2：用!important强制覆盖内联样式（应急用）

如果必须保留内联样式（某些邮件客户端要求），可以在媒体查询的样式里添加!important来强制覆盖内联的宽度设置，但不推荐大量使用，会增加样式维护难度：

<html lang="en">
<style>
  @media (min-width: 1024px) {
    .separate {
      width: 50% !important;
    }
  }
</style>
  <body>
    <div 
      class="separate-container" 
      style="display: flex; justify-content: center; align-items: center;"
    >
      <div 
        class="separate" 
        style="width: 96%; height: 1px; background-color: #757575; opacity: 20%;"
      >
      </div>
    </div>
  </body>
</html>

额外提示（HTML邮件兼容性） #

注意很多邮件客户端（比如Outlook桌面版）对CSS媒体查询的支持很差，甚至完全不支持。如果要兼容这类客户端，建议采用传统的表格布局方案，或者使用条件注释针对特定客户端设置样式，确保在所有主流邮件客户端中都能正常显示。

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