媒体查询邮件

Posted 2023-03-06

【中文标题】媒体查询邮件

【英文标题】：Media Query Email

【发布时间】：2021-07-10 15:16:37

【问题描述】：

我使用媒体查询创建响应式 html 电子邮件，但在 Gmail / Outlook / Inbox 中，媒体查询中的 max-width 指的是浏览器视口，而不是 HTML 电子邮件。

所以，在本地主机上，我的电子邮件切换到移动显示，在 700 像素以下，在 Gmail / Outlook / 收件箱中，这个行为被打破了。

您是否有解决方案让媒体查询将邮件视口而不是浏览器视口作为视口？

【参考方案1】：

没有。

理论上，javascript 可以做到这一点，但您不能编写 JavaScript 以在 HTML 格式的电子邮件中运行。

Container queries 也可以做到这一点，但它们是如此前沿，以至于在撰写本文时，只有 Chrome 支持 then 并且只有当用户在设置中明确启用该功能时才支持。