媒體查詢不能在MailChimp上工作

我很新的CSS，我試圖給我的MailChimp新聞組添加一些自定義。我的圖片有文字，所以當我使它們響應並在移動設備上查看時，文字太小。我想要有兩個版本：1個圖像在桌面上可見，另一個圖像在移動設備上可以看到。我使用這段代碼，它在我的網站上工作，但不在MailChimp上。媒體查詢不能在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等中不能很好地工作，但是有沒有解決方案？如果不是媒體查詢，我還能做些什麼來解決這個問題？

來源

2015-09-21 Brie

HTML電子郵件是臭名遠揚的片狀。解析器過時並且不支持許多新標準。請參閱[this]（https://css-tricks.com/using-css-in-html-emails-the-real-story/）文章。我不確定是否支持CSS Media查詢，但是您可以嘗試通過[Premailer]（http://premailer.dialect.ca/）運行您的消息以查看它將如何顯示，併爲不支持的功能生成任何CSS警告在電子郵件客戶。 – War10ck

@ War10ck是正確的。在創建HTML電子郵件時，最好假設它是1998年。佈局表，不推薦的HTML樣式，內聯樣式等。您最好打電話給Mail Chimp客戶支持。 –

感謝您的輸入。 MailChimp支持告訴我這是可能的，但我需要向程序員尋求幫助，因爲他們不是編碼專家。我想我只需要調整我的形象。再次感謝！ – Brie

我有運氣是這樣的：

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

...

來源

2015-10-16 01:02:03

媒體查詢不能在MailChimp上工作

回答

相關問題