0

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

4

1 回答 1

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

于 2021-05-14T18:45:24.673 回答