Css 媒体查询不适用于MailChimp

我对CSS非常陌生，我正在尝试为我的MailChimp通讯添加一些定制。我的图像有文本，所以当我让它们响应并在手机上查看它们时，文本太小了。我想有两个版本：一个是桌面上可见的图像，另一个是手机用户可以看到的图像。我正在使用这段代码，它在我的网站上为我的工作，但不是在MailChimp上

@仅介质屏幕和（最小设备宽度：0px）
和（最大设备宽度：720px）{div#banner{visibility:hidden；}
@媒体屏幕和（最小宽度：0px）和（最大宽度：720px）{
#横幅{显示：无；}
.mobile隐藏{显示：无；}
}
@介质（最小宽度：721px）
@仅媒体屏幕
{div#deskbanner{可见性：隐藏；}
@媒体屏幕和屏幕（最小宽度：721px）{
#deskbanner{显示：无；}
.desk隐藏{显示：无；}
}

---

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

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

...

。。。
td.mobile，img.mobile，td.spacer{
显示：无；
}
@仅介质屏幕和（最大宽度：480px）{
img[class=mobile]，td[class=mobile]{
显示：块！重要；
宽度：100%！重要；
溢出：可见！重要；
高度：自动！重要；
最大高度：继承！重要；
字体大小：15px！重要；
线高：21px！重要；
可见性：可见！重要；
}
}
...
td[class=hide]、span[class=hide]、table[class=hide]、img[class=hide]{显示：无！重要；宽度：0！重要；}
...

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

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

...

。。。
td.mobile，img.mobile，td.spacer{
显示：无；
}
@仅介质屏幕和（最大宽度：480px）{
img[class=mobile]，td[class=mobile]{
显示：块！重要；
宽度：100%！重要；
溢出：可见！重要；
高度：自动！重要；
最大高度：继承！重要；
字体大小：15px！重要；
线高：21px！重要；
可见性：可见！重要；
}
}
...
td[class=hide]、span[class=hide]、table[class=hide]、img[class=hide]{显示：无！重要；宽度：0！重要；}
...

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