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

Question

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

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

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

Answer 1

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

为了completeness/others，你可以这样做：

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

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

Responsive email without media query or calc() function [both Office 365 and the new Outlook.com]

css

html-email

calc

responsive-design