响应式邮件模板必须依赖表格嵌套、条件性堆叠和内联样式，因Outlook桌面版、Gmail App等主流客户端基本忽略@media和Flexbox；CSS需全部内联，布局靠HTML结构而非媒体查询实现适配。
别指望用 @media 或 flex 做出能发出去就正常的响应式邮件模板——90% 的客户端（Outlook 桌面版、Gmail App、QQ 邮箱）会直接忽略这些，甚至把整段 HTML 渲染错乱。真正能跑通的“响应式”，靠的是表格嵌套 + 条件性堆叠 + 内联样式三件套。
为什么 @media 在邮件里基本等于摆设
Outlook 桌面版用 MS Word 渲染引擎，根本不认 @media；Gmail 会整块剥离 <style></style> 标签；Apple Mail 虽支持部分媒体查询，但只在 iOS 客户端生效，Web 版照样不认。你写的：
<style>
@media screen and (max-width: 480px) {
.col { width: 100% !important; }
}
</style>在大多数收件箱里，这行 CSS 就是空气。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对 Apple Mail 和部分 Android 客户端（如 Samsung Email）保留极简的
@media，且必须用!important+ 宽度重写 - 所有关键布局逻辑必须由 HTML 结构承担，不能依赖 CSS 切换
- 永远在 Litmus 或 Email on Acid 上实测，别信本地浏览器预览
用 <table> 实现“伪响应式”堆叠
真正的移动端适配不是缩放表格，而是把横向多列结构，在小屏上转成垂直卡片。核心是两层嵌套：<table class="desktop"> 用于桌面，<table class="mobile"> 用于手机，再用条件注释或 display: none/block 控制显隐。
常见错误现象：
- 只写一个
<table>加width="100%"，结果 Outlook 把它撑到 1200px 宽并横向滚动 - 用
colspan合并单元格，Outlook 2016+ 渲染错位 - 给
<td>设max-width，但没配width="100%"，导致 Gmail 忽略该限制
正确写法示例（兼容 Outlook + Gmail + iOS Mail）：
<!-- 桌面表格：显示为两栏 -->
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="300" style="padding: 12px;">左栏内容</td>
<td width="300" style="padding: 12px;">右栏内容</td>
</tr>
</table>
<p><!-- 移动端堆叠：仅在小屏显示 -->
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="display: none; mso-hide: all;">
<tr><td style="padding: 12px;">左栏内容</td></tr>
<tr><td style="padding: 12px;">右栏内容</td></tr>
</table>内联样式不是“建议”，是强制要求
任何没写进 属性里的样式，都大概率失效。Gmail 删除整个 <style></style>；Outlook 保留但无视类选择器；Yahoo Mail 只执行 @media 内部规则。
使用场景：
- 按钮文字居中：必须在
<td>上写text-align: center，不能只写在父<table> - 字体统一：每个
<p>、<td>、<h2>都得带font-family: Arial, sans-serif - 行高控制：写
line-height: 20px，别写line-height: 1.5（单位缺失时部分 Android 客户端会忽略）
参数差异：
-
padding安全，margin在 Outlook 中几乎无效 → 全部改用padding -
bgcolor属性比background-color更稳 → 优先写<table bgcolor="#f0f0f0"> - 图片必须带
width和height属性，且用绝对值（如width="200"），不能用%或auto
Doctype、meta 和基础结构怎么选才不翻车
用 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> —— 不是 HTML5 的 <!DOCTYPE html>，也不是 HTML 4.01。
原因很实际：
- Gmail 和 Hotmail 会主动把你写的 Doctype 替换成这个 XHTML 1.0 Transitional
- XHTML 强制闭合标签、小写属性、引号包裹，反而让 Outlook 解析更稳定
-
<meta name="viewport">对 Gmail App 和 Outlook iOS 几乎无用，但加上不坏事；<meta http-equiv="X-UA-Compatible" content="IE=edge">是 Outlook 必备
容易被忽略的点：
- 所有
<table>必须带role="presentation"，否则屏幕阅读器会误读为数据表 - 外层容器用
<table width="100%">包住全部内容，再套一层width="600"的内表模拟居中 - 避免超过 4 层嵌套
<table>，某些 Android 客户端会丢掉最内层样式
