HTML中如何制作响应式邮件模板-html教程-PHP中文网

响应式邮件模板必须依赖表格嵌套、条件性堆叠和内联样式，因outlook桌面版、gmail app等主流客户端基本忽略@media和flexbox；css需全部内联，布局靠html结构而非媒体查询实现适配。

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> 实现“伪响应式”堆叠<p>真正的移动端适配不是缩放表格，而是把横向多列结构，在小屏上转成垂直卡片。核心是两层嵌套：<code><table class="desktop"> 用于桌面，<code><table class="mobile"> 用于手机，再用条件注释或 <code>display: none/block

控制显隐。

常见错误现象：

只写一个 <table> 加 <code>width="100%"，结果 Outlook 把它撑到 1200px 宽并横向滚动
用 colspan 合并单元格，Outlook 2016+ 渲染错位
给 <td> 设 <code>max-width，但没配 width="100%"，导致 Gmail 忽略该限制
正确写法示例（兼容 Outlook + Gmail + iOS Mail）：
```

```
左栏内容右栏内容

左栏内容

右栏内容

内联样式不是“建议”，是强制要求

任何没写进 style="" 属性里的样式，都大概率失效。Gmail 删除整个 <style></style>；Outlook 保留但无视类选择器；Yahoo Mail 只执行 @media 内部规则。

html-deploy
使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

使用场景：
- 按钮文字居中：必须在 <td> 上写 <code>text-align: center，不能只写在父 <table><li>字体统一：每个 <code><p></p>、<td>、<code><h2></h2> 都得带 font-family: Arial, sans-serif
- 行高控制：写 line-height: 20px，别写 line-height: 1.5（单位缺失时部分 Android 客户端会忽略）