Html 电子邮件中与屏幕分辨率相关的响应图像？

我目前正在使用MJML创建响应电子邮件。我遇到的困难不是MJML本身的问题，而是某些电子邮件客户端不支持媒体查询/样式，因此我不确定如何创建一种有效的方式来显示桌面和移动视图中的不同图像

以下是我目前的代码：

<mjml>
  <mj-head>
     <mj-style inline="inline">
      .show_on_desktop,
      .show_on_desktop-outlook {
        display: none;
      }

      .show_on_desktop,
      .show_on_desktop-outlook {
        mso-hide: all;
      }
    </mj-style>
    <mj-style>
      @media only screen and (min-width:480px) {
        .show_on_desktop {
          display: block !important;
        }

        .show_on_mobile,
        .show_on_mobile-outlook {
          display: none !important;
        }
      }
    </mj-style>
  </mj-head>
  <mj-body>

    <mj-section css-class="show_on_desktop" padding="0">
      <mj-column css-class="show_on_desktop" padding="0">
        <mj-image src="https://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="" padding="0">
        </mj-image>
      </mj-column>
    </mj-section>

    <mj-section css-class="show_on_mobile" padding="0">
      <mj-column css-class="show_on_mobile" padding="0">
        <mj-image src="https://beebom.com/wp-content/uploads/2016/01/Reverse-Image-Search-Engines-Apps-And-Its-Uses-2016.jpg" alt="" padding="0">
        </mj-image>
      </mj-column>
    </mj-section>
  </mj-body>
</mjml>

.在桌面上显示，
.在桌面outlook上显示{
显示：无；
}
.在桌面上显示，
.在桌面outlook上显示{
mso隐藏：全部；
}
@仅介质屏幕和（最小宽度：480px）{
.在桌面上显示{
显示：块！重要；
}
.在手机上显示，
.在手机outlook上显示{
显示：无！重要；
}
}

---

您可以在这里试用：

很抱歉报告，@Maximoose，但是如果电子邮件客户端不支持媒体查询，您将面临这些客户端无法克服的限制

MJML团队建议作者为“移动优先”编写他们的MJML。也就是说，使用媒体查询创建桌面体验

桌面上对媒体查询的支持远比移动客户端广泛，因此窄屏幕可以获得默认（移动）体验，而宽屏幕（更可能支持媒体查询）可以获得他们的体验

完美？当然不是

电子邮件HTML的世界？它是。欢迎光临

更多信息请访问。根据这一数据，大约一半的电子邮件都支持媒体查询

虽然这一次这些特定的信息很有趣，但是还有很多其他功能的类似信息。一个有价值的网站

---

这次你的反应很快。在（注册：）上提出这个问题也会得到欢迎的回应。快速而深刻的回答。那里的人都很好，就像这里一样。

嗨，非常感谢你的快速回复。我已经尝试从mjml网站（）加入slack频道，但它标记了一个错误。还有其他地方我可以提出这个问题吗？最好是：）