媒体查询不适用于 MailChimp答案

【问题标题】：Media queries not working on MailChimp媒体查询不适用于 MailChimp
【发布时间】：2015-12-18 07:07:44
【问题描述】：

我对 CSS 很陌生，我正在尝试为我的 MailChimp 通讯添加一些自定义。我的图像有文字，所以当我让它们响应并在移动设备上查看它们时，文字太小了。我想要 2 个版本：1 个在桌面上可见的图像和第 2 个在移动设备上可以看到的图像。我正在使用此代码，它在我的网站上对我有效，但在 MailChimp 上无效。

<style>

@media only screen and (min-device-width: 0px)
  and (max-device-width: 720px) {div#banner {visibility:hidden;}}
  
  @media screen and (min-width: 0px) and (max-width: 720px) {
  #banner { display: none; }
  .mobile-hide{ display: none; }
}
  
  
  @media (min-width: 721px)
    @media only screen
   {div#deskbanner {visibility:hidden;}}
  
  @media screen and (min-width: 721px) {
  #deskbanner { display: none; }
  .desk-hide{ display: none; }
}

</style>

<div id="banner" class="fb-like-box mobile-hide"><img src="https://cdn.shopify.com/s/files/1/0073/8132/files/bangkok-traveling-tailor-trunk-show.jpg?606649028080735558" alt="Bangkok Traveling Tailor Trunk Show" style="max-width: 100%; height: auto;"/></div>
<div id="deskbanner" class="fb-like-box desk-hide"><img src="https://cdn.shopify.com/s/files/1/0073/8132/files/bangkok-traveling-tailor-trunk-show-mobile.jpg?4005121060620406786" alt="Bangkok Traveling Tailor Trunk Show" style="max-width: 100%; height: auto;"/></div>

当我在移动设备上查看它时，我会看到我应该看到的移动图像。如果我在桌面上查看电子邮件，我会同时看到桌面图像和移动图像。我确实知道您必须在 MailChimp 上内联 CSS 样式，而且我还读到媒体查询在 gmail 等中效果不佳，但是有解决方案吗？如果不是媒体查询，我还能做些什么来解决这个问题？

【问题讨论】：

HTML 电子邮件因易碎而臭名昭著。解析器已经过时并且不支持许多新标准。请参阅this 文章。我不确定是否支持 CSS 媒体查询，但您可以尝试通过 Premailer 运行您的消息以查看它的显示方式，并针对电子邮件客户端中不支持的功能生成任何 CSS 警告。
@War10ck 是正确的。创建 HTML 电子邮件时，最好假设它是 1998 年。用于布局的表格、不推荐使用的 HTML 样式、内联样式等。最好的办法是致电 Mail Chimp 客户支持。
感谢您的意见。 MailChimp 支持告诉我这是可能的，但我需要向程序员寻求帮助，因为他们不是编码专家。我想我只需要调整我的形象。再次感谢！
我会避免使用两个不同的图像来显示/隐藏。 Gmail 似乎不喜欢这种方法并显示两者。

标签： css mobile media-queries desktop mailchimp

【解决方案1】：

我很幸运遇到了这样的事情：

...
<style>

td.mobile, img.mobile, td.spacer {
    display:none;
}

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


img[class=mobile], td[class=mobile] {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
    height: auto !important;
    max-height: inherit !important;
    font-size: 15px !important;
    line-height: 21px !important;
    visibility: visible !important;
}

}
</style>
...
td[class=hide], span[class=hide], table[class=hide], img[class=hide] {display:none !important;    width:0 !important;}

                    <td bgcolor="#faf8ec" class="mobile" style="width: 0;overflow: hidden;display: none;visibility: hidden;line-height: 0;padding: 0;margin: 0;"><a href="#" target="_blank"><img src="main480.jpg" alt="Holiday Tables" width="310" class="mobile" style="width:0; overflow:hidden; display:none;visibility:hidden;"></a></td>
                    </tr>
                  <tr>
                    <td width="310" align="center" valign="top" bgcolor="#faf8ec" class="w320" style="padding: 0;margin: 0;"><a href="#" target="_blank"><img src="images/main640.jpg" alt="Holiday Tables" width="640" border="0" class="hide" style="display:block; font-size: 23px; font-weight: normal; font-family: Arial, Helvetica, sans-serif; color:#444444;"></a></td>

...

【讨论】：