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

如何解决与电子邮件中的屏幕分辨率相关的响应式图像？

我目前正在使用 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>

您可以在这里现场试用：https://mjml.io/try-it-live/37hvh_Ss0M7

解决方法

很抱歉报告，@Maximoose，但如果电子邮件客户端不支持媒体查询，那么这些客户端将面临无与伦比的限制。

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

与移动客户端相比，台式机对媒体查询的支持要广泛得多，因此窄屏可以获得默认（移动）体验，而宽屏（更有可能支持媒体查询）可以获得它们的体验。

完美？当然不是！

电子邮件 HTML 的世界？这是。欢迎使用！

请访问 https://www.caniemail.com/features/css-at-media/ 了解更多信息。据此，大约一半的电子邮件打开支持媒体查询。

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

这次你得到了相当快的回应。如果您在 https://mjml.slack.com/（注册：https://join.slack.com/t/mjml/shared_invite/zt-gqmwfwmr-kPBnfuuB7wof5httaTcXxg）上提出这个问题，您也会得到热烈的回应。快速而有见地的答案。那里的好人，就像这里一样。