html - 用于隐藏和显示图像和文本的电子邮件模板

在编码方面非常业余……尤其是在电子邮件模板方面。我很难让G-mail正确地正确隐藏和显示内容。我在这里搜索并找到了一些我认为会有所帮助的答案，但是它似乎不太适合我的代码。截至目前，不担心代码被转发。

这是带有图像的代码部分。希望对此有所关注，也有一些帮助。一切都在一个表中，并且可以在普通浏览器中正常工作……只是专门在G-mail中寻求帮助。

CSS：

@media only screen and (min-width: 480px) {

  .mobilechart {
    display: none !important;
  }
}

@media only screen and (max-width: 480px) {

  .desktopchart {
    display: none !important;
  }

HTML：

<tr>
  <td style="background-repeat:no-repeat;background-position:right;" >
    <div class="desktopchart">
      <img src="https://cdn.maropost.com/pro/uploads/account_415/77640/TC-Email_Template_DESKTOPCHART.jpg" style="width:100%;margin-top:auto;margin-bottom:auto;margin-right:auto;margin-left:auto;" >
    </div>
    <div class="mobilechart">
      <img src="https://cdn.maropost.com/pro/uploads/account_415/77641/TC-Email_Template_MOBILECHART.jpg" style="width:100%;margin-top:auto;margin-bottom:auto;margin-right:auto;margin-left:auto;" >
    </div>
  </td>
</tr>

最佳答案

将我的答案重新发布到this question：

不幸的是，不幸的是，GMail还不支持媒体查询，也不支持display，overflow或visibility属性。

有关更多信息，请参见Campaign Monitor's CSS Support Guide for Email Clients。

恐怕除了重写您的时事通讯以使其完全流畅之外，而不是试图使其具有响应性，否则，这里没有真正的解决方案。