时间戳

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

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

问题描述

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

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

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

标签： cssresponsive-designhtml-emailcalc

解决方案

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

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

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

推荐阅读