Gmail移除container-type属性，如何实现网页端邮件广告响应式？

Gmail会过滤掉它不支持的CSS属性，container-type属于CSS容器查询的新特性，不在Gmail的兼容范围内，所以直接使用这个属性行不通，以下是几个可行的替代方案：

• 改用传统视口媒体查询
  放弃容器查询，回归邮件客户端通用的响应式方案：基于视口宽度的媒体查询。比如针对移动端调整样式时，使用：

  @media screen and (max-width: 600px) {
    /* 移动端样式调整，比如图片宽度100%，文字换行等 */
    .email-image { width: 100% !important; }
    .email-text { font-size: 16px !important; }
  }
  

  这种方式是目前邮件客户端支持最广泛的响应式实现方式。

• 内联关键样式+表格布局兜底
  邮件客户端对<table>的支持远优于<div>，尤其是Gmail。可以用嵌套表格来构建响应式结构，同时把关键样式直接内联到元素上（Gmail对inline style的支持度远高于外部类样式）：

  <table class="ts-email-wrapper" width="100%" cellpadding="0" cellspacing="0" style="margin: auto; max-width: 800px;">
    <tr>
      <td>
        <!-- 邮件内容，比如图片、文字等 -->
        <img src="your-image-url" style="width: 100%; max-width: 600px;" alt="广告图">
      </td>
    </tr>
  </table>
  

  结合媒体查询调整表格或内部元素的样式，能最大程度兼容Gmail。

• 避免依赖容器查询特性
  目前几乎所有主流邮件客户端（包括Gmail、Outlook等）都不支持CSS容器查询，所以在邮件广告中不要依赖这类新特性，优先使用经过验证的、兼容广泛的CSS语法和布局方式。

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