没有媒体查询或 calc() 函数的响应式电子邮件 [Office 365 和新的 Outlook.com]答案

【问题标题】：Responsive email without media query or calc() function [both Office 365 and the new Outlook.com]没有媒体查询或 calc() 函数的响应式电子邮件 [Office 365 和新的 Outlook.com]
【发布时间】：2020-06-18 13:18:06
【问题描述】：

如果不使用响应式电子邮件模板中的媒体查询或 calc() 函数，如何在屏幕变小时隐藏图像？

我必须使用内联样式，因为我无法添加 CSS 类或以任何方式使用样式块（这是由于用于发送邮件的自定义应用程序的性质），因此媒体查询不是我的选项，也不是calc() 函数在 Outlook 中工作 - 它只是将其删除。

我遵循了 Fab Four 技术 (https://www.freecodecamp.org/news/the-fab-four-technique-to-create-responsive-emails-without-media-queries-baf11fdfa848/#.mewdyxnz5) 的指导方针，但它对我没有帮助。

【问题讨论】：

您可以在<body> 中包含<style> 块。我不确定最新的 Outlook.com/365 是否会删除它，但值得一试。
成功了。谢谢。

标签： css responsive-design html-email calc

【解决方案1】：

您将需要@media，但是，您可以在<body> 中包含<style> 块。

为了完整性/其他，你可能会做这样的事情：

<style type="text/css">
@media screen and (max-width:600px) {
  .hideMobile { display:none!important; }
}
</style>
<img class="hideMobile" src="..." width="xxx" />

【讨论】：