媒体查询在邮件客户端中支持不一，安全断点为@media only screen and (max-width: 600px)；fallback必须用内联table+width控制单列，所有关键样式需内联且加!important；务必实测outlook for windows、android gmail app和ios mail。
媒体查询在邮件客户端中的实际支持情况
绝大多数桌面和网页版邮箱（如 Gmail Web、Outlook.com、Apple Mail）支持 @media 查询，但 iOS Mail 和 Android Gmail App 仅部分支持——尤其是 @media (max-width: ...) 可用，而 @media screen and (min-width: ...) 在旧版 Outlook for iOS 中常被忽略。关键不是“能不能写”，而是“哪些断点真能生效”。
- 安全断点选
@media only screen and (max-width: 600px)：覆盖 iPhone SE 到 Plus 全系，且被所有主流客户端识别 - 避免嵌套媒体查询或使用
orientation、resolution等属性——Outlook Desktop（基于 Word 渲染引擎）直接忽略 - 不要依赖
rem或vh/vw单位做响应逻辑，Gmail App 会重置为默认字体尺寸，导致布局错乱
单列回退必须靠内联 table + width 控制
当媒体查询失效（比如 Outlook Desktop 或某些企业 Exchange 客户端），唯一可靠 fallback 是让整个模板在小屏下强制单列。这不能靠 CSS Flex/Grid 实现——它们在多数邮件客户端中不被支持。
- 用
<table> 套一层宽 100% 的容器，内部每列用 <code><td> 拆分，而非 <code><div> <li>为每个内容单元设置固定宽度（如 <code>width="320"），并在媒体查询中统一设为width: 100% !important - 禁用
float、display: inline-block，这些在 Outlook 2019/365 中会导致换行异常
示例结构：
|
然后在 @media 中覆盖：td[width="300"] { width: 100% !important; }
内联样式优先级与 !important 的必要性
邮件客户端对 CSS 的解析极其保守：Gmail 会剥离 <style></style> 标签里的大部分规则，Outlook 会忽略外部样式表，甚至把 class 当无用字符过滤掉。这意味着所有关键样式必须内联，且 !important 不是可选项。
- 用工具（如 Mailchimp Inline CSS Tool）自动内联，别手写——漏一个
!important就可能让整行错位 -
font-family必须写成font-family: Helvetica, Arial, sans-serif，iOS Mail 会忽略只带引号的"Helvetica" - 图片高度设
height="auto"并配合max-width: 100%，否则 Android Gmail App 会拉伸变形
测试时最容易被忽略的三个客户端
本地预览或浏览器调试完全没用——真正决定成败的是真实收件箱。以下三个环境必须实测，否则上线即翻车：
-
Outlook for Windows (2019 / 365)：用 Word 渲染引擎，不支持border-radius、box-shadow，且会重置line-height到 1.15 -
Gmail App on Android：会移除所有<style></style>标签，且对padding的解析比 Web 版更激进（常吃掉 4px） -
iOS Mail（iOS 16+）：支持@media，但对background-image的 base64 支持不稳定，建议改用纯色背景 + 图片叠加
复杂点在于：同一份 HTML，在 Gmail Web 里完美，在 Outlook Desktop 里表格塌陷，在 iOS Mail 里字体突然变小——没有银弹，只有逐客户端验证。
