Question

我是CSS的新手，我正在尝试为MailChimp简报添加一些自定义功能。我的图片有文字，所以当我让它们响应并在手机上查看时，文字太小了。我想要有两个版本：1个在桌面上可见的图像和第二个用户在移动设备上看到的图像。我正在使用此代码，它在我的网站上工作，但不在MailChimp上工作。

＆＃13;

<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>

＆＃13;

<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>

＆＃13;

当我在手机上查看它时，我看到的移动图像就像我应该的那样。如果我在桌面上查看电子邮件，我会看到桌面图像和移动图像。我知道你必须在MailChimp上内联CSS样式，我也读过媒体查询在gmail等方面不能很好地工作，但有没有解决方案呢？如果不是媒体查询，我还能做些什么来解决这个问题？

Answer 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>

...

媒体查询无法在MailChimp上运行

1 个答案: