Gmail网页版(mail.google.com)HTML邮件响应式适配问题咨询

Gmail网页版部分支持响应式HTML邮件，但对CSS的处理有严格限制，你的方案失效是因为没符合它的渲染规则，具体原因和解决方法如下：

核心限制与问题原因 #

1. Gmail网页版仅识别<head>标签内<style>中的媒体查询，且会过滤掉不够具体的选择器，同时对表格元素的display属性渲染有特殊逻辑。
2. 你直接使用.web、.mobile类选择器，加上仅用display属性控制显示隐藏，在Gmail网页版里无法生效，甚至可能被过滤掉相关样式规则。

修正方案 #

1. 调整HTML结构（确保表格元素完整） #

<tr class="web-row">
  <td>web stuff here</td>
</tr>
<tr class="mobile-row">
  <td>mobile stuff here</td>
</tr>

2. 优化CSS规则（必须放在<head>内） #

/* 桌面端默认隐藏移动端内容 */
tr.mobile-row {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

/* 移动端媒体查询规则 */
@media only screen and (max-width: 475px) {
  tr.web-row {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }
  tr.mobile-row {
    display: table-row !important;
    visibility: visible !important;
    height: auto !important;
    font-size: inherit !important;
    line-height: inherit !important;
  }
}

关键注意事项 #

• 所有样式必须放在<head>标签内，不能用内嵌style属性或外部CSS文件。
• 必须添加!important强制覆盖Gmail的默认样式优先级。
• 针对<tr>这类表格元素，仅用display: none无法完全隐藏，需要配合visibility、height、font-size等属性，确保在邮件客户端中彻底隐藏。

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