Question

我已经使用mjml框架完成了一个简报。我必须更改移动设备上的标题图片，但是如何？该框架对于制作防弹新手非常有用，但不支持不同视口的不同图像。

这是标题代码：

＆＃13;

              <table role="presentation" border="0" cellpadding="0" cellspacing="0" width="900" align="center" style="width:900px;">
                <tr>
                  <td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;">
              <![endif]-->
    <div style="margin:0px auto;max-width:900px;background:#29c5f8;">
      <table role="presentation" cellpadding="0" cellspacing="0" style="font-size:0px;width:100%;background:#29c5f8;" align="center" border="0">
        <tbody>
          <tr>
            <td style="text-align:center;vertical-align:top;direction:ltr;font-size:0px;padding:20px 0px;padding-bottom:0px;padding-top:0px;">
              <!--[if mso | IE]>
              <table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td style="vertical-align:top;width:900px;">
              <![endif]-->
              <div class="mj-column-per-100 outlook-group-fix" style="vertical-align:top;display:inline-block;direction:ltr;font-size:13px;text-align:left;width:100%;">
                <table role="presentation" cellpadding="0" cellspacing="0" style="vertical-align:top;" width="100%" border="0">
                  <tbody>
                    <tr>
                      <td style="word-break:break-word;font-size:0px;padding:10px 25px;padding-top:0px;padding-bottom:0px;padding-right:0px;padding-left:0px;" align="center">
                        <table role="presentation" cellpadding="0" cellspacing="0" style="border-collapse:collapse;border-spacing:0px;" align="center" border="0">
                          <tbody>
                            <tr>
                              <td style="width:900px;">
                                <a href="http://www.link.com" target="_blank">
                                  <img alt="" title="" height="auto" src="http://www.link.com/img/img-desktop.png" style="border:none;border-radius:;display:block;outline:none;text-decoration:none;width:100%;height:auto;" width="900">
                                </a>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <!--[if mso | IE]>
              </td></tr></table>
              <![endif]-->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
    <!--[if mso | IE]>
              </td></tr></table>
              <![endif]-->
    <!--[if mso | IE]>

＆＃13;

感谢您的支持

Answer 1

我想说这里有三个选项：

根据所使用的设备，使用媒体查询（特别依赖于display属性，以及对Outlook的条件评论），在HTML中显示两个图像并显示正确的图像
将您的桌面图片代码img包裹在span中。在移动设备上，您将使用媒体查询来隐藏此桌面图片，并使用span属性向background-url标记添加背景图片，这将取代＆＃34;替换＆＃34;您隐藏的桌面图片
HTML中只有一个图片代码，指向托管在服务器上的图片，并根据打开电子邮件的设备发送回正确的图片（使用用户代理）

不幸的是，所有这些都有缺点：

虽然仅在移动设备上显示移动内容是完全可行的，但隐藏内容会更加棘手并且可能无法正常工作，因此最终可能会显示两个图像。此外，不支持媒体查询。
所有电子邮件客户端都不支持背景图片，因此无处不在。同样，各地都不支持媒体查询。
您需要处理脚本。但是，使用https://www.npmjs.com/package/ua-parser

在兼容性方面，第三种选择绝对是最好的选择。这是你的选择吗？

Answer 2

MJML文档允许使用属性srcset基于视口更改mj图像的图像。

srcset url和width可以根据视口设置不同的图像源

但是在我的测试中，我一直无法使它们工作。

我建议使用媒体查询和CSS类。

在移动设备上更改简报标题图像

2 个答案: