【问题标题】: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" />

【讨论】:

    猜你喜欢
    • 2016-01-04
    • 2017-03-13
    • 2014-03-31
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-08
    • 2018-09-13
    相关资源
    最近更新 更多