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

Question

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

Answer 1

很抱歉报告，@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）提出这个问题，你也会得到欢迎的回应。快速而有见地的答案。那里的好人，比如这里。